CSS Based Horizontal Tabs

Posted in Tutorials

Tweet This Share on Facebook Bookmark on Delicious Digg this Submit to Reddit

In this tutorial, we are going to create CSS-based horizontal tabs as shown here.

horizontal CSS tabs

horizontal CSS tabs

View live code here.

Graphics Used

The graphics looks like this …

Default gradient tab: default_tab.jpg

 

Highlighted tab…

 

But instead of using two different graphic files for the two tabs, we combine the default tab and highlighted tab into one graphic as shown.

Combined tab: tabs.jpg

Because the two tab images are on one file, they will load with the single file. This will improve performance due to one less server call to get another graphics file. And it will avoid any “flicker” that may occur if we had to wait for the browser to load a separate image for the hover state.

Page Structure

First, we will start out with a page structure on to which we will place our tabs to be sitting right on top of the gold nav strip.

page structure for horizontal tabs

page structure for horizontal tabs

The code for this page looks like …

code for page structure of CSS tabs

code for page structure of CSS tabs

Note that for the sake of simplicity, this tutorial had placed the CSS on the same page embedded in the head section. However, for production code, you should put the CSS in a separate CSS file. Also images will be referenced in the same directory. Again, for production code, they would normally be in a separate directory.

Coding the CSS Based Horizontal Tabs

1. Start by letting the tabs be links in an unordered list…

And we get this …

2. Because different browsers may have different default margins and paddings for ul‘s and li‘s, we set them all to zero first and then we can adjust them later. We give the ul element an id of tabnav and create a CSS rule to select this ul and li’s that it contains.

code for css tabs

3.  In the CSS, we remove the bullets that normally appears in the unordered list.  And we remove the underlines that normally occurs in the links for li’s.

code for CSS horizontal tabs

4. The main characteristic about horizontal css tabs is that they actually be horizontal.  We make the list items horizontal by floating the li’s.  When we float the li’s, we need to give it a width.  We set the li’s to 88px by 23px since that is the size of our graphic image for one tab.

Now the list items are horizontal …

horizontal list items to be tabs

5. We set the display of the link to be block so that the link will expand to fill the entire width of the li, making the entire tab clickable and not just the text clickable.  This is done with the following CSS …

display:block;

6.  We set the background image of link to be the tab graphic.  We center align the text.  Finally, we stylize the link with a color and font size that is suitable to match the tab graphics…

stylize horizontal CSS tabs

And we get…

horizontal CSS tabs

7. Notice that the tabs are much shorter than we would like.  In fact, the tab height is only taking up as much height as needed by the text instead of the full 23px height of the tab graphic.  Therefore, we remove the “height” attribute from the “li” to the “a” selector rule.

And we get …

 

8.  The text is sitting a little bit too high in relation to the tab graphics, so we add 3px top padding to the link.  But when we add padding to the link, remember to decrease the height by the same amount since “height” in CSS is defined as “content height” and does not include any padding.

9. To create the hover effect where the highlighted tab is displayed when the mouse cursor is over the tab, we add a new CSS rule using the hover pseudo-class where we shift the background image to the left by 88px.  Recall that the highlighted tab image is on the right-half of the graphics file and that each tab image is 88px in width.

shift bg image of horizontal CSS tabs

We also altered the link color upon hover to better constrast with the highlighted tab.

And here is what it looks like if you hover over the home tab…

10.  If we want the home tab to stay highlighted because this is the “home” page, then we have to add a class to the “home” link to make it different from the rest of the links.  We’ll give it the arbitrary class called “selected” and add the CSS selector rule as shown…

horizontal CSS selected tab

11.  We want the tabs to be sitting on the gold nav strip, not floating near the top of the page masthead.  No problem.  With some graphical measurements, we determined that all we need to do is to move the whole tab structure 71px lower.  We do so by giving a top margin to the ul element, since the ul element is what contains all the tabs.

And now it looks like …

12.  Let’s space the horizontal tabs apart by adding 10px right margin to the li element.

And we got our final product that looks like …

horizontal CSS tabs

horizontal CSS tabs

And there you have it.