Dynamic Drive CSS Library- Overlapping horizontal tabs

CSS Library

CSS Layouts

Web Graphics

Free Icons

Online Tools:

Website Templates

Social Media Applications

PSD to HTML

Web Templates

Website Hosting

HTML Editor

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 (49)

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 5 of 5 pages « First < 3 4 5

Hey, good! I need some help on something! how can youdowords that just underline?

Posted by Mike on 09/22, 02:16 PM

I love it.

I reversed it vertically, and take it to the right of the screen. but I'm still unlucky to make it works properly in IE7. some usually it disappears in IE7 after the page got loaded.

This is my site http://www.syrianmeds.net/forum/

Any help will be appreciated.

Posted by Milad on 09/23, 04:24 PM

I've used these tabs on a couple of my applications that I have in development. They have worked out very well. From a UI perspective this is the best set of tabs I've seen on the site. I like the very obvious and clear representation of the forward tab for the current/selected tab. The other tabs on here either look cheap or dont give enough positive representation. I like the large images because I have had some large tab titles. UI must take into account that not all people see things the same way so having two ways of viewing the active/current/selected tab is right on the mark. Great contribution.

Posted by tallguy on 09/28, 09:17 PM

I am trying to use the tabs above, but would like to flip the 180 degree. I believed that flipping the image should do the trick, but it is not working. Am I missing something?

My goal is to use it below a picture. This explains why I want to flip the images.

Posted by Stalin Acosta on 01/25, 01:16 PM

I don't think that 4kb is much even on a dial up connection. Takes less than 0.5 seconds on a dial up connection and less than 0.02 seconds on a broadband connection.

Overall, this is really good. Would recommend changing the font to something better than crappy old times new roman. Probably change it to at least Arial. I'm pretty glad that Microsoft now have changed the default font to Calibri in the latest version of office (2007). :).

Posted by Husain on 03/24, 11:38 AM

thanks.. perfect css

Posted by prefabrik on 04/26, 03:29 AM

Nice, thanks.

Posted by Keeth on 05/17, 07:05 AM

This is just what I was looking for. I changed the div statement to this:

<div class="ddoverlap" style="text-align: center; position: absolute; top: 10px; left:
40px; width: 690px;">

This keeps the menu from wrapping to a new line when the user reduces the width of the browser screen. The px values depend on the menu items themselves and the overall page design.

Thanks for making this available

Posted by Al Stevens on 08/29, 11:11 AM

Comment Pages 5 of 5 pages « First < 3 4 5