Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Running text through an image

Reply
Thread Tools

Running text through an image

 
 
Fokke Nauta
Guest
Posts: n/a
 
      02-23-2012
Hi all,

I have a table with cells. In one of the cells there is text. I also put an
image there:

<img class="photo" align="right" src="image.gif" width="150" height="159"
border="0">

In the embedded CSS style I have displaced the image so it will partly be in
another cell:

..photo {
position: relative;
top: -110px;
}

This works well. The problem is, that the text wraps around the area where
the image is.
How can I get the text running through this area?

You can see an example in www.pc3.nl/test/example.htm
Although the images are not there, you can see the area's where the images
are. It's about the image in the upper right corner. I want the text in the
top of the grey cell running
through the image area.

Many thanks in advance.

With best regards,
Fokke Nauta



 
Reply With Quote
 
 
 
 
Jukka K. Korpela
Guest
Posts: n/a
 
      02-23-2012
2012-02-23 11:07, Fokke Nauta wrote:

> In the embedded CSS style I have displaced the image so it will partly be in
> another cell:

- -
> The problem is, that the text wraps around the area where
> the image is.
> How can I get the text running through this area?


You would need to use absolute positioning then. In relative
positioning, the positioned element affects normally to the flow of the
contents, just in the displaced position. In absolute positioning (which
is in reality just _different_ relative positioning), the positioned
element works "out-of-the-flow", possibly overlaying other contents.

> You can see an example in www.pc3.nl/test/example.htm
> Although the images are not there, you can see the area's where the images
> are.


Well not quite, on Firefox I don't see the positioned image area, unless
I tell the browser to draw a border around it. It's useful to use dummy
images during testing.

Anyway, absolute positioning is trickier. You could wrap the <img>
element in a <div> (inside the table cell - the extra element is needed
because cells don't like to be positioned), set position: relative on
the <div> and position: absolute and e.g. a suitable top value on the
<img> element. The positioned element will then appear topmost (in the z
direction), i.e. if there is text in the same area of the window, the
text will be under the image and thus not visible. To make the text
appear on top of the image (in z direction), you need to set position:
relative on an element containing the text and assign a larger z-index
value to it than to the <img>.

--
Yucca, http://www.cs.tut.fi/~jkorpela/
 
Reply With Quote
 
 
 
 
Fokke Nauta
Guest
Posts: n/a
 
      02-23-2012
"Jukka K. Korpela" <(E-Mail Removed)> wrote in message
news:ji51li$smg$(E-Mail Removed)...
> 2012-02-23 11:07, Fokke Nauta wrote:
>
>> In the embedded CSS style I have displaced the image so it will partly be
>> in
>> another cell:

> - -
>> The problem is, that the text wraps around the area where
>> the image is.
>> How can I get the text running through this area?

>
> You would need to use absolute positioning then. In relative positioning,
> the positioned element affects normally to the flow of the contents, just
> in the displaced position. In absolute positioning (which is in reality
> just _different_ relative positioning), the positioned element works
> "out-of-the-flow", possibly overlaying other contents.
>
>> You can see an example in www.pc3.nl/test/example.htm
>> Although the images are not there, you can see the area's where the
>> images
>> are.

>
> Well not quite, on Firefox I don't see the positioned image area, unless I
> tell the browser to draw a border around it. It's useful to use dummy
> images during testing.
>
> Anyway, absolute positioning is trickier. You could wrap the <img> element
> in a <div> (inside the table cell - the extra element is needed because
> cells don't like to be positioned), set position: relative on the <div>
> and position: absolute and e.g. a suitable top value on the <img> element.
> The positioned element will then appear topmost (in the z direction), i.e.
> if there is text in the same area of the window, the text will be under
> the image and thus not visible. To make the text appear on top of the
> image (in z direction), you need to set position: relative on an element
> containing the text and assign a larger z-index value to it than to the
> <img>.
>
> --
> Yucca, http://www.cs.tut.fi/~jkorpela/


Hi Jukka,

Thanks for your quick response.
I have replaced the file for a file with images now. I looked at it with IE
and did not realize that FF doesn't show the image area by nature.

I'm not quite getting what you mean with "set position: relative on the
<div> and position: absolute and e.g. a suitable top value on the <img>
element. ". Could you give me an example of how to code this?

Fokke


 
Reply With Quote
 
Fokke Nauta
Guest
Posts: n/a
 
      02-23-2012
"dorayme" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed)...
> In article <(E-Mail Removed)>,
> "Fokke Nauta" <(E-Mail Removed)> wrote:
>
>> "Jukka K. Korpela" ...

> ...
>> did not realize that FF doesn't show the image area by nature.
>>

>
> There are ways for the area to show, one being to add a style of
> border to the img element.


Sometimes you don't want a border, specifically with transparent gif's.

>> I'm not quite getting what you mean with "set position: relative on the
>> <div> and position: absolute and e.g. a suitable top value on the <img>
>> element. ". Could you give me an example of how to code this?
>>

>
> If you position some element absolutely and there is no ancestor that
> is positioned absolutely or relatively, the element will be positioned
> in relation to the viewport. Otherwise it will take as its reference
> the nearest positioned ancestor.
>
> <http://dorayme.netweaver.com.au/abso...earest_positio
> ned_ancestor.html>


Thanks. I am familiar with this, but I didn't understand what Jukka meant.

> There are some differences among browsers on things in this area with
> tables. Consider these styles:
>
> body {margin: 0;}
> .parent {position: relative; background: red; width: 200px; height:
> 200px;}
> .child {background: black; width: 100px; height: 100px; position:
> absolute; top: 0; right: 0;}
>
> with HTML of
>
> <div class="parent">
> <div class="child"></div>
> </div>
>
> Similar in FF and Safari and probably many other browsers.
>
> But try HTML of
>
> <table>
> <tr>
> <td class="parent">
> <div class="child"></div>
> </td>
> </tr>
> </table>
> </body>
> </html>
>
> Just saying that there are a few tricky areas in this matter.
>
> --
> dorayme


I already had a cont <div> for the page, so it was easy to create an
absolute <div>. I've done that before but didn't realize it would solve my
problem here, as I wasn't aware that an image could cross a cell border.

Anyway, you made it clear and I got it done.

..cont {
margin: auto;
width: 600px;
position: relative;
z-index: 1;
}
..layer1 {
width:120px;
height:138px;
position:absolute;
left:460px;
top:50px;
z-index:1;
}

<div class="layer1"><img src="picture.gif" width="120" height="128"
border="0"></div>

See www.pc3.nl/test/example.htm.

I will test it in a range of browsers.

Thanks, to Jukka as well.

Best regards,
Fokke


 
Reply With Quote
 
Neil Gould
Guest
Posts: n/a
 
      02-23-2012
dorayme wrote:
>
> If you position some element absolutely and there is no ancestor that
> is positioned absolutely or relatively, the element will be positioned
> in relation to the viewport. Otherwise it will take as its reference
> the nearest positioned ancestor.
>
> <http://dorayme.netweaver.com.au/abso...earest_positio
> ned_ancestor.html>
>
> There are some differences among browsers on things in this area with
> tables. Consider these styles:
>

Also differences with width settings. Although the copy in your table says
the CSS is:
..one {
position: relative;
color: #000;
background: #cfc;
width: 800px;
height: 10em;
padding: .5em;
}

The source code reads:.one {
position: relative;
color: #000;
background: #ffc;
max-width: 900px;
padding: .5em;
}

The result is the IE ignores the max-width instruction and fills the
viewport. A descrete width, as in the first copy, would render the same in
FF, IE, Safari, etc.

--
best regards,

Neil


 
Reply With Quote
 
dorayme
Guest
Posts: n/a
 
      02-23-2012
In article <ji5f1k$f4i$(E-Mail Removed)>,
"Neil Gould" <(E-Mail Removed)> wrote:

> dorayme wrote:

....
> > <http://dorayme.netweaver.com.au/abso...earest_positio
> > ned_ancestor.html>
> >

....
> ... Although the copy in your table says
> the CSS is:


> .one {
> position: relative;
> color: #000;
> background: #cfc;
> width: 800px;
> height: 10em;
> padding: .5em;
> }
>
> The source code reads:.one {
> position: relative;
> color: #000;
> background: #ffc;
> max-width: 900px;
> padding: .5em;
> }
>


> The result is the IE ignores the max-width instruction and fills the
> viewport. A descrete width, as in the first copy, would render the same in
> FF, IE, Safari, etc.



Thanks for drawing my attention to this, perhaps I later inserted the
max-width without recording the fact in the pre. I have left the
max-width in but renamed a few things while at it and added a phrase.
That IE 6 ignores the max width is probably not too important, it
still seems to illustrate the main point being made in the two urls
(the other linked from the above).

--
dorayme
 
Reply With Quote
 
dorayme
Guest
Posts: n/a
 
      02-23-2012
In article <(E-Mail Removed)>,
"Fokke Nauta" <(E-Mail Removed)> wrote:

> "dorayme" <(E-Mail Removed)> wrote in message
> news:(E-Mail Removed)...
> > In article <(E-Mail Removed)>,
> > "Fokke Nauta" <(E-Mail Removed)> wrote:
> >
> >> "Jukka K. Korpela" ...

> > ...
> >> did not realize that FF doesn't show the image area by nature.
> >>

> >
> > There are ways for the area to show, one being to add a style of
> > border to the img element.

>
> Sometimes you don't want a border, specifically with transparent gif's.


Just mentioned so that you could see it for testing. I am afraid I
have not been following the specifics of what you are doing on this
occasion.

mmm... that reminds me... I suppose you can't have transparent
borders. You can have borders of the same colour as the background in
some situations, I have actually done this as a quick fix of some
problems, probably to outfox IE!

--
dorayme
 
Reply With Quote
 
dorayme
Guest
Posts: n/a
 
      02-23-2012
In article <(E-Mail Removed)>,
dorayme <(E-Mail Removed)> wrote:

> mmm... that reminds me... I suppose you can't have transparent
> borders. You can have borders of the same colour as the background in
> some situations, I have actually done this as a quick fix of some
> problems, probably to outfox IE!


I pressed post by mistake, before adding on this - really! You can use
transparent and it will appear as the colour of the background of the
element given the style.

--
dorayme
 
Reply With Quote
 
Michael Yardley
Guest
Posts: n/a
 
      02-24-2012
On Feb 23, 11:11*am, "Fokke Nauta" <(E-Mail Removed)> wrote:
> "dorayme" <(E-Mail Removed)> wrote in message
>
> news:(E-Mail Removed)...
>
> > In article <(E-Mail Removed)>,
> > "Fokke Nauta" <(E-Mail Removed)> wrote:

>
> >> "Jukka K. Korpela" ...

> > ...
> >> *did not realize that FF doesn't show the image area by nature.

>
> > There are ways for the area to show, one being to add a style of
> > border to the img element.

>
> Sometimes you don't want a border, specifically with transparent gif's.
>
> >> I'm not quite getting what you mean with "set position: relative on the
> >> <div> and position: absolute and e.g. a suitable top value on the <img>
> >> element. ". Could you give me an example of how to code this?

>
> > If you position some element absolutely and there is no ancestor that
> > is positioned absolutely or relatively, the element will be positioned
> > in relation to the viewport. Otherwise it will take as its reference
> > the nearest positioned ancestor.

>
> > <http://dorayme.netweaver.com.au/abso...earest_positio
> > ned_ancestor.html>

>
> Thanks. I am familiar with this, but I didn't understand what Jukka meant..
>
>
>
>
>
> > There are some differences among browsers on things in this area with
> > tables. Consider these styles:

>
> > body {margin: 0;}
> > .parent {position: relative; background: red; width: 200px; height:
> > 200px;}
> > .child {background: black; width: 100px; height: 100px; position:
> > absolute; top: 0; right: 0;}

>
> > with HTML of

>
> > <div class="parent">
> > <div class="child"></div>
> > </div>

>
> > Similar in FF and Safari and probably many other browsers.

>
> > But try HTML of

>
> > <table>
> > <tr>
> > <td class="parent">
> > <div class="child"></div>
> > </td>
> > </tr>
> > </table>
> > </body>
> > </html>

>
> > Just saying that there are a few tricky areas in this matter.

>
> > --
> > dorayme

>
> I already had a cont <div> for the page, so it was easy to create an
> absolute <div>. I've done that before but didn't realize it would solve my
> problem here, as I wasn't aware that an image could cross a cell border.
>
> Anyway, you made it clear and I got it done.
>
> .cont {
> *margin: auto;
> *width: 600px;
> *position: relative;
> *z-index: 1;}
>
> .layer1 {
> *width:120px;
> *height:138px;
> *position:absolute;
> *left:460px;
> *top:50px;
> *z-index:1;
>
> }
>
> <div class="layer1"><img src="picture.gif" width="120" height="128"
> border="0"></div>
>
> Seewww.pc3.nl/test/example.htm.
>
> I will test it in a range of browsers.
>
> Thanks, to Jukka as well.
>
> Best regards,
> Fokke- Hide quoted text -
>
> - Show quoted text -


Thanks. I am familiar with this, but I didn't understand what Jukka
meant.


HistoryJukka is an old variant of the name Johannes, a biblical name
spread over to Finland through Sweden with the introduction of
Christianity. Jukka remained a nickname for people registered by
authorities as Johan, Johannes, Juho etc., and did not appear in
official records until the late 19th century. [1] The name was added
to the official list of first names in the Finnish almanac managed by
the Almanac Office at the University of Helsinki in 1950, and its name
day is June 24, also the name day of Johannes and other variants, and
the traditional midsummer day, or Juhannus

Nothing to do with HTML
 
Reply With Quote
 
Fokke Nauta
Guest
Posts: n/a
 
      02-24-2012
"Michael Yardley" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed)...

