OSResources - Unix, Linux and BSD Guides

Sometimes simulating a real desktop interface for your web application can be a real challenge, especially when dealing with tabs. Side-to-side tabs are not easy to create in CSS, but overlapping tabs are even harder. I had to create overlapping CSS tabs for the Interaction Ajax chat application and I thought I would share this HOW-TO with you to save you hours :)

This tutorial will show you how you can create overlapping tabs like those:

For those of you who have no time to waste, feel free to download the example in the open 7-Zip format.

And here's how it works: First, let's create a list of links. We will add a few modifications to this unordered list:

• Assign a class called obtabs (for "oblique tabs") to it;
• Assign a class to the first list item called "first";
• Assign a unique ID to the tab that we want selected;
• Add 2 more tags inside each list item: span and a to stick our background images:

<ul class="obtabs">
<li class="first"><span><a href="#">Jack</a></span></li>
<li><span><a class="new" href="#">John</a></span></li>
<li id="current"><span><a href="#">David</a></span></li>
<li><span><a href="#">Paul</a></span></li>
</ul>

You will need to create 4 images:

• The upper-left round corner for inactive tabs
• The upper-left round corner for the active tab
• The upper-right round corner for inactive tabs
• The upper-right round corner for the active tab

Now, let's start formating our page. We will first define some generic rules:

body {
background: #fff;
color: #000;
padding: 1em;
margin: 0;
font: 12px Arial, 'Nimbus Sans L', sans-serif;
}

Now, let's format the list:

ul.obtabs {
list-style: none;
margin: 1px 0 -1px 0;
padding: 0;
position: absolute;
}
ul.obtabs li {
float: left;
display: block;
height: 24px;
padding-right: 12px;
margin-left: -5px;
position: relative;
background: url(images/tabright-back.gif) 100% 0 no-repeat;
border-bottom: 1px solid #bbb8a9;
white-space: nowrap;
}
ul.obtabs span {
height: 24px;
line-height: 24px;
padding-left: 7px;
background: url(images/tableft-back.gif) no-repeat;
}
html>body ul.obtabs span {
display: block;
}
ul.obtabs li#current {
z-index: 1;
font-weight: bolder;
border-bottom: 1px solid #fff;
height: 25px;
background-image: url(images/tabright.gif);
}
ul.obtabs li#current span {
background-image: url(images/tableft.gif);
}
ul.obtabs a {
color: #00c;
}
ul.obtabs a.new {
color: #c00;
}

As you see, the active tab has a z-index value of 1 and overlaps all adjacent tabs. At this point you have a working row of overlapping tabs in CSS. To use these tabs in your web application, you only have to use Javascript to toggle one tab "on" and the others "off", assigning id="current" to the tab you want brought forward.

Additionally you can use the class new if you need more formating. This class can be used when you have a tab selected, and the system wants to call your attention that there is some new content or an event occured under a background tab. This background tab changes color, and you can see what is new.

Final example can be found here :)