Inverted Sliding Doors Tabs

A few days ago I promised to write about something that isn’t about different ways of styling boxes with CSS. To keep that promise (well, almost – dropshadows are used in this demo), I’ve written an explanation of how I adapted Doug Bowman’s Sliding Doors technique to work with inverted tabs for a recent redesign of netrelations.se (my colleague Tobias Nilsson did the design). By inverted tabs I mean that they are bottom-aligned, and as text size is increased, more and more of the tabs will be revealed from the top down, instead of from the bottom up as in the original Sliding Doors technique.

Here’s a screenshot of the tabs:

Inverted Sliding Doors Tabs

The tabs being inverted, or upside down, and the dropshadow cast by the header image prevented me from using the original technique without modifying it.

The changes are explained on the Inverted Sliding Doors Tabs demo page.

  • June 28, 2004
  • Comments closed
  • Posted in

Comments

1. July 7, 2004 by H. Wiedow

It's a very nice solution. I have allready used sliding doors for a inhouse project and it works fantastic. At the moment I'm surfing the web for new ideas for my new private project. I think I will impliment the nice inverted sliding doors. Thank you for your side.

2. July 20, 2004 by J. Foster

Very well done. I really like the inverted tab solution. I am going to try and get the :hover to work though. Will let you know what I come up with! Thanks.

3. July 29, 2004 by Kato Jenkina

Nice Jorb!

I noticed in your CSS, you have measurements without units. i.e. margin: 0; padding: 0;

without a unit of measurement like margin: 0px;

will it still validate without the px?

Kato

4. July 29, 2004 by Roger

Kato: Yes, it is valid. No unit is necessary when the value is 0. Zero is zero, no matter what the unit is.

5. August 5, 2004 by Tobias

Very nice. Only, if you change the text-size (e.g. 120% in Mozilla) the gfx doesn't show correct.

So long,

Tobias

6. August 5, 2004 by Roger

Tobias: I know. I can live with that visual glitch though. It's not a huge problem IMO.

7. August 16, 2004 by Leith

Thats great mate i'll have to nick this (sorry borrow) soon :-)

8. September 16, 2004 by johnny boy

how would it be possible to adapt this to work with a dynamic menu? like in a CMS...it looks like this menu need to be 'static' because you need to define the menu item 'names' in th ecss as well... any thoughts?

9. December 6, 2004 by Scott

I implemented this using Movable Type 2.6 as my CMS. In order to get the tabs to display correctly for each of my category pages, I simply replaced the <body id=staticcategoryname> with Movable Type’s MTArchiveCategory dynamic tag in the Category Archive template. I left the Main template alone (using Home for the body id). I haven’t completed the graphics, but you can view the source on passtheveggies.com. Note that is looks much better in Firefox- I have some strange behavior with the fifth tab in IE 6.

Berea, thanks again for the great adaptation and sample page!

Sorry, comments are closed for this post.

Information, sponsorship, and externals

About the author

Roger Johansson is a Swedish web professional specialising in web standards, accessibility, and usability. More about me and this site.

Subscribe

Looking for web hosting?

Try DreamHost!

Use the promo code 456BEREASTREET3 to save USD 20 when you sign up!

Latest articles

Validation statistics from Nikita the Spider Comments off
An analysis of the sites crawled by the bulk validation tool Nikita the Spider during March 2008.
Authentic Jobs API and Affiliates program Comments off
The Authentic Jobs job listing service now has a public API and an affiliate program.
What does Acid3 mean to you and me? Comments off
Opera and Apple have announced that their web browsers pass the Acid3 Browser Test, but how will that help web designers and developers?
Designing Web Navigation (Book review) Comments off
Learn the fundamentals of navigation design and design better navigation systems for large and small sites as well as for web based applications.
DOMAssistant bundle for TextMate Comments off
To save keystrokes and speed up development I have created a DOMAssistant bundle for TextMate.
First impressions of Internet Explorer 8 Beta 1 Comments off
My impressions after trying out Internet Explorer 8 Beta 1 for a couple of days.

More articles

Favourites, here and elsewhere

Affiliation

  • NetRelations
  • Kaffesnobben
  • Dagens recept
  • 9rules network member

Support this site

Show your support by buying a book or two from SitePoint or getting me something from my Amazon Wish List.