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

Chapter Ten. CSS in Action: A Hybrid Lay... > Navigation Bar CSS: Final Pass

Navigation Bar CSS: Final Pass

In the final pass, we get everything we wanted:

/* Navigation bar components */
table#nav   {
     border-bottom: 1px solid #000;
     border-left: 1px solid #000;
     }
table#nav td   {
     font: 11px verdana, arial, sans-serif;
     text-align: center;
     border-right: 1px solid #000;
     border-top: 1px solid #000;
     }
table#nav td a    {
     font-weight: normal;
     text-decoration: none;
     display: block;
     margin: 0;
     padding: 0;
     }
#nav td a:link, #nav td a:visited {
     background: transparent url(/images/bgpat.gif) repeat;
     display: block;
     margin: 0;
     width: 100px;
     line-height: 25px;
     }
#nav td a:hover {
     color: #f60;
     background: white url(/images/nopat.gif) repeat;
     }
td#home a:link img, td#home a:visited img {
     color: #c30;
     background: transparent url(/images/bgpat.gif) repeat;
     width: 400px;
     height: 75px;
     }
td#home a:hover img {
     color: #f60;
     background: white url(/images/nopat.gif) repeat;
     width: 400px;
     height: 75px;
     }


					  


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


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