Making Lists Using XHTML

For something a little different than your average, boxy CSS border, with a few slight modifications we can add fun shapes to the mix to create some interesting navigational effects.

We can use the same unordered list, building on similar CSS from the previous mini-tab example:

#minitabs {
 margin: 0;
 padding: 0 0 20px 10px;
 border-bottom: 1px solid #9FB1BC;
 }

#minitabs li {
 margin: 0;
 padding: 0;
 display: inline;
 list-style-type: none;
 }

#minitabs a {
 float: left;
 line-height: 14px;
 font-weight: bold;
 padding: 0 12px 6px 12px;
 text-decoration: none;
 color: #708491;
 }

#minitabs a.active, #minitabs a:hover {
color: #000;
background: url(tab_pyra.gif) no-repeat bottom center;
}

This CSS will probably look similar to the previous example. The main difference here is the absence of a border-bottom that created the 4-pixel-tall tab and the addition of a single background-image set to sit bottom center for all hover and selected states (see Figure 1-8).

Figure 1-8. A mini-tab navigation bar with shaped background images

The trick here is to choose an image that is narrow enough to fit under your smallest navigation item. This ensures you’ll only need one single image to use for highlighting all of your navigational links, regardless of varying character widths. There are, of course, unlimited possibilities in regards to the shapes you could use on your own projects (see Figure 1-9).

Figure 1-9. A few other various shape possibilities

For source code and working examples of these mini-tabs, see www.simplebits.com/tips/. And for more creative ways to style lists, check out Mark Newhouse’s “Taming Lists article” at A List Apart magazine (www.alistapart.com/stories/taminglists/).