Dynamic Drive CSS Library- Overlapping horizontal tabs

CSS Library

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

Advertise Here

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

Your Comments (51)

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 1 of 5 pages 1 2 3 > Last »

That's pretty ugly. I wouldn't recommend this.

Posted by Nathan on 10/04, 05:17 AM

quite nice, but i wouldnt use it. i started using css to avoid using big images, this to me seems to defeat what i think the point of css is.

Posted by psychohagis on 10/04, 11:42 AM

Well, big images are used to ensure the tabs keep their interface even if the text is resized to be ridiculously large. You're free of course to use your own tab images that are smaller or more "attractive."

Posted by ddadmin on 10/04, 01:01 PM

The images don't weigh much (4.04 kilobytes total) and are sized so they can accomodate resizing the text.

Posted by David L on 10/04, 01:05 PM

Good stuff. Although the images may not appeal to everyone (eg. the first two posters), thank you for giving the CSS code to do such a set of tabs, as it demonstrates the point of this tute. Its just a matter of those who dont like the tabs to replace them with their own. Much appreciated ;)

Posted by Ash on 10/07, 08:41 AM

very nice. though it would be better shown with a sans-serif font such as tahoma. may just use this.

Posted by fox on 10/08, 05:54 PM

Very crafty. Might use the design on one of my sites, which is the best thing I can say about it.

Posted by Witch Hunter on 10/14, 06:06 PM

I know that i could add extra html to do this, but
what is the point of having an overlapping content if it doesn't overlap, it just links?

Posted by Codebreaker on 10/17, 03:22 AM

Nice. Just need to figure out how to make it go in Opera.

Posted by Bill on 10/18, 12:18 AM

Well explained, I guess I'll tray it for my own site, with a few changes of course, thanks for the tips

Posted by cibarra on 10/18, 04:50 PM

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

Commenting is not available in this weblog entry.