Home

CSS Examples CSS horizontal Tabs

Date: 10/07/2004 CSS horizontal Tabs

Author: CSS Drive/ Based on Eric's Meyer's Tab.

A horizontal tab interface that's extremely lightweight and scalable. Each tab is simply a list element and set to "display: inline" to cause it to align side by side instead of vertically.

The HTML:

<ul id="tablist">
<li><a class="current" href="http://www.cssdrive.com">CSS Drive</a></li>
<li><a href="http://www.yahoo.com">Yahoo</a></li>
<li><a href="http://www.google.com">Google</a></li>
<li><a href="http://www.news.com">News.com</a></li>
</ul>

The CSS:

#tablist{
padding: 3px 0;
margin-left: 0;
margin-bottom: 0;
margin-top: 0.1em;
font: bold 12px Verdana;
border-bottom: 1px solid gray;
}

#tablist li{
list-style: none;
display: inline;
margin: 0;
}

#tablist li a{
text-decoration: none;
padding: 3px 0.5em;
margin-right: 3px;
border: 1px solid #778;
border-bottom: none;
background: white;
}

#tablist li a:link, #tablist li a:visited{
color: navy;
}

#tablist li a:hover{
color: black;
background: lightyellow;
border-color: navy;
}

#tablist li a.current{
background: lightyellow;
}

Comments (11)

This is a real nice script...even though i know how to do it, but it saves time if ur in a hurry.

#1: Asif Shahidullah on 10/24 at 08:21 AM

Perfect !!!!!!!!!!! I love it !
Simple and great ! Thanks !

#2: baz on 05/20 at 07:18 AM

nice... i`ll try it...

"skrip yg gue cari-cari selama ini"

#3: sweedia on 06/15 at 11:26 PM

Saved me a lot of time, much thanx

#4: sandro on 08/10 at 03:49 AM

modify this

#tablist li a.current{
border-bottom: 1px solid white;
background: lightyellow;
}
for remove border in current page

#5: SuggeElson on 09/16 at 03:06 AM

Simple and great ! Thanks !

#6: Xue peak on 08/26 at 11:44 PM

yes this works great and i am very happy to find this site with clean examples

#7: papercube on 09/07 at 12:10 PM

realy nice article, great site. thanks for informations

#8: instalki on 09/22 at 03:17 AM

Please check this code... I wanted 100% width tabs, this is not working good in different resolutions. If it works in 1024 x 768, it not working in IE with 1280 x 1024 resolution.

It will be great if you could give me the tutorial link for tabs as well as any example for shadowed ceter aligned CSS layout.

The problem is, middle container I want it as liquid. If only that was fixed and outer areas as liquid I wouldn't have faced these problems.

<!-- HTML Code -->
<div class="TabBar" >
<div class="indnavbarlink" > Hello Sir </div>
<div class="indnavbarlink" > Namma Bengaluru </div>
<div class="indnavbarlink" > hello </div>
<div class="indnavbarlink" > hello</div>
<div class="indnavbarlink" > hello </div>
<div class="indnavbarlink" > hello </div>
<div class="indnavbarlink" > hello </div>
</div>

/* CSS code */
.TabBar
{
display:table;
//display:block;
width:100%;
float:left;
padding:0px;
margin:0px;
height:36px;
clear:both;

}

.TabBar .indnavbarlink a
{
width:14.08%;
//width:14.1%;
border:1px solid #ffffff;
display:block;
font-family:Arial;
text-align:left;
font-size:12px;
color:#ffffff;
font-weight:bold;
text-decoration: none;
text-align:center;
padding-top:10px;
padding-bottom:10px;
padding-right:0px;
padding-left:0px;
margin:0px;
background-color:#ffa216;
float:left;
}

#9: rekha on 10/03 at 11:08 PM

REALY,REALY nice article

#10: Peter Mensen on 11/18 at 09:47 AM


NewsUser
Privileges

Partners & ResourcesOur
Partners


CSS Forums News

Dynamic Drive forums | Register

All images and content copyright © 2004-2012 CSS Drive. Contact Info | Back to Top