Banner Area

The CSS Styles

ul, li {padding: 0; margin: 0;}

nav {height: 35px; margin-bottom: 5px; background-color: #394484; text-align: center;}

nav ul {list-style:none; padding: 10px 0;
background-color: #394484;}

nav li {display: inline;}

nav a {color: #ffffff;
padding: 10px 25px;
text-decoration: none;
/* decorative items added */
text-transform: uppercase;
border-right: 2px solid white;
border-left: 2px solid white;}

nav a:hover {background-color: #a3b0f8;
color: #000; }

nav li:first-child a, nav li:first-child a:hover
{border-left:none;}
nav li:last-child a, nav li:last-child a:hover {border-right:none;}

Main Content Section

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.

text-align:center; in the #nav is what centers the navigation.

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.

The HTML

<nav>
<ul>
<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>
</ul>
</nav>