Nesting layers

  • Thread starter Thread starter Paul M
  • Start date Start date
Never put absolutely positioned elements (layers) directly into table cells.
Doing so will cause you to have serious positioning issues with those
layers.

Why do you want to do this?
 
Hi Murray
I have found a nice navigation script but it uses layers/divs. In my past
experience they fly all over the place when say the user resizes the browser
window, so I thought nest it side a table and all will be solved
Paul M
 
I have found a nice navigation script but it uses layers/divs. In my past
experience they fly all over the place when say the user resizes the
browser window, so I thought nest it side a table and all will be solved
Click to expand...

In fact, the layers are rock solid on the screen - it's the tables that are
moving on you. What you need to do is to make the tables and the layers
have the same frame of reference.

The best way to manage this is as shown here -

http://www.roast-horse.com/tutorials/_tutorials/css_centered_content/index.html

And here is some code -

(inline styles used for clarity)

STYLESHEET -
body { text-align:center; } /* for IE5/IE5.5 */
#wrapper { text-align:left; }

BODY -
<div id="wrapper" style="width:760px; top:0; margin:0 auto;
position:relative;">
<table...>...</table>
<div id="layer1" style="width:200px; top: 25px; left:140px;
position:absolute;">blah</div>
<div id="layer2" style="width:180px; top: 136px; left:23px;
position:absolute;">blah</div>
</div>

Try that - an outer relatively positioned division with a width and auto
left and right margins. All interior AP divisions, tables, <p> tags, lists,
images, etc., will be centered, yet retain the same relative positioning.
 
Back
Top