51 CSS-generated tabs

Great article, Mark.

I would just like to note that the Plone Content Management System (which I have designed the CSS for) – http://www.plone.org – has had the type of CSS-generated tabs you describe here for over one year now. I am not claiming I invented them (don’t know when Randall came up with his, and the two are probably unrelated “discoveries”), but Plone has used these since July 2001.

Again, thanks for a great article, I really like the real-world examples, and you even taught me some new stuff I hadn’t thought of :)

— Alexander Limi http://plone.org

posted at 05:18 pm on October 2, 2002 by Alexander Limi

52 (typo)

(that should of course be ‘Randal’, not ‘Randall’, sorry about that :)

posted at 05:24 pm on October 2, 2002 by Alexander Limi

53 A small example

A typical tab group in Plone looks like this:

and the corresponding CSS is:

div.tabs { border-collapse: collapse; border-bottom-color: #8CACBB; border-bottom-style: solid; border-bottom-width: 1px; padding: 0.5em 0em 0em 2em;
}

div.tabs a { /* The normal, unselected tabs. They are all links */ border-color: #8CACBB; border-width: 1px; border-style: solid solid none solid; color: #436976; margin-right: 0.5em; padding: 0em 2em;
}

div.tabs a.selected { /* The selected tab. There’s only one of this */ background-color: #DEE7EC; border: 1px solid #8CACBB; border-bottom: #DEE7EC 1px solid; color: #436976;
}

and it ends up looking as the page on http://plone.org

I think it is a smart way of creating a tab row for section navigation, and it degrades nicely too. And look at how extremely simple and clean the HTML ends up being :)

posted at 05:32 pm on October 2, 2002 by Alexander Limi

54 It's getting late ;)

I forgot the enclosing <div class=“tabs”> around the above HTML, but you probably figured that out by yourselves :)

posted at 05:34 pm on October 2, 2002 by Alexander Limi

55 Navignation not centered

Hi – is it poss to get the links centered between the pipes? In the example they are set over slightly to the left.
Great stuff Mark
Thanks

posted at 07:18 am on October 3, 2002 by Lee

56 great article

thanks Mark, you css articles rock everytime

posted at 09:53 am on October 3, 2002 by kliertje

57 Can you do drop-down lists strictly w/ css?

. . . or do you need to use DHTML? Just curious, and learning slowly…

posted at 11:09 am on October 3, 2002 by

58 Why would you use this?

When there’s this ( http://www.brainjar.com/dhtml/menubar/ ) CSS/JS menu that’s fully cross-browser compatible?

posted at 01:54 pm on October 3, 2002 by Brainjar fan

59 Off-topic, but mentioned in the article...

Near the end of the article, Mark comments, “If you give the block an explicit width of 100%, then IE/Windows plays along. But doing this creates problems with IE5/Mac and Netscape/Mozilla.” This is precisely the problem I’ve been wrestling with in my code. I have parent div wrappers at fixed widths, and inner divs with width set to 100% of immediate parent. In IE/Win AND IE5/Mac, everything lines up beautifully. In Netscape/Moz and Opera, it, of course, does not. I was wondering if anyone might be so kind as to point me to an article discussing this issue, and possible workarounds? I’d rather not resort to specifying all widths to the pixel, but will do whatever it takes to make the layout render readably in all major browsers.

Thanks for your time,
Leah

posted at 02:41 pm on October 3, 2002 by Leah

60 Broke

I’m sad to say that just about every example was broken in some way in IE 6 on Win2K.

Good article, but ahead of its time. Or behind the times. Who knows?

posted at 04:15 am on October 4, 2002 by Adrian Appleyard