Center webpage with absolute positions?

[iL <]

I've googled and googled, nothings worked. I'm normally pretty wizzy with coding. But for some odd reason, I can't position this webpage center because it has absolute position with percentage used. I've done it before, cant remember how tho?

Here's the css code:

body { background: #000000;   }



.top-nav {
background-image: url('./images/topstrip.png');
background-position:center;
background-repeat:no-repeat;
position:absolute;
width:1152px;
height:93px;
z-index:3;
}


.dscratch {
top:10%;
left:1.7%;
position:absolute;
z-index:3;
}




#navcontainer ul li { display: inline; }

#navcontainer ul li a
{
padding: 0.9em 0.01em;
color: White;
text-decoration: none;
float: right;


}

#navcontainer ul li a:hover
{
background-image: url('./images/active.hover.png');
background-repeat:no-repeat;
background-position:center;

color: #fff;
}


.blackbox {
background-image: url('./images/topblock.png');
background-repeat:no-repeat;
position:absolute;
width:1152px;
height:376px;
z-index:99;
top:10.5%;
}

.logo {
left:2%;
position:absolute;
top:5%;
z-index:100;
}

.designs {
left:2%;
position:absolute;
top:50%;
z-index:101;
}

.recentworks{
background-image: url('./images/recent_work.png');
background-repeat:no-repeat;
width:auto;
height:auto;
top:15%;
left:45%;
position:absolute;
z-index:102;
}

.bodybg {
position:absolute;
z-index:1;
}

.portfolioimg {
left:0.5%;
position:absolute;
top:50.5%;
z-index:105;
border:0;
}


.supportimg {
left:3%;
position:absolute;
top:66%;
z-index:106;
border:0;
}

.point2 {
left:32.5%;
position:absolute;
top:68%;
z-index:106;
border:0;
}

.point3 {
left:58%;
position:absolute;
top:66.5%;
z-index:106;
border:0;
}

.footer {
background:#a0a0a0 url('./images/footer.png');
bottom:0;
left:0.6%;
top:121%;
display:block;
height:49px;
position:absolute;
float:bottom;
text-align:right;
vertical-align:baseline;
width:1152px;
z-index:115;
}

.overview {
position:absolute;
left:3%;
top:98.8%;
z-index:120;
}

.homecontent {
position:absolute;
left:16.5%;
top:95%;
width:790px;
height:219px;
z-index:120;
}


.footerguy {
position:absolute;
left:74.3%;
top:97%;
z-index:122;
}

iL < Reviewed by iL < on 13th Apr 2010. Center webpage with absolute positions? I've googled and googled, nothings worked. I'm normally pretty wizzy with coding. But for some odd reason, I can't position this webpage center because it has absolute position with percentage used. I've done it before, cant remember how tho? Here's the css code: body { background: #000000; } .top-nav { Rating: 5

[Palooo 2009]

Try to add center code in body..

[Loget]

You have a container for your navigation hwoever you need an overall "container" div to put everthing inside and you can position that div and things inside will follow it.

[iL <]

Another odd thing,
it only makes div's that have backgrounds,

e.g

.blackbox {
background-image: url('./images/topblock.png');
background-repeat:no-repeat;
position:absolute;
width:1152px;
height:376px;
z-index:99;
top:10.5%;

and that html for that is e.g

<dov class="class">
<div class="class2"><img src=" "></div>
</div>

it will only position the div with backgrounds,

[Gavo]

A link to the page would help.

as Loget said make a main container & add

margin-left:auto;margin-right:auto;

[iL <]

Still didn't work Gav0,
http://www.jackleslie.com/portfolio/c/beta.php

[CrapH]

the simplest code is

.main-background
{
  margin: 0 auto;
  padding: 0;
  background-color: #DBE5EB;
  background-image: url('images/page_t.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: top center;
  font-family: Arial, Helvetica, Sans-Serif;
  font-style: normal;
  font-weight: normal;
  font-size: 12px;
  color: #40535E;
} 

this is what i use for image backgrounds

[iL <]

yeah, i don't have any help needed for the background codes tho..
or are you telling me to use background codes for all images instead of

<div class="class">
<img src="img">
</div> etc.. ?

[CrapH]

use background codes for all images, background/sheet/header then use <div class="class"><div>

its a bit cleaner and will validate your css