How to create a centered page with layers.

sgbrix · #1 (**permalink**) Mar 10th, 2008, 20:49

I am trying to shake my addiction for tables and plunged in with CSS and layers but I'm sinking fast... The idea was to lay everything in a master layer1 box that would be centered in any browser and resolution.

Code: Select all

#Layer1 {
  
    margin: 0 auto;
    left:14px;
    top:50px;
    width:990px;
    height:850px;
    z-index:1;

This box Layer1 stays centered but keeping (margin: 0 auto) and replacing (position:absolute) for the rest of the layers did not work. 

Here is my mess, am I way out of line here?

SG Brix

---------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>MasterCenterCSS</title>
<style type="text/css">
<!--
#Layer1 {
  
    margin: 0 auto;
    left:14px;
    top:50px;
    width:990px;
    height:850px;
    z-index:1;
    background-color: #FFFFFF;
    text-align: left;
}
body {
    background-color: #003366;
}
#Layer2 {
    position:absolute;
    left:50px;
    top:50px;
    width:911px;
    height:77px;
    z-index:1;
}
#Layer3 {
    position:absolute;
    left:50px;
    top:127px;
    width:911px;
    height:62px;
    z-index:2;
}
#Layer4 {
    position:absolute;
    left:564px;
    top:68px;
    width:391px;
    height:40px;
    z-index:3;
}
.style4 {
    font-family: "Times New Roman", Times, serif;
    font-size: xx-large;
    font-weight: bold;
}
#Layer5 {
    position:absolute;
    left:400px;
    top:19px;
    width:209px;
    height:35px;
    z-index:4;
}
.style5 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 24px;
    font-weight: bold;
    color: #808080;
}
#Layer6 {
    position:absolute;
    left:50px;
    top:162px;
    width:117px;
    height:421px;
    z-index:5;
}
#Layer7 {
    position:absolute;
    left:11px;
    top:850px;
    width:497px;
    height:15px;
    z-index:6;
    background-color: #006699;
    vertical-align: middle;
}
.style29 {
    font-size: xx-small;
    font-style: italic;
    color: #FFFFFF;
    margin-top: 4px;
}
.style6 {
    font-size: xx-small;
    font-style: italic;
    color: #FFFFFF;
}
#Layer8 {
    position:absolute;
    left:500px;
    top:850px;
    width:500px;
    height:15px;
    z-index:7;
    background-color: #006699;
    vertical-align: middle;
}
#Layer9 {
    position:absolute;
    left:35px;
    top:618px;
    width:146px;
    height:183px;
    z-index:8;
}
#Layer10 {
    position:absolute;
    left:234px;
    top:164px;
    width:524px;
    height:22px;
    z-index:9;
}
.style8 {font-family: Arial, Helvetica, sans-serif; font-weight: bold; color: #666666; font-size: 24px; }
#Layer11 {
    position:absolute;
    left:186px;
    top:200px;
    width:609px;
    height:189px;
    z-index:10;
}
.style55 {    font-size: 12px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: #000000;
    font-weight: normal;
}
#Layer12 {
    position:absolute;
    left:500px;
    top:379px;
    width:300px;
    height:436px;
    z-index:11;
}
#Layer13 {
    position:absolute;
    left:200px;
    top:400px;
    width:299px;
    height:435px;
    z-index:12;
}
.style16 {color: #000000}
.style17 {    color: #FF0000;
    font-weight: bold;
}
.style22 {font-size: 9px}
.style9 {    font-size: 10px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: #000000;
    font-weight: normal;
}
-->
</style>
</head>

<body>
<div id="Layer2"><img src="http://www.webforumz.com/images/marraklogoblueline1.jpg" alt="Marrakech Logo" width="911" height="77" /></div>
<div id="Layer3">
  <script menumaker>document.write('<scr' + 'ipt src="topnavbar/topnavbar5.js">'+'</scr'+'ipt>');/*img src="topnavbar/topnavbar5.gif" moduleid="topnavbar (project)\topnavbar6_off.xws"*/</script>
</div>
<div class="style4" id="Layer4">Book and Magazine Printer </div>
<div class="style5" id="Layer5">YEARBOOKS</div>
<div id="Layer6">
  <script menumaker>document.write('<scr'+'ipt src="xaramenu.js">'+'</scr'+'ipt>');document.write('<scr'+'ipt src="sidebarmain/dimpletab.js">'+'</scr'+'ipt>');/*img src="sidebarmain/DimpleTab.gif" moduleid="sidebarmain (project)\DimpleTab_off.xws"*/</script>
</div>
<div id="Layer7">
  <div align="left"><span class="style29">Copyright &copy; 2008 Marrakech Incorporated All right reserved </span> </div>
</div>
<div id="Layer8">
  <div align="right"><span class="style6">Marrakech Incorporated Webpresent since 1994.</span></div>
</div>
<div id="Layer9"><img src="http://www.webforumz.com/images/yearbook2a.jpg" alt="Yearbook Printing" width="146" height="200" /></div>
<div id="Layer10"><span class="style8">YEARBOOK HARDCOVER BOOK PRINTING</span></div>
<div id="Layer11">
  <p class="style55">

bla bla bla

 </p>
</div>
<div id="Layer12"><img src="http://www.webforumz.com/images/yearbook.jpg" alt="Yearbooks" width="300" height="421" /></div>
<div id="Layer13">
  <p align="left" class="style16"><span class="style17">1. </span><span class="style22"><span class="style9">

bla bla bla

</span>.</span></p>
  <p align="left" class="style16"><span class="style17">2</span>. <span class="style9">

bla bla bla

</span></p>
  <p align="left" class="style16"><span class="style17">3</span><strong>.</strong> <span class="style9">

bla bla bla

</span></p>
  <p align="left" class="style16"><span class="style17">4.</span> <span class="style9">

bla bla bla

 </span></p>
  <p align="left" class="style16"><span class="style17">5</span><strong>.</strong> <span class="style9">

bla bla bla

</span></p>
</div>
<div id="Layer1">
  <div id="layer"></div>
</div>
</body>
</html>

saltedm8 · #2 (**permalink**) Mar 10th, 2008, 21:05

i can only guess you are using dreamweaver in layer mode, in this case, code like this

Code: Select all

margin: 0 auto;

will not work, you will need to use the positioning within the css, or just drag the layers where you want them

but if you want to use that code, you can use floating divs and margin etc

this is not the best tutorial i have seen, but it might give you an idea into

them http://www.alistapart.com/articles/practicalcss/

sgbrix · #3 (**permalink**) Mar 10th, 2008, 21:25

Dreamweaver all right but for the moment not dreamy for me, but thanks for having a look. I have been on this for a while. I can create layers of color block to center with Layer1 in different browser. But when I fill them with text we are back to the left.
This info is what I get on several sites;

"If you want other elements to be absolutely positioned inside Layer1, make it relatively positioned first".

#wrapper {position: relative; width: 760px; margin: 0 auto; text-align: left; }
This as the rest lays fine in 1024x768 but not if we go to higher res.

Just no go for me. I thought that once you centered the first layer anything in it would hold its own with in it?

SG Brix

saltedm8 · #4 (**permalink**) Mar 10th, 2008, 22:31

this is an example on how you could create a wrapper, then put divs inside that wrapper

Code: Select all

<title>Untitled Document</title>
<style type="text/css">
<!--

#wrapper {
    margin: 0 auto;
    width:760px;
    height: 200px;}

