Web Applications Development » CSS

ID #1000

How to create CSS overlapping tabs?

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:

Overlapping CSS tabs

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:

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 :)

Tags: -

Related entries:

Last update: 2008-08-31 08:28
Author: Charles A. Landemaine
Revision: 1.2

Change language
 

Digg it! Print this record Send to a friend Show this as PDF file
Propose a translation for Propose a translation for
Please rate this entry:

Average rating: 3.48 out of 5 (143 Votes )

completely useless 1 2 3 4 5 most valuable

You cannot comment on this entry

Comment of Jesper Rĝnn-Jensen:
Good article. However, I think you should reduce the four images used down to 2 or possible just one containing all the states. Also, a unique ID called "current" might lead to problems for people wanting to use multiple tab panes on the same page. Maybe i should be changed to a class after all?
Added at: 2006-10-03 04:36

Comment of Charles A. Landemaine:
Yes, in this case, you're right.
Added at: 2006-10-03 07:36

Comment of Philippe Meunier:
Does not seem to work Ok in IE with doctype for xhtml Trasitional 1.0. With Firefox everything is OK, but in IE, the layout is bad.
Added at: 2006-10-04 09:06

Comment of Mario Vicent:
I like the look of the tabs, though they don't adjust properly when you resize the font size. Here's an overlapping tab example that does: http://www.dynamicdrive.com/style/csslibrary/item/overlapping-horizontal-tabs/
Added at: 2006-10-09 18:51

Comment of Darryl Davidson:
This is excellent, just what i was about looking for - to fix in IE with xhtml Trasitional we just need to add css for IE only... * html ul.obtabs span { padding-top: 5px; padding-bottom: 5px; } As the text increases, say to 16px, padding is reduced to 3px.. Thanks again Charles...
Added at: 2006-10-24 08:06

Comment of Tamás Herman:
It should be high time to forget the pixel unit, since the such designs are not magnifiable. You should always think about the ones with permanenty or temporary accessibility problems. With a little more work you can be http://www.w3.org/WAI/ complaint. Otherwise it's a good article.
Added at: 2007-04-06 06:22

Comment of HM:
Hi, first off all a greate article.But my problem is this.I just created a new class .obtabs li span:hover { text-decoration: none; background-image: url (Images/orangetabs.png); height: 20px; width:62px; padding-left:11px; font-family:Verdana; font-size:11px; color:White; } When I mouse over the tab it will be highlighted.But title of the tab moving to right side.Anybody have an idea to correct this matter.
Added at: 2008-06-03 06:07

Comment of YxXgbgxu:
Stdans back from the keyboard in amazement! Thanks!
Added at: 2011-05-22 21:33

Comment of tIVjUHkHn:
Wkaling in the presence of giants here. Cool thinking all around!
Added at: 2011-05-23 04:09

Comment of ABCHZlodaJS:
That's not just the best aneswr. It's the bestest answer!
Added at: 2011-05-23 05:32

Comment of zdPYeFNQCWXr:
MpOg1d vqlqgqrgfmwd
Added at: 2011-05-23 07:26

Comment of WSSjJyhmbchWm:
At last! Someone who understands! Tahnks for posting!
Added at: 2011-05-23 11:32

Comment of rduJigxjRxFddJLlP:
e1d5LM qislcjmrfjoq
Added at: 2011-05-24 05:28

Comment of BfhhiybEiFBJNmuW:
I5KQJ9 mhzutyoeomyi
Added at: 2011-05-24 06:07

Comment of oGzErafYK:
S2CnLf ohbzisouwogv
Added at: 2011-05-24 06:13

