Hostgator coupons for up to 99% off hosting for Dynamic Drive visitors!
Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library

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.


The two images used:

The CSS:


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.
Copyright 2006-2015 Dynamic Drive Read our Usage Terms before using any of the CSS codes.