#content {float:left;
          width: 250px;  
          text-align: left; }


-->
</style>
</head>

<body>
<div id="wrapper">
<div id="content"></div>

</div>
</body>
</html>

as you may notice, i have added height to the wrapper, i have done this purely so you can look in dreamweaver to see what the result is

notice that the </div> to the wrapper is at the bottom and there are divs within that - that are closed, the rest i think you have enougth knowledge to work out

it does not work for absolutes

hope this helps

sgbrix · #5 (**permalink**) Mar 10th, 2008, 22:58

I added new layers to your sample, they all shoot to the left when using a higher resolution. The idea is for the page with layers to keep in the center for any resolution. Like centering a table and place layers inside, which as Izzard would say, "is not a good idea".

#content {float:left;
width: 250px;
margin: 0 auto;
text-align: left; }
#Layer1 {
position:absolute;
left:278px;
top:50px;
width:151px;
height:100px;
z-index:1;
background-color: #CC0000;
}
and so on

moojoo · #6 (**permalink**) Mar 11th, 2008, 13:43

If all you are trying to do is center your layout then have everything inside it its pretty straight forward. (It would help if you had something online we could see).

#container {
width:770px
margin:0 auto;
}

#leftColumn {
width:200px;
float:left;
}

#rightColumn {
margin:0 0 0 205px;
}

<div id="container">
<div id="leftColumn">
<ul>
<li><a href="">Link Here</a></li>
<li><a href="">Link Here</a></li>
<li><a href="">Link Here</a></li>
<li><a href="">Link Here</a></li>
<li><a href="">Link Here</a></li>
</ul>
</div>

<div id="rightColumn">
<p>Sample text paragraph</p>
</div>

</div>

sgbrix · #7 (**permalink**) Mar 11th, 2008, 15:31

Thanks moojoo for your input. Yes the idea is for the page to be centered in any resolution/browser. I tried using the script you supplied but got nowhere with it, mainly because I'm not good working with code directly. I am trying to learn. In my first posting is the complete page script with some comments of mine that should not have been in there. There is to be another column on the right hand side, but I stopped when I realize nothing besides Layer1 was centered.

SG Brix

moojoo · #8 (**permalink**) Mar 11th, 2008, 15:36

I think part of the problem is you are confusing the term "layers". Layers is just DW's way of saying "DIV" and they are not actually layers. When you start absolute positioning etc you are taking objects out of the normal flow. Now if say your masthead was absolutely positioned with a left:auto and contained in a centered container it should stay centered. My suggestion is to scrap what you have, start from scratch and take it one step at a time. You can then add elements in steps and immediately trouble shoot any issues you have.

The above mentioned method would be used if say you had your header content at the bottom of your HTML code to keep it from getting indexed first by spiders.

The bare bones required to center your layout is to

1. Define a width for your container
2. margin:0 auto;

However this may get wonky in IE 5.x and even IE 7 so you can text-align:center; on the body {} in your CSS then text-align:left on your container div. Try to think of it as simple boxes and not elements stacked on each other.

Once your layout is centered you can put as many columns as you need to within the container.

http://mevans76.com/css_layouts/ has various functional examples in both fixed and fluid formats and from 1 to 3 columns. Feel free to use them for reference and a starting point.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Which software to use to create a web page?	learner6	Starting Out	8	Mar 31st, 2008 17:56
Page does not stay vertically centered in IE using CSS	needhelppls	Web Page Design	10	Jan 28th, 2008 23:56
centreing a whole page with layers	Gerry	Web Page Design	5	Sep 4th, 2007 15:25
Layers that go the entire Height of the page.	briandina	Web Page Design	0	Dec 31st, 2006 21:01
Centering layers in a page	gwx03	Web Page Design	9	Nov 26th, 2003 19:55

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
How to create a centered page with layers.