Click to See Complete Forum and Search --> : center layout


Ruriko
09-19-2006, 10:50 PM
This is my layout http://ruriko.awardspace.com/
How do I make my layout centered horizontally?

/* CSS Document */

body {
background-image: url(images/bg.jpg);
background-repeat: repeat-y;
background-position: 130px;
background-color: #9CCFFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #00349C;
}
.style1 {
font-size: 12px;
font-weight: bold;
}
#layout {
position:absolute;
width:200px;
height:491px;
z-index:1;
left: 130px;
top: 0px;
}

#content {
position:absolute;
width:473px;
z-index:1;
left: 229px;
padding: 10px;
top: 366px;
}
#nav {
position:absolute;
width:169px;
height:0;
z-index:1;
left: 150px;
top: 0px;
padding: 10px;
}
#credit {
position:absolute;
width:167px;
left: 151px;
bottom: 0px;
padding: 10px;
z-index: 2;
}
a:link {
color: #00349C;
text-decoration: none;
}
a:visited {
color: #00349C;
text-decoration: none;
}
a:hover {
color: #FFFFFF;
text-decoration: none;
}
a:active {
color: #00349C;
text-decoration: none;
}

Xeel
09-19-2006, 11:43 PM
Try to use margin attribute in the external div. Also sometimes the only way to do it is to calculate work screen size with javascript using onload attribute of body, and then manually change the upper margin size (also with JS). But it's for very special cases, like when you have your webpage vertical size fixed for ex.

Also, just as a note, your website is very far from XHTML 1.0 Transitional, it has tons of errors (depricated attributes, unclosed tugs, wrong tag parentage, etc). I'd recommend consulting W3C and ohter resources for more info on the markup gramma:

TopXML : The - Tags (XHTML Reference) (http://www.topxml.com/xhtml/xhtml_tag_h1_h6.asp)
W3Schools - HTML 4.01 / XHTML 1.0 Reference (http://www.w3schools.com/tags/default.asp)
XHTML1.0 Transitional Tags List (http://openlab.ring.gr.jp/k16/htmllint/tagslist.cgi?HTMLVersion=XHTML1-Transitional)

Tables and relative position rule. ;)

KDLA
09-20-2006, 08:24 AM
Alter your coding to be like this:

body {text-align: center; background-color: #9CCFFF;}
#wrapper {
background-image: url(images/bg.jpg);
background-repeat: repeat-y;
background-position: 130px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #00349C;
margin: auto;
padding: 0;
width: ###px; /* place your preferred width here
text-align: left;
}