Centering <divs>

[evan]

I started laying my page out by positioning Left and top coodinates. This works ok only if I position everything 100px from the left.

I am also using alot of z-indexes -the reason I set it up like this is to have alot of layout flexibilty with my divs and allowing them to be swapped.

My styles look like this:

Is there a way to edit this so that I can center these divs so they reposition themselves for viewers with higher/lower resolutions.

I tried "position: relative;" and "vertical-align:middle;"

<style>


body{
font-family:arial;
background-color: #F6D18D;
}
#bg{
position:absolute;
/*background-image: url(images/bgb.jpg);*/
top:0px;
left:100px;
z-index:2;
width: 800px;
height: 596px;
visibility: visible;

}
#bar{
background-image: url(images/green-nav-bar.jpg);
top:500px;
left:100px;
width: 800px;
height: 20px;
visibility: visible;
position: absolute;
}
b{
text-decoration:none;
color: #FFFFFF;
font-weight: bolder;
}

b:hover{
text-decoration:none;
color: #660000;
font-weight: bolder;
}
a{
text-decoration:none;
color: #FFFFFF;
font-weight: bolder;

}
a:hover{
text-decoration:none;
color: #660000;
font-weight: bolder;
}
#contactus{
position:absolute;
left:537px;
top:574px;
z-index:6;
visibility: visible;
width: 102px;
height: 18px;
}

#bar{
position:absolute;
left:99px;
top:571px;
z-index:5;
width: 801px;
height: 30px;
background-image: url(images/green-nav-bar.jpg);
}
#about{
position:absolute;
left:359px;
top:574px;
z-index:10;
width: 76px;
height: 18px;
visibility: visible;
}
/*account is hidden because it is now in the middle menu not on the bottom */

#account{
position:absolute;
left:638px;
top:575px;
z-index:11;
width: 96px;
height: 20px;
visibility: hidden;
}

#m{
font-size:100%;
position:absolute;
left:160px;
top:274px;
z-index:36;
width: 183px;
height: 21px;
visibility: visible;
}


#n{
font-size:100%;
position:absolute;
left:443px;
top:274px;
z-index:37;
width: 123px;
height: 24px;
visibility: visible;
}
#o{
position:absolute;
left:696px;
top:274px;
color:black;
width: 100px;
height: 24px;
z-index:38;
visibility: visible;
}

#a {
position:absolute;
left:151px;
top: 395px;
color:#000066;
z-index:20;
height: 95px;
width: 171px;
visibility: hidden;
}

#b{
font-size:100%;
position:absolute;
left:352px;
top: 311px;
color:#000066;
z-index:20;
width: 189px;
height: 193px;
visibility: hidden;
}

#c{
font-size:100%;
position:absolute;
left:125px;
top: 123px;
color:#000066;
z-index:30;
width: 735px;
height: 113px;
visibility: hidden;
}

#d{
font-size:100%;
position:absolute;
left:126px;
top: 126px;
color:#000066;
z-index:30;
width: 735px;
height: 70px;
visibility: hidden;
}
#e{
font-size:100%;
position:absolute;
left:127px;
top: 121px;
color:#000066;
z-index:30;
width: 735px;
height: 70px;
visibility: hidden;
}
#f{
font-size:100%;
position:absolute;
left:629px;
top: 309px;
color:#000066;
z-index:35;
width: 189px;
height: 209px;
font-weight: bolder;
visibility: hidden;
}

#one{
font-size:12pt;
position:absolute;
left:128px;
top: 146px;
color:#000000;
z-index:35;
width: 732px;
height: 65px;
font-weight: normal;
visibility: visible;
}

#two{
font-size:12pt;
position:absolute;
left:128px;
top: 152px;
color:#000000;
z-index:35;
width: 732px;
height: 65px;
font-weight: normal;
visibility: hidden;
}
#apDiv1 {
position:absolute;
left:100px;
top:0px;
width:798px;
height:127px;
z-index:39;
}
</style>

Any suggestions?

[Jas]

Something like this:


body{
text-align:center; /*center in IE*/
}div#center{
margin:auto; /*Center in everything else*/
}
That's a basic examply you can play around with. The margin:auto tells the browser to calculate the margin to be the same on the right and left, which makes it float in the center. IE doesn't cooperate, so you have to center the text-alignment in the parent tag.

[evan]

That might work except, I also have rollover graphics that need exact placement top and left.

I tried creating a containder div with position relative and setting all other divs inside it to position absolute, but for some reason the container won't center

here is the css for the container

#container{
position:relative;
z-index:100;
visibility: visible;
margin: auto;
}

*/a divs with coords */



#a {
position:absolute;
left:151px;
top: 395px;
color:#000066;
z-index:20;
height: 95px;
width: 171px;
visibility: hidden;
}

#b{
font-size:100%;
position:absolute;
left:352px;
top: 311px;
color:#000066;
z-index:20;
width: 189px;
height: 193px;
visibility: hidden;
}

I want those divs to be placed a within that centered container -is this possible?

[boogyman]

#container{
position:relative;
z-index:100;
visibility: visible;
margin: auto;
}


centering trouble is being discussed in another thread..
see http://www.dynamicdrive.com/forums/showthread.php?t=29583

welcome to the forums, and please remember whenever you post computer code to please wrap it inside

tags

producing

computer code

[Jas]

If you still have difficulty after reading through that thread, it would be helpful to provide the full html code as well. It's hard to say what the problem is when we can't see the structor. (An online version would be great, but copying and pasting works just as well ;))

One guess, though, is that the parent either does not have the text-align:center (if you viewing in IE), or the parent doesn't stretch the full width of the screen or containing object (in other words, the screen or top level object is 800px, but the parant object is only 400px; in this case, the object would center in the 400 rather then the 800). Either of those would prevent the object from being displayed in the center.

[evan]

thankyou,
I will try that.