• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

Chapter 10. Link Effects, Lists, and Nav... > Vertical List Navigation with Image ...

Vertical List Navigation with Image Effects

By tapping into background graphics and the :hover selector, you can create a navigation list that will have an attractive background for each list item. Add a contrasting background graphic to the hover state for impressive results (see Example 10-12).

Example 10-12. Using background images to create sophisticated navigation effects

body {font: bold 15px Georgia, Times, serif; color: black;}
a {color: white; text-decoration: none; display: block;}
a:link {color: white;}
a:visited {color: yellow;}
a:hover {color: white; background-image: url(linkhover.gif);}
a:active {color: red;}
#nav, #nav a, #nav li {width: 100px; margin: 0; padding: 0; list-style-type: 
none;}
li {background-image: url(linkback.gif); border-bottom: 3px solid white;}

					  


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint