Layer position relative to a table, not the page?

position must change with screen size

[webboy1]

Can i make a layer that is not specific to an area on the page, but instead is specific to an area of a table?

i.e. if i centre my site on the page, it will move depebding on what size of monitor it is veiwed on. Can i fix my layers so that they also move with the table?

[tedster]

In another thread about layer positioning on a centered layout [webmasterworld.com] knighty mentions a Snap Layer function for DreamWeaver that lets you "anchor" your layer position to any object on the page.

[MikeFoster]

easy to do in IE, but quite a challenge to make it cross-browser.

This example [cross-browser.com] works with IE, NN4, Gecko, and Opera.

[Rhys]

Here is a dead simple way to do this in a table cell. I have tested this code with N4+ N6 and IEx.

<table align="center" border="1">
<tr>
<td>
<FONT face="Arial" color="silver" size="6"><b>discover</b></FONT>
<DIV style="Z-INDEX: 0; POSITION: relative; TOP: -30px; LEFT: 20px; "><FONT face="Arial" color="blue" size="5">Our City</FONT></DIV>
</td>
<td>
Our City - N.Z.
</td>
</tr></table>.

If you reposition the table, you will find that the layer follows the table cell around exactly.

There is one drawback with this I have found, that the browser will render the space where the DIV tag was, not where it is(i.e., minus 30px). The effect of this is that there is a blank space left at the bottom of the table cell. (If you can leave the border off, there is no visible clue to this.)

(edited by: tedster at 5:19 am (utc) on April 1, 2002)