Dynamic Drive CSS Library- Overlapping horizontal tabs

CSS Library

Hosting Discounts

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

CSS Library: Horizontal CSS Menus: Here

Overlapping horizontal tabs

Author: Dynamic Drive

Using relative positioning and negative margins, this CSS code creates "overlapping" horizontal tabs that each snug up and slightly overlaps the tab to the left of it. There is no mistaking the "selected" tab, with its raised look. Uses two tab images in total to create the entire interface.

Demo:

The two images used:

True dimensions- 492px by 63px

The CSS:

<style type="text/css">

.ddoverlap{
border-bottom: 1px solid #bbb8a9;
}

.ddoverlap ul{
padding: 0;
margin: 0;
font: bold 90% default;
list-style-type: none;
}

.ddoverlap li{
display: inline;
margin: 0;
}

.ddoverlap li a{
padding: 3px 7px;
text-decoration: none;
padding-right: 32px; /*extra right padding to account for curved right edge of tab image*/
color: blue;
background: transparent url(media/righttabdefault.gif) 100% 1px no-repeat; /*give illusion of shifting 1px down vertically*/
border-left: 1px solid #dbdbd5;
position: relative;
display: block;
float: left;
margin-left: -20px; /*shift tabs 20px to the left so they overlap*/
left: 20px;
}

.ddoverlap li a:visited{
color: blue;
}

.ddoverlap li a:hover{
text-decoration: underline;
}

.ddoverlap li.selected a{ /*selected tab style*/
color: black;
z-index: 100; /*higher z-index so selected tab is topmost*/
top: 1px; /*Shift tab 1px down so the border beneath it is covered*/
background: transparent url(media/righttabselected.gif) 100% 0 no-repeat;
}

.ddoverlap li.selected a:hover{
text-decoration: none;
}

</style>

<!--[if IE]>
<style type="text/css">
.ddoverlap{
height: 1%;  /*Apply Holly 3px jog hack to get IE to position bottom border correctly beneath the menu*/
}
</style>
<![endif]-->

The HTML:

<div class="ddoverlap">
<ul>
<li><a href="http://www.dynamicdrive.com">Home</a></li>
<li><a href="http://www.dynamicdrive.com/new.htm">DHTML</a></li>
<li class="selected"><a href="http://www.dynamicdrive.com/style/">CSS</a></li>
<li><a href="http://www.cssdrive.com">Gallery</a></li>
<li><a href="http://www.javascriptkit.com">JavaScript</a></li>
<li><a href="http://www.codingforums.com">Forums</a></li>
</ul>
<br style="clear: left" />
</div>

Code Info

Rate this code:

Date Posted: 10/04/2006

Revision History: None

Usage Terms: Click here