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

Exercise 8 Demo: Part D : Simple CSS Page Layout - Add CSS Styles & Navigation Using Links

The CSS Styles

#nav {height: 35px; padding-top: 5px; margin-bottom: 5px;}

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

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

#nav li {display: inline;}

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

/* I added a hover state with a background image */

#nav a:hover {background-color: #792d0b; background-image: url(images/limes.jpg); }

Main Content Section

This navigation bar uses a List to give each button shape. They become block elements. The CSS styles are what make it a bar instead of a list.

display: inline; tells the individual buttons to be one right after another in a line. Text-decoration: none; deletes the underline.

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>