HTML and CSS

List-Based Vertical Navigation Using Color

Things begin to get really exciting when you combine links and lists for navigation. You'll begin here by first styling a simple list and getting rid of the bullets using the list-style-type property with a value of none. This removes the markers completely, leaving a list of links (see Example 10-10).

Example 10-10. Styling a list of links
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
           "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>working with style</title>
<style type="text/css">
body {font: 14px Georgia, Times, serif; color: black;}
ul {list-style-type: none;}
a {color: orange; text-decoration: none;}
a:link {color: orange;}
a:visited {color: yellow;}
a:hover {color: fuchsia; text-decoration: underline;}  /* font-style: italic; font-weight:
 bold; background-color: aqua; */
a:active {color: red;}
</style>
</head>
<body>
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="products.html">Products</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</body>
</html>

Figure 10-16 shows the list of styled links with no markers.

Figure 10-16. Simple list-based vertical navigation with styled links.

Okay, so that's not so fancy. Hang on! It gets better. By using a range of styles, including border effects and padding (see tutorial 11, "Margins, Borders, and Padding"), you can add a lot to this simple navigation bar. You can also add background colors and images to make the list more visually interesting (see Example 10-11).

Example 10-11. Adding styles to the list
body {font: 14px Georgia, Times, serif; color: black;}
ul {list-style-type: none; padding: 0; width: 100px; background-image: url(swirls.gif);
 border: 2px solid orange;}
li {padding-left: 5px; padding-bottom: 5px; border-bottom: 1px solid orange;}
a {color: orange; text-decoration: none;}
a:link {color: orange;}
a:visited {color: yellow;}
a:hover {color: fuchsia;}
a:active {color: red;}

Okay, that's definitely getting a little more interesting (see Figure 10-17).

Figure 10-17. Looks like a navigation bar now.

NOTE

As you try out different styles with your navigation, you will find differences in the way browsers manage styling lists. Mozilla and Mozilla Firefox, for example, interpret padding and widths carefully, while IE tends to be more forgiving.