{ Gearing your tech needs }

How to create CSS overlapping tabs?

by harshit on July 26, 2008 · 0 comments

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

Hey Bro, why not share this post :
  • StumbleUpon
  • Digg
  • Reddit
  • Technorati
  • Yahoo! Buzz
  • del.icio.us
  • Facebook
  • HackerNews
  • Twitter

Related posts:

  1. How To Create Amazing Panorama Using PTGui? Taking snaps, making them personalized and then giving unique...
  2. How to create a Twitter like logo Logo making is a very difficult task for those...

Subscribe Now

If you enjoyed this post, you will definitely enjoy our others. Subscribe to the feed to get instantly updated for those awesome posts soon to come.

Free Subscription

Leave a Comment

Additional comments powered by BackType

Previous post:

Next post: