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

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

A Navigation List
on the Side

This could be sub-navigation or delete the horizontal navigation and use this area for the main navigation instead.

Main Content Section

You can use this style of NAVIGATION as your main navigation or use it for additional navigation if you need it.

The HTML Code:

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

The CSS Styles:

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

#sidenav {width: 200px; text-align: left; float: left;}

#sidenav ul {list-style: none;
margin-left: 10px;
margin-bottom: 15px;
font-family: Comic Sans MS, sans-serif;
letter-spacing: 1px;}

#sidenav li {width: 180px;
margin-bottom: 5px; /* the margin adds space between each button */
border: 2px solid #792d0b;
background-color: #cfa865;}

#sidenav li a {display: block;
padding: 10px 0 10px 30px;
text-decoration: none; /* deletes the underline */
font-weight: bold;
color: #792d0b;}

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

#sidenav li a:hover {background-color: #792d0b; color: #ffffff;
background-image: url(images/coffee.jpg); }