Web Applications Development » CSS
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:
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 :)
Last update: 2006-09-02 18:48
Author: Charles A. Landemaine
Revision: 1.1
Print this record
Send to a friend
Digg it!
You can comment on this entry
Comment of Jesper Rønn-Jensen (2006-10-03 06:36:15):
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?
Comment of Charles A. Landemaine (2006-10-03 09:36:22):
Yes, in this case, you're right.
Comment of Philippe Meunier (2006-10-04 11:06:15):
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.
Comment of Mario Vicent (2006-10-09 20:51:57):
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/
Comment of Darryl Davidson (2006-10-24 10:06:20):
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...
Comment of Tamás Herman (2007-04-06 08:22:04):
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.
Comment of HM (2008-06-03 08:07:02):
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.
Comment of obolg (2008-06-16 07:17:19):
wow gold cheap wow goldworld of warcraft gold to our loyal reliable customers.
Comment of dsaf (2008-06-26 03:37:44):
wow gold site: wow gold wow gold
Comment of wow gold (2008-06-29 03:45:50):
We supply [url=http://www.wowgold1000.com]WoW Gold[/url] for wow players, you can [url=http://www.wowgold1000.com]Buy Wow Gold[/url],[url=http://www.wowgold800.com]wow power leveling[/url],and [url=http://www.wowgold1000.com]world of warcraft gold[/url] server here, [url=http://www.wowgold1000.com]Cheap WoW Gold[/url] always waiting for you!
Comment of wow gold (2008-06-29 03:48:57):
We supply WoW Gold for wow players, you can Buy Wow Gold,wow power leveling,and world of warcraft gold server here, Cheap WoW Gold always waiting for you!
Comment of fx (2008-06-29 07:33:41):
FX
FX
FX
FX
投資 初心者
イントラレーシック
美容整形
クレジットカード
ゴールドカード
カードローン
株式売却益課税
Comment of cheap wow gold (2008-06-30 11:42:15):
wowgold.pigecn.com has huge quantity of wow gold and very cheap wow gold for sale!Cheap wow gold are sell at all servers!buy Cheap wow gold,also called world of warcraft gold or wow gold,is on sale at our online store. We offer a range of services for your World of Warcraft character. We are selling World of Warcraft Gold and doing power leveling for you at an unimaginable price. Cheap wow gold is on hot sale on all servers, especially on American servers. You can buy cheap wow gold and power leveling from us, a professional, loyal and reliable wow gold exchange corporation and power leveling work group. Buy cheap wow gold here, and then enjoy your excited wow life!
Comment of chinaAMY (2008-07-08 08:05:25):
[url=http://www.nike-dealers.com]www.nike-dealers.com[/url] Wholesale Cheap Nike Sneakers,[url=http://www.nike-dealers.com/nike-air-jordan-c-7.html][b]Jordan sneakers[/b][/url],Nike Dunk,Air Force 1s,Nike Shox,Nike Air Max,Adidas shoes,Prada Shoes,Gucci Shoes,Bape Star,Timberland. Welcome wholesale! Buy more, the more discounts!
Comment of me (2008-07-10 13:00:33):
Just go to Free PSP Games
Comment of ccc (2008-07-10 22:39:40):
world of warcraft power leveling wow power leveling power leveling runescape gold rs2 gold wow gold 中国福利彩票 直流电源 电磁阀 福彩3d 枕式包装机 纸巾机 汽车水箱 汽车散热器 汽车暖风 oil painting
吹膜机 汽车减震器 shock absorber 环保空调 金属探测门 runescape money rs2 money dofus kamas thermoforming Equipment 印刷机械 bag making machine 工业设计 锻件 液压机 涂布机 分切机 粉末冶金 plastic machine packing machine
power leveling wow power leveling 香炉 Thermoforming Machine 包装机械 液压机 活塞 激光礼品 鞋业 环保空调 吹膜机 汽摩塑料配件 塑料酒瓶包装 塑料件喷漆 google排名
tungsten carbide tungsten plate tungsten electrode tungsten wire tungsten alloy tungsten rod tungsten product molybdenum sheet molybdenum product molybdenum wire molybdenum rod thermoforming machine thermoforming Equipment Plastic Machinery Plastic Thermoforming Machine Plastic Thermoforming Machinery Plastic Sheet Unit,Plastic Extruding Machine Plastic Machine prada shoes true religion jeans evisu jeans Ed hardy Gucci shoes Gucci Handbag adidas shoes Ugg Boots nike shoes LV handbags Jordan shoes new era caps
包装带设备 模切机 压痕机 切纸机 压纹机 上光机,过油上光机,开槽机,V槽机,折盒机 开槽机 V槽机 折盒机 覆膜机 覆面机 气动马达 气动搅拌机制袋机 手套机 收卷机 吹膜机 连线机 粉碎机 脱水机 搅拌机 造粒机 团粒机 卷绕机 拉丝机 织带机 包覆丝机 圆织机 裁料机 冲口机 下料机 压合机 纸杯机 纸碗机 纸碟机 热成型机 片材机 制杯机 牵引机 压底机 挤出机 冲压机 包装机 贴窗机 涂胶机 信封机 捆扎机 打包机 切袋机 喷码机 刻字机 打标机 标示机 缠绕机 灌装机 封箱机 丝印机 封口机 裹包机 整理机 滚齿机 封面机 包边机 折入机 整平机 冷压机 镂铣机 贴角机 贴膜机 纸巾机 湿巾机 折叠机 充填机 抛光机 装盒机 调头机 折边机 修边机 上光机 压光机 压纹机 压花机 分切机 分条机 涂布机 覆面机 裱纸机 除粉机 糊盒机 打孔机 磨刀机 切割机 钻孔机 胶水机 圆角机 压平机 划线机 纠编机 插边机 淋膜机 切片机 开槽机,V槽机 底封机 上糊机 制袋机
Comment of wow gold (2008-07-15 23:50:41):
Unless you're wow gold and wow gold a Warlock or a Paladin, purchasing a mount at level 40 can be cheap wow gold and cheap wow gold a near impossible thing to buy wow gold and buy wow gold afford. Without world of warcraft gold and world of warcraft gold the honored faction discount, the cost cheapest wow gold,cheap world of warcraft gold is 100gp; 20gp to pay buy world of warcraft gold for the training fast wow gold and 80 to fast wow gold pay for the mount buy cheap wow gold itself. Even cheapest world of warcraft gold with the 10% discount, the wow gold for sale cost gold for wow of 90gp is staggering to players at sell wow gold such low levels. This is aoc gold on-top of the heavy training costs aoc gold,cheap aoc gold for level 40 spells and abilities cheap aoc gold,buy aoc gold which easily cost over buy aoc gold 1gp each to learn! The level 40 ffxi gil mark in the game is easily one ffxi gil of the most expensive levels in buy ffxi gil the game.
At level 40, Hunters buy ffxi gil and Shamans learn to wear cheap ffxi gil chainmail armor. Thus, on top cheap ffxi gil of the wide range of wow power leveling,wow powerleveling spells and abilities wow power leveling earned at that level, and the ability wow powerleveling to ride a mount, they have power leveling to purchase a powerleveling whole new world of warcraft power leveling set of armor. Warriors and Paladins world of warcraft powerleveling go through the world of warcraft powerleveling same ordeal, upgrading wow power level from chainmail to platemail. For other wow power level classes like Priests, Mages and Rogues, level wow powerlevel,power leveling 40 represents a whole new selection of skills and spells which ffxi power leveling can cost over 20gp to afford them aoc power leveling all. All these expenditures while the player is rs power leveling still getting 5-10 silver pieces per kill! The costs wow powerlevel only keep piling up as you progress in levels, making gold world of warcraft power leveling farming one of the most arduous and boring tasks a player is challenged with.，wow leveling wow leveling。
Comment of Mishka (2008-07-16 18:56:10):
Greetings from [url=http://www.VillaZone.com/hotproperty/villas-for-rent/Italy.html]Villas in Italy[/url] and also from our friends at
[url=http://www.villazone.com/hotproperty/villas-for-rent/France.html]South France Villas[/url]
Comment of Mishka (2008-07-16 18:57:05):
Greetings from Villas in Italy and also from our friends at South France Villas
Comment of runescape (2008-07-17 05:11:35):
runescape money runescape gold tibia item tibia gold runescape accounts tibia money runescape gp buy runescape gold tibia gold tibia item buy runescape money runescape items tibia money