Tuesday, January 8, 2008

Great technique for graphical tabs

Struturo creates tabs as a list of links in an unordered list. Then you use is the CSS theme document to style those tabs. So there are a lot of options about how the tabs will look.

But what if you want to use graphical tabs as opposed to text tabs?

Well, a high performance way of doing it is to create one tall graphic as opposed to multiple smaller graphics. With one tall graphic you can display the tab itself and its hover state simply by changing the background position. This saves the HTML from multiple grabs to the server per image.

Also you can account for a user who does not have CSS enabled by simply showing the standard link text.

There is a technique for putting padding enough to shove the link text outside the visible area and replace it with the graphic. This is also a nice technique to maintain accessibility. You can search for text replacement on the web to find the technique so I won't go into it here.

Here is the original HTML:

Here is the CSS two support the graphics and the hover state.

ul#tabs { margin:0; padding:0; list-style:none; float:left; position:absolute; top:97px; }

ul#tabs li { margin:0; padding:0; float:left; height:21px; }

ul#tabs li a { margin:0; padding:21px 0 0 0; overflow:hidden; display:block; height: 0px !important; /* for most browsers */ height /**/:21px; /* for IE5.5's bad box model */ background-image:url(../Files/bg_tabstack_160x210.gif/$file/bg_tabstack_160x210.gif); }

ul#tabs li#idtab-training a { width:97px; background-position:0 0; }

ul#tabs li#idtab-training a:hover { background-position:0 -21px; }

ul#tabs li#idtab-techservices a { margin-left:-1px; width:158px; background-position:0 -42px; }

ul#tabs li#idtab-techservices a:hover { background-position:0 -63px; }

ul#tabs li#idtab-assetmgmt a { margin-left:-1px; width:160px; background-position:0 -84px; }

ul#tabs li#idtab-assetmgmt a:hover { background-position:0 -105px; }

ul#tabs li#idtab-solutions a { margin-left:-1px; width:101px; background-position:0 -126px; }

ul#tabs li#idtab-solutions a:hover { background-position:0 -147px; }

ul#tabs li#idtab-consulting a { margin-left:-1px; width:107px; background-position:0 -168px; }

ul#tabs li#idtab-consulting a:hover { background-position:0 -189px; }