Example 10-13. Markup and CSS for a horizontal list navigation using color effects
<!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#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-color: orange; text-decoration: none;} #navlist a:hover {color: orange; background-color: yellow; text-decoration: none;} </style> </head> <body> <div id="navcontainer"> <ul id="navlist"> <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> </div> </body> </html>
This results in a very nice horizontal navigation bar (see Figure 10-19).
Figure 10-19. Using a list and color effects to achieve horizontal list-based navigation.
by
updated