Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Centering a multiple LAYER layout (???)

Status
Not open for further replies.
BiggyRat

BiggyRat

Technical User
Dec 17, 2006
56
US
'nother Dreamweaver question...

All of my web page layouts are accomplished via Layers...using kind of a WYSIWYG approach to position boxes of images & text where I need them to be on the page.

For the pages I have done in an 800 pixel wide size, those layers are always positioned to the left on a bigger screen; & I now want those multiple layer layouts to slide over to the center (in any browser window.)

I obviously can't do this by applying the CENTER tag to all layers, since I need them to retain their position relationship to each other...

...so...

1) Can I place my Layers layout in a Table; & center position the entire table ?

2) Can the Body be centered...since the layers reside in the body?

Thanks in advance for any help,

Biggy Rat
Dreamweaver MX (6.0)
 
Sort by date Sort by votes
Just wrap everything in a div, and use margin:auto.
e.g.
Code: 
#container {
width: 700px;
border: #FFFFFF 2px solid;
margin: auto;
}

Code: 
...
<body>
    <div id="container">
...
</div>
</body>
Use CSS for layout.
Use tables for tabular data.

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill
 
Upvote 0 Downvote
traingamer...

Thanks...sorry it took me so long to get back.

If I already have multiple divs...how can those be wrapped after the fact?

For example...the code to one page in particular now reads:

<body>
<div id="Layer1" style="position:absolute; left:17px; top:24px; width:298px; height:37px; z-index:1"><img src="MW_Line1.jpg" width="338" height="46"></div>
<div id="Layer2" style="position:absolute; left:9px; top:90px; width:300px; height:132px; z-index:2"><img src="MW_Line2.jpg" width="348" height="155"></div>
<div id="Layer3" style="position:absolute; left:2px; top:261px; width:301px; height:77px; z-index:3"><img src="MW_Line3.jpg" width="360" height="105"></div>
</body>

How would that be wrapped in a larger div?

Thanks,

Biggy Rat
 
Upvote 0 Downvote
If you are using position:absolute, those absolutely positioned items will not be able to move to the center.
You might try floats or relative positioning instead. Given your snippet, I might try
Code: 
<body>
  <div id="container">
<div id="Layer1" style="position:[b]relative[/b]; left:17px; top:24px; width:298px; height:37px; z-index:1"><img src="MW_Line1.jpg" width="338" height="46"></div>
<div id="Layer2" style="position:[b]relative[/b]; left:9px; top:90px; width:300px; height:132px; z-index:2"><img src="MW_Line2.jpg" width="348" height="155"></div>
<div id="Layer3" style="position:[b]relative[/b];left:2px; top:261px; width:301px; height:77px; z-index:3"><img src="MW_Line3.jpg" width="360" height="105"></div>
   </div><!-- end #container -->
</body>

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill
 
Upvote 0 Downvote
That doesn't work...when you go w/ relative positioning, the vertical values change all over the place. I even tried it with nested layers, where the parent layer is the container...& that doesn't work either.

This is so frustrating. 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.

Instead...this is like the best guarded secret in webdev.

Very frustrating.

Biggy Rat
 
Upvote 0 Downvote
that doesn't work either...the size of the container changes (in width.) The size of the parent layer, layer 1 (Dreamweaver nomenclature), container...whatever you want to call it...stays absolute. It's position is assigned as relative; & the centering accomplished by auto margin...like this:

<div id="Layer1" style="position:relative; width:285px; height:311px; margin: 0 auto;">
<div id="Layer2" style="position:absolute; width:47px; height:115px; z-index:1; left: 226px; top: 120px;"><img src="layer2.jpg" width="58" height="133"></div>
<div id="Layer3" style="position:absolute; width:131px; height:115px; z-index:2; left: 3px; top: 3px;"><img src="layer3.jpg" width="158" height="189"></div>
<div id="Layer4" style="position:absolute; width:176px; height:71px; z-index:3; left: 94px; top: 130px;">;"><img src="layer4.jpg" width="158" height="189"></div>
</div>

...where the container (Layer 1) was assigned relative positioning & centered by auto margins...& the nested layers (2,3 & 4) remained absolute; & inline. The code entries for divs 2, 3 & 4 are tabbed (inset) two spaces on the html page...otherwise...I'm not sure what else defines layers 2, 3 & 4 as "nested", when read by browsers.

So...that solved it, finally...but now the problem is...everyone tells you inline styles are not good.

What a medium.

Thanks all,

Biggy Rat
 
Upvote 0 Downvote
...I'm not sure what else defines layers 2, 3 & 4 as "nested", when read by browsers.
Click to expand...
Divs 2, 3 and 4 are enclosed in Div1.
...everyone tells you inline styles are not good.
Click to expand...
Nonsense. But you could easily have accomplished the same thing in an included or embedded stylesheet by applying styling to the divs.
Code: 
...
#div1  {
position:relative; 
width:285px; 
height:311px; 
margin: 0 auto;}
etc.

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill
 
Upvote 0 Downvote
traingamer...

I'm not seeing how that's easier (for the coder)...since the info for every div would need to be included in the style sheet & then the individual inline divs would have to refer to those entries in the style sheet...but if it's better in terms of code efficiency; and more universally acceptable by numerous browser types...

...like Churchill said, right?...(&…I'll do it, thanks.)

So...why exactly are inline styles not so good?

Thanks again for all your help...really appreciate it (seriously),

Biggy Rat
 
Upvote 0 Downvote
Inline styles are fine in the right place. Embedded styles are fine.

If, however, you want to really harness the power of CSS and stlyesheets, you use one included stylesheet across all of your Web site. A single change to that one sheet would be reflected in multiple html files. :)
 
Upvote 0 Downvote
Inline styles make for a heavier page, store externally and import or link - this will give you a faster page load time.

If you want to centralise everything using w3c standards then wrap your entire body with the layer created below, this is strict HTML compliant:

Code: 
#mainContainer {
	position: absolute;
	margin-left: -400px;
	left: 50%;
	width: 800px;
	z-index: 0;
}

so your code will look like:
Code: 
<body>
<div id"mainContainer">
[COLOR=red]{all your layers}[/color]
</div>
</body>
Hope this helps.

Damien
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

cohan123
  • Locked
  • Question
page layout-&gt;page size, optimal for web
Replies
0
Views
500
cohan123
cohan123
RBGraphics
  • Locked
  • Question
Adobe Portfolio
Replies
0
Views
544
RBGraphics
RBGraphics
jackQue1983
  • Locked
  • Question
centering layer in html 2
Replies
2
Views
213
Kjonnnn
Kjonnnn
hifispin2015
  • Locked
  • Question
Creating a slect all button for A Multiple Slect HTML Form Field
Replies
1
Views
237
LyndonOHRC
LyndonOHRC
Mike Lewis
  • Locked
  • Question
Using Dreamweaver to maintain a site not created in Dreamweaver
Replies
2
Views
619
Mike Lewis
Mike Lewis

Part and Inventory Search

Sponsor

Back
Top