Using <div> to place a picture across a cell border

[Fokke Nauta]

Hi all,

I have a news letter, created by a table with cells. There is some text and
pictures in it. One picture, now placed in the top cell, I want to place
partly over the cell border, so that the picture lies over the top cell and
the cell below. Is this possible anyway?
You can find my news letter here: www.pc3.nl/test/nieuwsbrief.htm. When you
look into the www.pc3.nl/test directory, you'll see a picture as well. This
is not used but shows how I want the picture to be placed.

I doubt if it can be done, but one never knows ...

Many thanks in advance for your help.
With best regards,
Fokke Nauta

 

[Jukka K. Korpela]

I have a news letter, created by a table with cells. There is some text and
pictures in it. One picture, now placed in the top cell, I want to place
partly over the cell border, so that the picture lies over the top cell and
the cell below. Is this possible anyway?

Yes, and it’s rather easy. You just use relative positioning, which
means that an element is displaced from the position it would otherwise
occupy, by the amount you specify using the top, right, bottom, or left
properties. Example:

img {
position: relative;
top: 45px;
}

This would displace _every_ image, so it’s not suitable, but you can add
an id attribute to the <img> element, say id="photo", and use the
selector #photo instead of the selector img.

 

[Fokke Nauta]

Yes, and it's rather easy. You just use relative positioning, which means
that an element is displaced from the position it would otherwise occupy,
by the amount you specify using the top, right, bottom, or left
properties. Example:

img {
position: relative;
top: 45px;
}

This would displace _every_ image, so it's not suitable, but you can add
an id attribute to the <img> element, say id="photo", and use the selector
#photo instead of the selector img.

Thanks very much, Jukka.
I would never believe it was that simple!
Great help.

Best regards,
Fokke