CSS Examples 
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.
Perfect !!!!!!!!!!! I love it !
Simple and great ! Thanks !
nice... i`ll try it...
"skrip yg gue cari-cari selama ini"
Saved me a lot of time, much thanx
modify this
#tablist li a.current{
border-bottom: 1px solid white;
background: lightyellow;
}
for remove border in current page
yes this works great and i am very happy to find this site with clean examples
realy nice article, great site. thanks for informations
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;
}
REALY,REALY nice article
