Reskinning the Menu

Now that we’ve come this far, let’s throw out most of the styles and try a new approach. We’re getting rid of the majority of the styles already created and starting with a very basic set, as seen in Listing 5.4.

Listing 5.4. Starting Over
<style type="text/css">
/* menu styles */
td#sidelinks a {display: block;}
td#sidelinks h4 {padding: 1em 0 0;}
td#sidelinks a, td#sidelinks h4 {margin: 0;
   font: bold 100% Arial, Verdana, sans-serif;}
</style>

The styles we’ve left in place create a foundation on which to build. The links are made block-level; the h4 elements given some top padding but no other. Finally, both the links and h4 elements are given no margin and set to a consistent font weight, size, and family.

Where do we ...

Get Eric Meyer on CSS: Mastering the Language of Web Design now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.