More Eric Meyer

on CSS

Voices That Matter™

Opening the Doors to Attractive Tabs

Project 7

preview image 1 preview image 2 preview image 3
Project files
Project 7 ZIP file Project 7 Gzip file Project 7 StuffIt file

WITH THE TREND TOWARD using lists to represent "menus" (collections of links), there has been a good deal of interest in setting up not only link sidebars, but also horizontal rows of links. A good example of such links would be the ones across the top of Amazon.com or the Apple web site. In fact, such collections often are made to look like small tabs, although this isn't always the case.

For some time, translating an unordered list into a row of tabs meant that they were, well, kind of boxy. Not to mention a bit boring. This was the case because the tabs were usually created by setting borders on the list items or the links themselves. That's good for a basic design, but if you want a professional look, the result is rather lacking.

So, in late 2003, Douglas Bowman, perhaps best known for his table-free redesign of Wired News, pioneered a new approach that allowed authors to create tabs just about as visually stunning as their imaginations would allow. He first described this technique in the article "Sliding Doors of CSS" and followed it up with another article that dug more deeply into the technique. In this project, we'll be exploring some variants on Doug's original idea, but the core idea is all his.

Errata

There are no known errata for this project.