<< .. Go to : : Home : : Exercise 8 : : Demo 8A : : Demo 8B : : Demo 8C : : Demo 8D : : Demo 8E : : Demo 8F : : All Class Demos .. >>

Exercise 8 Demo: Part E : Simple CSS Page Layout - Add CSS Styles

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;}

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

<div id="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>
</div>