How to create CSS overlapping tabs?

overlapping_tabs.gif picture by hpurwar

A set of overlapping tabs using just one very small image and a little extra markup. The selected tab is always on top and the hovered tabs come to the front but remain behind the selected tab. A line of descriptive text will appear in the line beneath the tabs.Clicking any of the tabs will reload the page with that tab shown selected.

Overlaps – a problem………

Overlapping navigation is a real problem in CSS with the box model and browser support. It is possible though. This technique is advanced CSS and the tutorial assumes a good level of understanding of both CSS and XTHML.

Avoid it if possible…….

If you can avoid it you should. It will be time consuming to produce and difficult to maintain. If you really need it or are just keen to see it done in CSS read on!

Creating CSS overlapping tabs……..

Sometimes simulating a real desktop interface for your web application can be a real challenge, especially when dealing with tabs. Side-to-side tabs are not easy to create in CSS, but overlapping tabs are even harder.view stylesheet

You may also like...

6 Responses

  1. Piece of... says:

    What kind of piece of crap is this? There is no damn tutorial…

  2. Michel Konow says:

    Good collection, Eric, appreciate it. Bookmarked and shared 🙂

  3. Eddie Duhan says:

    February 21st, 2011 at 9:17 am

  4. 256535 733166I likewise conceive thus, perfectly written post! . 870661

  5. 841910 52869Thank you for having the time to discuss this topic. I truly appreciate it. I

Leave a Reply