Applook Logo Applook.com

Dynamic Tabs

Dynamic Tabs with CSS

Tab controls can be found in many successful web sites of the moment, most of these implementations will be image map based and whilst being adequate for the job might not be the most efficient or elegant solution.

One of the main drawbacks of implementing tab controls this way is that they cannot be changed dynamically, a new image has to be produced whenever a new tab is required.

By using Cascading Style Sheet selectors we can define a reusable set of tab control classes which will allow us to create tab controls dynamically, totally eliminating the need to create new images for each tab required.

In fact we only need 2 images for our tab control, the first image will represent a selected tab and the second will be our non-selected tab.

Here are the images we will use:

tabselected.gif

tab.gif

We are going to make use of the 'background-image' property to achieve the tab effect and dynamically display our tab text label onto it.

In order to make these classes as reusable as possible it is better to create an external CSS file, let's call it tabcontrol.css.

The first class we are going to create will be used as a container for our individual tabs, it is defined as follows:

.tabcontainer
{
position:absolute;
top:20px;
left:10px;
}

This container class gives us the freedom to place the tab control anywhere we like on the page by altering the top and left properties.

Note: If you do not require absolute positioning you do not have to use the container class.

The second class we require will be the normal state or non-selected tab class, it is defined as follows:

.tab
{
width:88px;
background-image : url(tab.gif);
background-repeat : no-repeat;
text-align:center;
margin-left:1px;
float:left;
border-bottom:1px solid silver;
font-family : verdana,arial,sans-serif ;
font-size:.8em;
}

The key property to notice in this class is float , this will float each of our tabs to the left in our container class making tab alignment a breeze.

Also note the use of border-bottom, this property will create a thin underline effect which will serve as a separator between our tab control and the main content area.

The final class we need to create is the tab selected class as shown below:

.tabselected
{
width:88px;
background-image : url(tabselected.gif);
background-repeat : no-repeat;
text-align:center;
margin-left:1px;
float:left;
border-bottom:none;
font-family : verdana,arial,sans-serif ;
font-size:.8em;
}

This class should look very similar to the previous ‘tab’ class, the difference being the use of a second image for the background and no border-bottom defined.

And that's about it as far as CSS is concerned, the next task is to make use of these classes in our HTML.

In order to use our classes we need to link our page to the CSS file we have just created.

We can do this in a couple of ways, namely either using the link tag or the @import directive.

In this tutorial we are going to use the link tag.

Add the following code within the <HEAD> tag of your web page:

<link href="tabcontrol.css" type="text/css" rel="stylesheet">

And finally within your <BODY> tag, add the following code:

<div class="tabcontainer">
<span class="tab"><A HREF="#">Tab 1</A></span>
<span class="tabselected"><A HREF="#">Tab 2</A></span>
<span class="tab"><A HREF="#">Tab 3</A></span>
</div>

When viewed in a CSS1 compliant browser, you should see the tab control below:

Tab 1 Tab 2 Tab 3



With these new classes, you can add as many tabs as you like and change the selected state of each tab by changing the respective class name - it couldn't be much easier than that!


Download tabcontrol.css




© Copyright 1999 - 2005 Applook.com All rights reserved