Dynamic Drive CSS Library- Overlapping horizontal tabs

CSS Library: Horizontal CSS Menus: Here

Overlapping horizontal tabs

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

Your Comments (48)

Got a question or need help customizing this CSS code? Post it in the CSS Forums. If you have a comment or suggestion instead, post it in the comments section below.

Comment Pages 2 of 5 pages < 1 2 3 4 > Last »

Bill, did you figure out the Opera tweak? Or does anyone else know how?

Posted by Mike Silari on 10/19, 05:05 PM

very nice. I'm still looking for a nice example where the tabs change colors on mouseover...I guess that gets pretty tricky then...

Posted by Adsense Websites on 10/25, 01:50 PM

I would like to center align to see how it looks... Is there any quick css line(s) that will do this?

Otherwise I like

Posted by natty on 11/20, 03:15 PM

Looks nice, but is not valid CSS (which unfortunately seems to be the case with many of the examples on this site). The errors/warnings are fairly simple to fix - if one has experience with CSS. A newbie could FUBAR a menu or layout lickety split, which takes us to my point: I appreciate sites like this one, BUT if you're going to offer examples (which folks may be trying to learn from) shouldn't they be correct in every detail?

Thanks for the hard work, and don't take this comment harshly. It's just MHO. :-)

Posted by ChrisR on 11/24, 11:09 PM

wow.. cool one. will help to understand the properties os css...

Posted by mouli on 11/28, 01:22 AM

Its a good item, however could do with better images :)

Posted by Rick on 12/14, 02:42 PM

Kindly inform how to use this total code for my web site.

Posted by jayanthi on 12/22, 12:25 AM

Hello. I've made some overlapping css tabs aswell.. they also use z-index and popup on hover! check them out at:

http://anythingclose.com/css-overlapping-tabs.php

Posted by Martin on 01/01, 04:43 AM

hi....can i ask on how to center this tab menu?

thanks.

Posted by ayanami on 02/11, 04:03 AM

Did not work on Opera 7. On Firefox it looks OK but when the user changes the font size CTRL -/+ is looks pretty nasty.

I wish sometimes there would be only one browser client on this planet and many problems would be gone.

Posted by anonymous email on 02/22, 01:09 AM

Comment Pages 2 of 5 pages < 1 2 3 4 > Last »