Horizontal List Navigation with ImagesJust 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);
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/. |
text-decoration: none;}
#navlist a:hover {color: white; background-image: url(linkhover.gif); text-decoration: none;}
