August 01, 2004
Overlapping CSS Tabs
Last week I needed to put together a set of overlapping tabs for a project I'm currently working on. It has slanted tabs that overlap one another on both sides (see below).
As I researched the latest in standards-based CSS tabs I realized that I would need to create a hybrid of Douglas Bowmman's Sliding Doors so I could put images at both ends, and Dan Cederholm's Bulletproof Slants to accommodate resizing of the text.
Creating Overlaps
My first try at overlapping the tabs was way too simple. The lazy designer I am, thought that I could just stick some images on the right-side of each anchor tag and I would be set.
Unfortunately, it wasn't that easy. Since the overlap affects both the tab in front and behind each tab, I need to break the overlap into two pieces. Each piece needs to be put on either side of each tab, enter "Sliding Doors".
But even that still doesn't cut it, because the it still overlaps the next tab in the sequence. So, I need to change the sliding door images on either side of a tab, and the next tab in order.
After setting specific CSS definitions for the beginning and end tabs, and making sure the tabs extended when the text was enlarged (ala "Bulletproof Slants") then I was ready to rock. If desired, you can see the tabs in action for yourself. Just view the source to see the CSS definitions.
I'm sure someone else has done this, and probably done it better. If that someone is reading this entry, please leave a comment or contact me, because I would love to see if there's an easier way to do this.
- Posted in:
- Web Design
Comments
1
Joe:
Hi, i saw the article on your overlapping css tabs, i love the idea, i hate dhtml tabs and java tabs because they take too long to build, css would keep the speed i need, any idea on how to add drop down subcategory menus to the main cats?, also to add 3 more main cats?
Thanks in advance hope that this reaches you and you are able to respond
~joe
Posted: August 04, 2005 at 4:14 AM MT