raw CSS examples

• Tab 1
• Tab example 2
• Tab 3
• Tab 4
• Tab 5

The above demo should work in IE6+, Firefox2+ and all other modern browsers.

The html isn't too complicated but we do need to nest a span in the middle as hooks for our extra images. I know this isn't very semantic but each tab needs to hold 2 images. One for the left side of the tab and one for the right side of the tab. We also need rollover states for the tab which means two more images. However we are going to include all images in one single sprite to save any extra server handshakes and to provide no delay in the rollover.

The reason that we don't use a fixed sized image is so that the layout can expand and therefore we use an oversized image that can soak up any text zoom via the browsers controls.

Here is the simple html:

And here is the image we will be using :

As you can see it is simply one large tab stacked on top off another. The image is still a pretty small file size although I have used a good quality png due to the transparency needed in the corners but you can still make a passable image using a gif instead and indeed IE6 gets a gif image as it doesn't understand png transparency (unless you are prepared to hack it with the alpha image loader).

The basics are straight forward but instead of float we are going to use display:inline-block so that the tabs can be centred if need be. This also ensures that they can wrap and still be centred if the page isn't wide enough, We apply display: inline-block to the list, the anchors and the span although in truth we could just apply it to the list element and set the spans and anchor to display:block but I find setting all three more stable as is the easiest and most reliable method to achieve our aims. The parent ul has overflow:hidden which is there in case you want to use floats instead of inline-block for older browser support although I have added a fix for Firefox 2 and equivalent and also catered for IE6 and IE7 so there is no real need to go back any further. Read the full details here for how here on how inline-block can be made to work in IE6 and 7 properly.

Note that inline-block does cause the white space between elements to be taken note of just like the space bewteen words but as we are overlapping our tabs anyway this should not be an issue but there may be slight variations in spacing between browsers. There is a fix for the whitespace bug but we won't bother to implement it here.

For the current tab I will be using a strong element as I dislike having the current tab as an anchor because it makes you feel stupid when you click it and re-load the same page. The current menu item should not be a link. All wee need do is duplicate the rules for the anchor and apply them to the strong element so there is not really much extra work involved.

The anchor holds the left side of our image and we apply some padding to the left side so that we don't place the image in the nested span on top and rub the corner out by mistake. Then we add the same image sprite to the span but use a background-position to manipulate which part of the image will show - we want the right side to show so we use background-position:100% 0. Also note that as the tabs are transparent in the corners we need to pull the span out to the side with a negative margin otherwise you would see the image that is on the anchor showing through the transparent portion of the tab.

The code for this is again quite simple but we do need some fixes for our old friend IE6. Whenever you use a negative margin and pull an element outside its parent IE6 will need position:relative added or the portion that has been dragged outside will not show.

When a tab is hovered we just need to change the vertical position of the background image in the anchor and the span. The image is 102px high so we use a negative top position of 102px to reveal the different coloured tab below i.e. for the anchor we use background-position:0 -102px and for the span we use background-position:100% -102px. You will of course need to adjust these if your image dimensions are different to mine.

The last step is a clever use of z-index in that we raise the z-index of our hovered tab and it pops in front of the other tabs very nicely. A simple rule for a nice effect.

Here is the full cs's used and as you can see it is quite compact.

To grab the actual css you can find the css file here.

That's all there is to it but please browse the individual html files to see how the currently selected tab is coded.

^ Back to Top ^