This page demonstrates a pure CSS method to generate a 'Tab' style interface (see here for more). It first uses the trick of an inline list to generate the tabs. To get the tabs to really look the part - the 'active' tab needs to blend into the 'content' area. This is achieved by giving the active tab a different class, and changing its properties (border-bottom and background) accordingly. Additionally, it allows one to change the active tab's :hover by not highlighting the active tab in the same way as the inactive tabs.

Because the purpose of the tab interface is to 'guide' the user as to their present location, these small features do actually improve the 'usability' of the tab structure. Try clicking on each tab to see it in action...

The code is very simple, the CSS is embedded to let you see 'under the hood'. Most of the action occurs in the list styling. If the tabs don't 'align' properly to the top of the box, alter the font-size and line-height of the li element to suit. Changing font will require finding the 'sweet' spot at which different browsers render identically.

Note that for IE5/5.5 you probably need to add hacks to the CSS to overcome their bugs, I would have done it but I'm tired of box-model hacks...

I have also made a second version, but with the tabs part of an overlying banner, and fixed so that the tabs always stay visible. Find it here...

Valid XHTML V1.0 strict and CSS V2.0 | Go back to CSS page | Go home (including an email link) | This page is CopyLeft, you are free to use the code!