CSS need centered [Archive] - CodingForums.com

wolfyeb

11-03-2009, 04:02 AM

i've been workin at this for about 3 hours and i'm about to pull my hair out. all i need is this centered

<html>
<head>
<title>
</title>
<style>
body {
background-image: url('img/bkg.jpg');
}
.clearall {
clear: both;
display: hidden;
}
#navbar{
display: block;
padding: 0px 20px 0px 20px;
border-top: 5px solid #dddddd;
border-bottom: 5px solid #dddddd;
float: left;
}
#navbar a #home{
float: left;
width: 124px;
height: 35px;
background-image: url('img/welcome.gif');
}
#navbar a #photos{
float: left;
width: 124px;
height: 35px;
background-image: url('img/photos.gif');
}
#navbar a #aboutus{
float: left;
width: 124px;
height: 35px;
background-image: url('img/aboutme.gif');
}

</style>
</head>
<body>
<div id="centerme">
<div id="navbar">
<a href="index.htm"><div id="home"></div></a>
<a href="photos.htm"><div id="photos"></div></a>
<a href="aboutus.htm"><div id="aboutus"></div></a>
<div class="clearall"></div>
</div>
<div class="clearall"></div>
</div>

</body>
</html>

can anyone help

Excavator

11-03-2009, 07:19 AM

Hello wolfyeb,
To center something you need 3 things:

DocType
width
margin:0 auto;

Give this a try: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
background: #ccc url('img/bkg.jpg');
}
#centerme {
width: 412px;
margin: 0 auto;
background: #69C;
}
#navbar{
display: block;
padding: 0px 20px 0px 20px;
border-top: 5px solid #dddddd;
border-bottom: 5px solid #dddddd;
overflow: auto;
}
#navbar #home a,
#navbar #photos a,
#navbar #aboutus a{
float: left;
width: 124px;
height: 35px;
}
#navbar #home a {background: #960 url(img/welcome.gif);}
#navbar #photos a {background: #9C9 url(img/photos.gif);}
#navbar #aboutus a {background: #CC9 url(img/aboutme.gif);}
</style>
</head>
<body>
<div id="centerme">
<div id="navbar">
<div id="home"><a href="index.htm"></a></div>
<div id="photos"><a href="photos.htm"></a></div>
<div id="aboutus"><a href="aboutus.htm"></a></div>
</div>
</div>
</body>
</html>