PDA

View Full Version : How can I center a CSS navbar



xin
Jan 15th, 2007, 11:28 PM
Is there a way I can use the 'center' command to center my navbar? At the moment, I have got it centered by specifying how far from the left it should be in order to appear in the center. (it looks great in IE7 but don't know if it's centered on other browsers). I need it to stay '116' from the top to be correct with the rest of the site. To make it a bit easier to look at I have just pasted the code for the buttons, not the entire site.

(A strange thing I've just noticed... when I omit the DocType Tag, my navbar looks perfect. When I add a DocType to the code below, my buttons get fatter, go to the top left of the screen, and I only see four of them!) :eek:


<html>
<head>
<STYLE TYPE="text/css">

#navcontainer
{
margin: 0px 0 0 0px;
padding: 0;
height: 20px;
}

#navcontainer ul
{
border: 0;
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}

#navcontainer ul li
{
display: block;
float: left;
text-align: center;
padding: 0;
margin: 0;
}

#navcontainer ul li a
{
background: #FAEBD7;
width: 130px;
height: 18px;
border-top: 1px solid #f5d7b4;
border-left: 1px solid #f5d7b4;
border-bottom: 1px solid #f5d7b4;
border-right: 1px solid #f5d7b4;
padding: 0;
margin: 0 0 10px 0;
color: #CD8162;
text-decoration: none;
display: block;
text-align: none;
font: 60% Lucida Grande, Lucida Sans Unicode, verdana, lucida, sans-serif;
}

#navcontainer ul li a:hover
{
color: #FFFFFF;
background: #DDA0DD;
}

#navcontainer a:active
{
background: #c60;
color: #fff;
}

#navcontainer li#active a
{
background: #c60;
border: 1px solid #c60;
color: #fff;
}

</STYLE>
</head>
<body>
<div style="position:absolute;left:172;top:116">
<table width=652 height=20 border=0 cellpadding=0 cellspacing=0><tr valign="top">
<td>
<div id="navcontainer">
<ul id="navlist">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
<li><a href="#">Five</a></li>
</ul>
</div>
</tr>
</td>
</table>
</body>
</html>

kaitco
Jan 16th, 2007, 01:02 AM
Omitting the doctype just throws IE into quirks mode and it will display "correct" on IE, but render incorrectly in other browsers. Always use a doctype.

You can normally use margin:auto; on the list. That will make the margins flow automatically. I would look at this site to help you further: http://www.cssplay.co.uk/menus/centered.html

xin
Jan 16th, 2007, 02:06 PM
kaitco, thank you for your reply. I will look at the link you gave. :)

Excavator
Jan 16th, 2007, 04:43 PM
Hello xin,
I think the center command is deprecated. You can style the ul itself easy enough though, have a look at this:

<!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=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#navlist {
width: 660px;
height: 18px;
margin: 100px auto 0 auto;
}
#navlist ul a {
display: block;
}
#navlist li {
float: left;
width: 130px;
height: 18px;
margin: 0 0 10px 0;
list-style-type: none;
text-align: center;
background: #FAEBD7;
border: 1px solid #f5d7b4;
color: #CD8162;
font: 60% Lucida Grande, Lucida Sans Unicode, verdana, lucida, sans-serif;
}
#navlist li a {
float: left;
width: 130px;
height: 18px;
}
#navlist li a:hover {
color: #FFFFFF;
background: #DDA0DD;
}
#navlist a:active {
background: #c60;
color: #fff;
}
</style>
</head>
<body>
<ul id="navlist">
<li><a href="http://www.nopeople.com/">One</a></li>
<li><a href="http://www.nopeople.com/">Two</a></li>
<li><a href="http://www.nopeople.com/">Three</a></li>
<li><a href="http://www.nopeople.com/">Four</a></li>
<li><a href="http://www.nopeople.com/">Five</a></li>
</ul>
</body>
</html>


Or you can see it in action here. (http://www.nopeople.com/CSS/menu_buttons_horizontal/no_images.html)

xin
Jan 16th, 2007, 06:26 PM
Excavator, thank you so much! I have integrated your navbar code into my website code and it looks perfect! Thank you again. :thumbsup: