PDA

View Full Version : Centering Navbar tabs?


stillercity
05-13-2007, 04:02 PM
Hey its me again, asking another question. Look at my site Here (http://www.holyhalo3.com/css.htm). I want to know how I can center the navbar icons, unless you think it would work better elsewhere.
Thanks in advance,
Stillercity
P.S. Here's my main-nav css code-
#main-nav ul {
padding-left: 0;
margin-left: 0;
background-color: #036;
color: White;
float: left;
width: 100%;
font-family: arial, helvetica, sans-serif;
}

#main-nav ul li {
display: inline;
}

#main-nav ul li a {
padding: 0.2em 1em;
background-color: #036;
color: White;
text-decoration: none;
float: left;
border-right: 1px solid #fff;
}

#main-nav ul li a:hover {
background-color: #369;
color: #fff;
}

#main-nav a span {
display: none;
}

#main-nav a:hover span {
display: block;
position: absolute;
top: 0;
right: 0;
width: 175px;
margin: 8px;
z-index: 100;
color: #c9c9c9;
background: transparent;
font: 10px Verdana, sans-serif;
text-align: right;
}
And here's my html code for it-
<div id="main-nav">
<ul id="navlist">
<li id="active"><a href="http://www.holyhalo3.com/css.htm" id="current">CSS<span>Current Page</span></a></li>
<li><a href="#">About <span>About Holy Halo 3.com</span></a></li>
<li><a href="#">Contact Us<span>Use e-mail or g-mail <br> (&copy; Holy Halo 3)</span></a></li>
<li><a href="#">Portfolio<span>Pictures?</span></a></li>
<li><a href="#">Services<span>How can we help you?</span></a></li>
</ul>
</div>

Excavator
05-13-2007, 04:14 PM
Just get rid of a few float: left;'s and change a few other things.... like this:#header {
height: 150px;
width: 760px;
background: #ffffff
url(untitled.gif);
}
* {
margin: 0;
padding: 0;
border: none;
text-decoration: none;
}
#main-nav {
background-color: #036;
color: #ffffff;
overflow: hidden;
text-align: center;
font-family: arial, helvetica, sans-serif;
}
ul {
background-color: #036;
font-family: arial, helvetica, sans-serif;
}
#main-nav ul li {
display: inline;
}

#main-nav ul li a {
padding: 0.2em 1em;
color: #ffffff;
border-right: 1px solid #fff;
}

#main-nav ul li a:hover {
background-color: #369;
color: #fff;
}