<cut>

>> Thanks. I am familiar with this, but I didn't understand what Jukka
>> meant.



>HistoryJukka is an old variant of the name Johannes, a biblical name
>spread over to Finland through Sweden with the introduction of
>Christianity. Jukka remained a nickname for people registered by
>authorities as Johan, Johannes, Juho etc., and did not appear in
>official records until the late 19th century. [1] The name was added
>to the official list of first names in the Finnish almanac managed by
>the Almanac Office at the University of Helsinki in 1950, and its name
>day is June 24, also the name day of Johannes and other variants, and
>the traditional midsummer day, or Juhannus
>
>Nothing to do with HTML


Thanks. This is always interesting stuff.
I once had a colleague whose name was Jukka. He came from Finland.

I expressed myself wrong. I should have written: "I didn't understand what
Jukka tried to explain".

Fokke


 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
FF bug? Or IE bug? Text doesn't wrap around image in list elementwhen image is aligned. iwasjoeking HTML 9 06-09-2008 11:43 PM
How to call an aspx that accepts parameters through HTTP POST and returns an image, and then display the image in my html? computer_guy ASP .Net 3 07-20-2007 04:25 AM
How do I make a text bar that users can scroll through and be able to highlight the text?!?!! loshbolton@hotmail.com HTML 1 03-10-2006 10:40 PM
wx.Image: Couldn't add an image to the image list. Laszlo Zsolt Nagy Python 1 01-26-2005 09:55 PM
replace instances of text on page with image or other text? juglesh Javascript 16 12-27-2004 04:14 AM



Advertisments