Previous Section  < Day Day Up >  Next Section

Project 7. Opening the Doors to Attractive Tabs

Welcome evermore to gods and men is the self-helping man. For him all doors are flung wide: him all tongues greet, all honors crown, all eyes follow with desire.

?span class="docEmphBoldItalic">RALPH WALDO EMERSON

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 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.

    Previous Section  < Day Day Up >  Next Section