View Full Version : Centering a multiple, overlapping LAYER layout (???)

Jan 3rd, 2007, 04:11 AM
Man...this is so frustrating....must be like the most closely guarded secret in webdev. A designer (even a neophyte like me), should be able to use layers, overlapping other layers, positioned anywhere he wants in their relation to each other, for custom design purposes...& then be able to have that group of layers or nesting of layers (or whatever you want to call it)...stay dead center when the browser window is resized.

Say a designer wanted to place six cameos of former presidents in a circular design, each cameo in it's own layer & overlapping other cameo/layers (overlapping, mind you...which you can only do w/ layers)...& wanted those six presidents in their circular pattern to always remain at the center of the browser window...that should be able to be accomplished very easily.

How in the heck is this done? I couldn't find help on this anywhere so I came here.

Thanks (I hope)


Jan 3rd, 2007, 06:12 AM
Look up the z-index positioning command in CSS. I think thats what you are looking for.

w3schools (http://www.w3schools.com/) has some great CSS info. You can find the Z-index command information there :)

Jan 3rd, 2007, 09:32 AM
"Layer" is a term coined by DreamWeaver and doesn't exist (anymore) in the HTML/CSS nomenclature; I assume you're talking about (absolutely) positioned elements.

I don't know if your are referring to horizontal or vertical entering; in the case of the first this can fairly easily be accomplished by positioning the "former presidents" in relation to a common container element and centering this element using auto left and right margins.
Vertical centering is not natively supported by CSS well and would require a bit of positioning trickery; it should be feasible as well, though. Please let us know what exactly you're looking for.

Your assumption that CSS should accomodate every design whim and disregard technical restrictions and usability and accessibility considerations should be regarded as a misconception, though.

Jan 3rd, 2007, 03:54 PM
"Layer" is a term coined by DreamWeaver and doesn't exist (anymore) in the HTML/CSS nomenclature; I assume you're talking about (absolutely) positioned elements.

I don't know if your are referring to horizontal or vertical centering.Ron...

Thanks...horizontal, that's all.


Jan 4th, 2007, 03:12 PM
Okay; if you create an container element (typically a div) that is parent to all the "former president" elements (probably divs as well, but a look into your markup would be nice and helpful) and position this relative without offset, the president elements can be positioned relative to the position of the container element rather than the browser window so they always keep their bearing.
If you then give the container a certain set width and specify auto left and right margins, the container will remain centered in the browser window while the president elements will sit nicely inside the container where you put them.

A simple example:


<div id="container">
<div id="nixon">...</div>
<div id="ford">...</div>


#container {
position: relative;
width: 500px;
margin: 0 auto;

#container div {
position: absolute;

#nixon {
left: [value];
top: [value];

#ford { etc.

Jan 5th, 2007, 03:11 AM

Dude...I can't figure that out, man.

Look...here's a test page I constructed using nested layers:


When you view the source code, layers 2, 3 & 4 are nested in layer 1...they will stay in their absolute position within layer 1 'cause they're nested.

All I want to do is slide layer 1 to the center of the browser window.

[I tried to do that by renaming layer 1 "container" & going w/ your code...but got all farted up. By taking the "style= " snippet out of each div, along w/ all the coordinates; & then placing those coordinates in your css entries...well...let's just say it didn't look so good.]

Can't we just leave the code for layers 2, 3 & 4 the way it reads now; & somehow just center layer 1...& won't that work 'cause 2, 3 & 4 are nested in 1 ???

I'll go w/ CSS if it's required...but I'm not so good at filling in the blanks. Check out the page...if you can come up w/ something I can use (as a template) I'll send you some dough via PayPal.

(hope I'm allowed to say that in the BBS.)


Jan 5th, 2007, 09:50 AM
First of all, I strongly recommend avoiding inline styles via the style attribute, and instead place the styles in a separate section, either internally via the style element, or externally via the link element and a separate style sheet file (preferred). Read this page (http://www.htmldog.com/guides/cssbeginner/applyingcss/) on the HTML Dog CSS tutorial for more information on this (in fact, read the whole set of tutorials (http://www.htmldog.com/guides/)).

Besides that, you're quite close to the solution; you only need to change the positioning of the container div (id="Layer1") from "absolute" to "relative", remove the left and top offsets and z-index and add margins:

<div id="Layer1" style="position:relative; width:333px; height:311px; margin: 0 auto;">
This should place the Layer1 div top center regardless of window size (provided it's big enough to fit of course). The Layer2 to -4 divs should now be positioned from the edges of the Layer1 div rather than from the window edges; you probably will need to adjust the left values accordingly.

Add--temporary--borders if you want to see where your divs are at: "border: 1px solid #ccc;".

Also, supply a full and (preferably) strict doctype to prevent IE to revert to quirks mode and refuse to center the container:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
I've tried this, and without a full doctype the container won't center. With it, it does.

Jan 6th, 2007, 04:37 PM

That is fantastic, man...thanks a bazillion !!!

What finally did it WAS NOT the addition of the relative & auto margin positioning entries (as I had already tried that, to no avail...which really left me scratching my head)...it was the DOCTYPE entry, as you said.

So now...I have three things I would like to do:

1) As you said...& everybody else also tells you to avoid inline styles...but no one tells you why. I don't think it's a case of browser support, but I actually have no idea know what it is...so...I'm pretty sure Dreamweaver can write layer code in a method other than inline css, so I'm going to hit the help files to see if there is a way to configure the app accordingly...


I do know that when Dreamweaver adds styles (into existing code)...I have never seen the external link method (as on html dog)...I've only seen the conventional method, where the style definitions go into the head & the individual divs refer to the style defs. I don't know how fond I am of the external link idea (speed & all that)...but I want to look into all this in any event.

2) The DOCTYPE entry was the most important part of the solution...& I want to look into that, as well (to see if Dreamweaver can be configured to write the strict doctype into a new page...& why it uses the transitional entry by default.)

3) Can I send you some renumeration for you troubles.

Thanks again...very much,