Need Navbar Content to Center

HTML & CSS
1

I’ve probably got some unnecessary floats in this thing. On a previous site I wanted the content to be right justified. On this one I’d just like it centered. I’ve looked at the CSS on a centered one but just can’t seem to get this one to do it. Any assistance is much appreciated.

You can see the page at:
http://andersonwindshield.com/templates/

Style Sheet is at:
http://andersonwindshield.com/main.css

The div is named “navbar”

All the CSS is:


/* NAVBAR */
#navbar {float:right; width:100%;
	height: 28px;
	padding-right:15px;
	border-top:2px solid #007A7A;
	background:url(/navbar/images/navbar.gif) repeat-x bottom left}

#navbar ul {margin:0;
	padding:0;
	font-weight:bold;
	float:right;}

#navbar ul li {float:left;
	position:relative;
	line-height:28px;
	list-style-type:none;
	margin:0;
	border-right:1px solid #FFF;}

#navbar ul li a {display:block;
	padding:0 6px;
	text-decoration:none;
	color:#FFF;}

#navbar a:hover {text-decoration: underline;}

#navbar ul li:first-child {border-left: 1px solid #FFF;}

#navbar ul li a.current {background-color:#FFF; color:#000;}

#navbar ul li ul {margin:0;
	position:absolute;
	width:10em;
	display:none;
	background-color:#009999;}

#navbar ul li:hover ul {display:block;}

div#navbar ul li ul li{width:100%;
	border-bottom:1px solid #FFF;
	font-size:.9em;}

div#navbar ul li ul li:first-child{border-left:none;}
2

Hey Eric, Nice “Tut”! :slight_smile:

I remember looking through it before but I never payed attention to your #4 Inline-Block example.

I see that you are shrinkwrapping the entire UL and then centering it within an extra div. That allows you to kill all whitespace nodes with the floated “a”.

Here is another little trick that kills the nodes.

By setting font-size:0 on the UL it kills the nodes between the LIs’, then the font-size gets reset on the “a”.

As always there are pros and cons to any method. The “a” font-size can’t be set in ems’ on my example since it no longer has a font-size to reference from the parent UL.

It’s nice to have different options though. :wink:

3

Have a look through these. You should be able to handle it from there. http://www.visibilityinherit.com/code/center-nav.php