Sorry, 'nother newbie layer positioning ?

[Guest]

I'm trying to use layers with a page that was layed out using centered tables
(shocker, huh?). From reading old threads, I understand to get this to work
I'll probably need to code a little. I've had a little experience with html
(my first webpage was written in notepad I think), but I don't consider
myself an expert and I'm a bit rusty anyway.

If I want to add a navagation bar in a layer to a page and keep it's
location relative to a particular centered table, do I do that with div tags
around the table? Can someone either point me in the right direction or lend
a hand here?

Thanks.

 

[Murray]

Here is a good demonstration -

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

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

 

[Guest]

Thanks for the reply, and the code, Murray. I'll play around with it some
shortly. However, just to sort of be clear, can you tell me if my first
impression is correct:

Is the second div tag in that code just basically the layer that I'm trying
to postion, and the first div tag ("wrapper") a div you've added just to have
something to use to position the layer relative to?

Hope that makes sense.
Thanks.

 

[Trevor L.]

Murray,

I have noticed a few posts on positioning, e.g. whether to use relative or
absolute, and you have (as always) given great info.

What I am wondering is:
Is there a tutorial somewhere that sets out how absolute and relative
positioning of <div>s interact.

I note that you suggest placing absolute <div>s within a relative <div>.
What does this do to the inner divs. Does the absolute positioning become
relative?
--
Cheers,
Trevor L.
Website: http://tandcl.homemail.com.au


I choose Polesoft Lockspam to fight spam, and you?
http://www.polesoft.com/refer.html

 

[Murray]

You're welcome, and you're correct.

Absolutely positioned elements are always positioned with reference to their
closest positioned container. If there is none (e.g., you just create a
page and drop a layer on it), then the body tag is regarded as that
container. Since the body tag never moves, its location is always at 0,0,
and the layer is positioned using that coordinate system.

However, if you wrap the whole page in a relatively positioned layer, then
that relatively positioned layer becomes the closest positioned parent for
the whole page's content. The assigned width, and the auto margins left and
right cause that relatively positioned wrapper layer to 'float' to the
center of the page. When it does so (i.e., its coordinate reference
changes), all content gets carried with it. Inner positioned elements are
still using the 0,0 point of their parent, but that point has changed.

Is the second div tag in that code just basically the layer that I'm
trying
to postion, and the first div tag ("wrapper") a div you've added just to
have
something to use to position the layer relative to?

Yes. Note that I wrapped the ENTIRE page in that first div.

 

[Murray]

Trevor:

See my answer to Cheese_whiz, and you may also want to look here -
http://www.great-web-sights.com/g_layersdemo.asp

Layers are simple once you understand this part.

There are 4 kinds of CSS positioning (we have to move away from the FP sense
of 'layers' here) -

absolute, relative, static, and fixed.

Static positioning is the default - this means that any old container tag
(paragraph, table, div, to name three of the common ones) is positioned on
the screen entirely based on its location in the flow of the code from
<body> to </body>. Such containers occupy space on the page, and will
therefore push other things around as they flex in dimensions, as you have
already experienced with divs and tables.

Fixed positioning is (or should be) what you might think of as a
'watermark'. It's a position relative to the *browser* viewport, not the
page. This means that when a container is position:fixed, it will stay
placed in the browser viewport, even as the page contents scroll beneath (or
above) it. If this style were uniformly supported, then frames could go
away forever, but it's not. Such containers behave in all respects like
absolute positioned containers, except that the frame of position reference
is the browser viewport.

Absolute positioning is positioning using the ancestor container's reference
coordinates. In addition such elements DO NOT occupy space on the page, and
therefore cannot interact in any way with other page elements. This is why
it's such a terrible idea to build a page using only layers. When the
browser's text size is increased, the layers contents expand, and will
overlap other layers without pushing them away. You get a terrible
overlapping mess. Absolute positioned elements simply float above the page,
and once placed, cannot move with respect to the PAGE. This means that if
you have absolutely positioned elements on a page which also contains
centering or flexing content, as you change the browser's viewport
dimensions, you will see page elements shift with respect to the absolutely
positioned elements, which are stuck like glue.

Relative positioning is positioning relative to where that element would
have been placed if it had not been positioned. This is the MOST confusing
thing about the four types of positioning. These elements are placed IN THE
FLOW OF THE CODE. Any offsets (e.g., position:relative; top:20px;
left:150px would be calculated from the place the container would have
been placed if it had been a static element. This concept is shown nicely
on the page I link at the top of this post. Such elements DO take up space
on the page, and they DO therefore interact with other page elements. This
means that as their dimensions change, so will the position of adjacent
static elements.

Does that help?

 

[Guest]

Ok, I've had a bit of time to play around with it, and I've had either mixed
or no success. Here's a link to a test page I set up
http://home.nc.rr.com/digdomain/test.htm

The reason I think maybe part of it is working is because when I resize the
browser window, the layer (which is just the text) stays where it should.
However, the black table which is where all the content I'll add will go
isn't moving either. I think if the black table did move, the layer would
move with it.

The obvious question: why isn't the black table properly centered and
adjusting to center when I resize the browser window?

Thanks again.

 

[Murray]

Well, you should never put an absolutely positioned element directly into a
table cell for starters.

Try this code -

<html>

<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Text on Layer one</title>
</head>

<body bgcolor="#FFFF00" topmargin="0" leftmargin="0" rightmargin="0"
bottommargin="0" style="text-align:center">




<div style="width:900px; height:100%; margin:0 auto; position:relative;">

<div style="position: absolute; width: 100px; height: 48px; z-index: 1;
left: 145px; top: 105px; background-color: #999999; layer-background-color:
#999999; border: 1px none #000000;" id="layer1">
<font color="#33FFCC">Text on Layer one</font></div>
<div align="center">


<table border="1" width="800" height="100%" id="table1" bgcolor="#FFFFFF"
cellspacing="0" cellpadding="0">
<tr>
<td valign="top"><p>This is the table</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p></td>
</tr>
</table>

</div>

</div>
</body>

</html>

 

[Guest]

Thanks again Murray,

I think I posted the wrong page, or accidentally updated it, because I
didn't mean to post the one with the layer inside the table. I was just
trying some different things to try and figure it out.

Thanks a ton for the code. It's simple and clean so I can learn from it
without much trouble I think. I'm just starting back into web design and
when I have something critical like this that's an issue I don't get much
done until I figure it out.

Again, thanks a lot for your help and patience.

 

[Guest]

Hey, got it all to work! Can't say I fully understand "why" it works, but it
does seem to work. Mainly I figured that the style="text-align:center" in
the body tag was formatting for text and wouldn't affect the positioning of
the table within the browser screen, but apparently I was wrong ("shudder",
to think!)

Anyway, thanks again. I just copied that code and I'll keep it somewhere to
refer to if I forget how I got it done.

 

[Murray]

You're welcome. I'm glad I was able to help!