Latest Announcemnent
New thread

Center webpage with absolute positions?

Status
Not open for further replies.
I

iL <

Active Member
112
2009
0
0
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:
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;
}
 
8 comments
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.
 
Another odd thing,
it only makes div's that have backgrounds,

e.g
Code: 
.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
Code: 
<dov class="class">
<div class="class2"><img src=" "></div>
</div>
it will only position the div with backgrounds, :S
 
the simplest code is

PHP: 
.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
 
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.. ?
 
use background codes for all images, background/sheet/header then use <div class="class"><div>

its a bit cleaner and will validate your css
 
Status
Not open for further replies.
Back
Top