HTML and CSS —

Horizontal List Navigation with Images

Just as you could swap images in the background with vertical lists, you can do the same thing with horizontal lists. I made a few modifications to the previous style sheet: I added the link and hover state background images. Then I bolded the font and set its color to white for both the link and hover states, to allow for good contrast as the image is swapped upon mouseover (see Example 10-14).

Example 10-14. List navigation using background images
body {font: bold 14px Georgia, Times, serif; color: black; }
ul#navlist {margin-left: 0; padding-left: 0; white-space: nowrap;}
#navlist li {display: inline; list-style-type: none;}
#navlist a { padding: 3px 10px; }
#navlist a:link, #navlist a:visited {color: white;  background-image: url(linkback.gif);
 text-decoration: none;}
#navlist a:hover {color: white; background-image: url(linkhover.gif); text-decoration: none;}

Figure 10-20 shows the elegant navigation scheme.

Figure 10-20. List-based horizontal navigation using image swapping.

QUANTUM LEAP: HOVER AND INTERNET EXPLORER

As you work with lists for navigation, especially horizontal lists, you'll find that there are dramatic inconsistencies in the way that Internet Explorer deals with styles compared to Mozilla, Firefox, Opera, and Safari. Sadly, Internet Explorer hasn't been updated in years, and version 6.0 for Windows is missing significant support for CSS. As a result, you have to come up with savvy styles to ensure that your work looks good in the widest range of browsers possible (as those depicted here do).

One major issue with IE is the fact that it supports the :hover selector only for the anchor element, whereas all other browsers support it for any element. If this support were available in IE, there'd be less muss and fuss when dealing with list-based navigationnot to mention a wide range of additional options available for styling lists dynamically without using JavaScript. For other dynamic list navigation, such as drop-down or fly-out navigation that does not work in IE, see Eric Meyer's CSS Edge, at http://www.meyerweb.com/eric/css/edge/.


Rich Links, Lists, and Navigation

It's important to point out that the techniques in this tutorial, particularly the way lists are being used in navigation, are a relatively new concept in web design. The mere fact that CSS lets you change the display of an element makes it very compelling to rely as little on imagery for effects as possible.

Learn all about CSS lists by visiting Listamatic, a tutorial and gallery of great CSS-based navigation, http://css.maxdesign.com.au/listamatic/.

If you're interested in a tool that will make some of these lists for you right online, check out List-O-Matic, http://www.accessify.com/tools-and-wizards/list-o-matic/list-o-matic.asp.


Next up, you'll be getting a bit more involved in the actual control of margins and padding, which is important for gaining a firm hand over your visual page elements. This will help segue you into the more complex aspects of CSS: laying out pages.