PDA

View Full Version : Centering

halotree
24th September 06, 10:02 AM
Hi all,
My first question here, if ive done something wrong please tell me. OK, I am coding this template that the entire site needs to be centered, but even though, links are correct and CSS + xhtml is correct ( in my view) it isnt displaying. Below is the CSS + XHTML, can you point out what ive done wrong?
-Thanks HaloT


body {
margin: 0px;
background: url(img/bg.jpg);
font-family: Lucida Sans Unicode;
}
#container {
width: 881px;
background-color: #fff;
border-right: 1px #deddc2 solid;
border-left: 1px #deddc2 solid;
margin: 0px;
}
#blue {
width: 850px;
height: 40px;
background: url(img/blue.jpg);
}
#header {
background: url(img/header.jpg);
width: 850px;
height: 123px;
}
#navigation {
width: 820px;
height: 26px;
background: url(img/navigation.jpg);
color: #fff;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-align: left;
font-size: 14px;
padding-top: 8px;
padding-left: 30px;
}
#navigation a {
margin-right: 10px;
color: #fff;
text-decoration: none;
background-position: top;
padding: 8px 12px 9px 12px;
}
#navigation a:hover {
background: url(img/hover.jpg);
background-position: bottom;
}
#dots {
width: 850px;
height: 1px;
background: url(img/dots.jpg);
margin-top: 4px;
}
#mainback {
width: 880px;
height: 900px;
background: url(img/mainback.jpg);
margin-top: 0px;
}
#lart {
width: 138px;
height: 16px;
background: url(img/lart.jpg);
left: 10px;
top: 200px;
}
#bbar {
width: 881px;
height: 34px;
margin-top: 250px;
margin-left: 200px;
}


HTML:

<!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>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css"></head><body>
<div align="center">
<div id="container">
<div id="blue"></div>
<div id="header"></div>
<div id="navigation">
<a href="#">Home</a>
<a href="#">Om</a>
<a href="#">Siden</a>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Forums</a>
</div>
<div id="dots"></div>
<div id="mainback"></div>
<div id="lart"></div>
<div id="rm"></div>
<div id="bbar">
<img id="bbar" src="img/bbar.jpg" width="881" height="34" alt=""/></div>





</div>

</div>
</body></html>
Game Makker
24th September 06, 10:36 AM
Ok first thigns first. Don't bother using div align="center"

The best way to center a layout is this way:

The html should resemble this:

<div id="wrapper">

<div id="content">
<!-- Content goes in here -->
</div>

</div>


First we have to centralize the content:

body {
margin:0px;
padding:0px;
}

div#content {
width: 800px; /*Change to the required width*/
margin:0px auto;
}


This works in FF but IE doesn't do it correctly so we have to add a bit:

body {
margin:0px;
padding:0px;
}

div#wrapper {
text-align:center;/*in IE this centralises everything*/
}

div#content {
width: 800px; /*Change to the required width*/
margin:0px auto;
text-align:left; /*Ensures text remain aligned to the left*/
}


That's off the top of my head so there's a slight chance Ive gotten it wrong so sorry if I have but I think that works. Hope I was of help.
halotree
24th September 06, 10:44 AM
OK, thanks, I took over from a different coder on this prject so Im adjusting. Just to calrify:
-make two divs: wrapper + content
-wrapper centers everything in IE and content centers the rest.

what do i put in the div CSS now make the layout, margin-top etc?
-HaloT
halotree
24th September 06, 10:45 AM
if it helps here is a link to live site:
http://soccerupload.com/fmnorge/
I want to leave code as it is, but add on text over the top, and small icons etc. what code should i use?