Web Design in a Nutshell, 3rd Edition

More List and Tabbed Navigation Tutorials

The example in this section is only the most elementary introduction to how CSS can be used to create tabbed navigation from semantically logical list markup. For more sophisticated techniques and in-depth tutorials , these are just a few of the numerous resources online.

“Sliding Doors of CSS (Parts I and II),” by Douglas Bowman (http://www.alistapart.com/articles/slidingdoors and http://www.alistapart.com/articles/slidingdoors2)

A problem with the floated list example above is that if a user resizes the text, it will bust out of the tab graphic. In this article, Doug Bowman introduces his ingenious technique for graphical tabs that resize larger with the text.

“Accessible Image-Tab Rollovers,” by David Shea (http://www.simplebits.com/notebook/2003/09/30/accessible_imagetab_rollovers.html)

This tutorial combines list-based tabbed navigation with image-replacement techniques.

“CSS Design: Taming Lists” by Mark Newhouse (http://www.alistapart.com/stories/taminglists)

This article demonstrates a number of CSS tricks for controlling the presentation of lists, including various inline list item applications.