A Centered Navigation Bar

This navigation bar uses the same HTML coding as the 1st Navigation Bar. A few changes in the CSS styles are what make it centered instead of flush left.

The position property is what centers the navigation. In the ul style it is left: 50% and in the ul li style the relative position is right: 50%.

In the decorative items - we set our styles to have a border on the left of our buttons, but we don't want the first item to have it on the left of it, so by telling the first-child to have none, it deletes that first border.


<div id="navbar">
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="products.html"> Our Products</a></li>
<li><a href="news.html">In the News</a></li>
<li><a href="contact.html">Contact Us</a></li>

The CSS Styles

#navbar {font-size: 12px; clear: left; float: left;
width: 100%; overflow: hidden;
background-color: #333; }

#navbar ul {margin: 0; padding: 0; position: relative;
left: 50%; clear: left; float: left;

#navbar ul li {list-style-type: none; float: left;
margin: 0; padding: 0; position: relative; right: 50%;}

#navbar a:link, #navbar a:visited {display: block;
text-decoration: none; margin: 3px 0px;
padding:7px 30px; color: #eee;
background-color: #111;
/* decorative items */
border-left: 8px solid #777; font-weight: bold;
letter-spacing: 1px; text-transform: uppercase;
font-family: arial, helvetica; sans-serif;}

#navbar a:hover {background-color: #6bb; color: #000;
font-weight: bold; }

#navbar li:first-child a, #navbar li:first-child a:hover