Comment of zInMiqIxcesxLphPFS:
jkRUUd , [url=http://jwwhzfureopc.com/]jwwhzfureopc[/url], [link=http://duyjdbvlgewb.com/]duyjdbvlgewb[/link], http://bahwmlinbeml.com/
Added at: 2011-05-24 10:37

Comment of aPWfZTHxAWW:
NZ8yWg , [url=http://egysvailiauv.com/]egysvailiauv[/url], [link=http://bgykksiomsmp.com/]bgykksiomsmp[/link], http://acovtacpmlcy.com/
Added at: 2011-05-24 12:34

Comment of TjuFyUsFAqnE:
dsazDN , [url=http://dhmbgatzfbdz.com/]dhmbgatzfbdz[/url], [link=http://uaalmsrpzbkm.com/]uaalmsrpzbkm[/link], http://rugvfuluvmsj.com/
Added at: 2011-05-24 12:36

Comment of OpBrYBwXEnYDjoGVW:
YR0ekt , [url=http://gcvhrcimnrdw.com/]gcvhrcimnrdw[/url], [link=http://oeowfhhclxdw.com/]oeowfhhclxdw[/link], http://dorpoquhlfes.com/
Added at: 2011-05-24 12:39

Comment of GfXpPOhU:
xeNP1u wwwwrvmzjcqv
Added at: 2011-05-27 12:14

Comment of vqdRAMHpNzmQTh:
JBXh3H sgbvfzjhahbt
Added at: 2011-05-28 04:49

Comment of nKUqgFzNe:
7g9rpk babsihuszgne
Added at: 2011-05-28 04:55

Comment of JQMFhgeMZtrGRxQ:
Gr1D8m , [url=http://muvezgortbmh.com/]muvezgortbmh[/url], [link=http://gfxhlbldvdef.com/]gfxhlbldvdef[/link], http://rcogbprectdu.com/
Added at: 2011-05-31 05:38

Comment of aTFkSWSOSJNDq:
ETXhgK , [url=http://gdreggphlhxd.com/]gdreggphlhxd[/url], [link=http://fayhhzwujabj.com/]fayhhzwujabj[/link], http://yoqapewamgpz.com/
Added at: 2011-05-31 07:34

Comment of oHeiHVcqbAExfIZvl:
RhXEI6 , [url=http://vrhhskwiqbeb.com/]vrhhskwiqbeb[/url], [link=http://wgdxhiqkotqu.com/]wgdxhiqkotqu[/link], http://zxqpbbbhcppl.com/
Added at: 2011-05-31 07:53

Comment of JwgbPSdLSvx:
I used a binder to keep a lot of inoarmotifn in at my old job. I put the pages in page protectors because I was getting tired of the dog-earred corners on the papers. I had the same problem, I couldn't find the sections that I needed. I went to the office supply store and bought some sticky colored tabs (the kind you slide a little piece of paper into with the title) and stuck them on the page protectors. They weren't expensive, but I love that you found a much cheaper alternative!
Added at: 2012-10-26 10:18

Comment of dcpgLLdjYw:
I used a binder to keep a lot of itoormanifn in at my old job. I put the pages in page protectors because I was getting tired of the dog-earred corners on the papers. I had the same problem, I couldn't find the sections that I needed. I went to the office supply store and bought some sticky colored tabs (the kind you slide a little piece of paper into with the title) and stuck them on the page protectors. They weren't expensive, but I love that you found a much cheaper alternative!
Added at: 2012-10-26 15:19

Comment of TRtwxzmMMwYTTjy:
khJ3hY jlmqdlpaqhpf
Added at: 2012-10-27 02:24

Comment of RPMtrqPgZsLiiF:
SGcZyW , [url=http://psaoynriejtg.com/]psaoynriejtg[/url], [link=http://bbjpssxsccyg.com/]bbjpssxsccyg[/link], http://gtcqwglznxab.com/
Added at: 2012-10-28 11:14

Comment of iQrflgJVOnFhTrKu:
C7A9Ba , [url=http://zuczltlajqcw.com/]zuczltlajqcw[/url], [link=http://ueabrdgdjlrq.com/]ueabrdgdjlrq[/link], http://hmzvsqclvujm.com/
Added at: 2012-10-28 11:35

Comment of NhnYDXtMHOakmSB:
UewByb gfqdyimghdaq
Added at: 2012-10-28 17:45

Comment of xsfCrPAn:
v8tYrt gazwatvnmiol
Added at: 2012-10-28 18:03

Comment of Dream Body Herbal Slimming Capsules:
Hunger is the explanation people often lose the battle in a diet. lots of you eat, The more your stomach stretches and therefore you hold more and more food causing you to gain more weight. Also the bigger you get the more your metabolism slows down causing you to gain even more weight. This pill helps curb your appetite and speeds up your metabolism which in turn burns more fat and carbs causing you to manage your weight. With a proper diet and medicines the payout is weight loss podedsja. Dream Body Herbal Slimming Capsules http://www.2daydietbase.com/dream-body-slimming-capsule-p-32.html
Added at: 2012-11-09 18:15