Running text through an image

[Fokke Nauta]

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

 

[Jukka K. Korpela]

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>.

 

[Fokke Nauta]

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.


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>.

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

 

[Fokke Nauta]

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.

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/absolutely_relative_to_nearest_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.

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

 

[Neil Gould]

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/absolutely_relative_to_nearest_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.

 

[dorayme]

dorayme wrote: ....
....
... 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]

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]

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.

 

[Michael Yardley]

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



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













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

 

[Fokke Nauta]

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