Quote this comment

Seamus Posted…

At first I thought you meant tab interface using :target http://www.w3.org/Style/Examples/007/target.html http://daniel.glazman.free.fr/weblog/targetExample.html

Quote this comment

Nate Posted…

Oh interesting! Those would qualify too.

Quote this comment

radu Posted…

I just played a little bit too, using that beautiful example from Richard Rutter: http://homelesspixel.de/tabs/

Quote this comment

Lon Posted…

And another one... based on Joshua Kaufman's version, but with some improvements: 1. text-size is resizable 2. script to switch active tab 3. implementation of how content can be displayed http://www.q42.nl/demos/tabs.html

Quote this comment

Nate Posted…

Wow radu and Lon, those are both great! I've been working on a tab design too (although much simpler), but it's not cross-browser happy yet.

Quote this comment

Lon Posted…

and now with dropshadows! at least in IE for the time being, maybe later in Mozilla... http://www.q42.nl/demos/tabs

Quote this comment

Andreas Bovens Posted…

I fiddled around a littlebit with the Clagnut CSS Tabs example, and tried to embed the subnav within the parent list. (see also Douglas Bowman's comment): [edited] my "solution". Works fine in Win/IE6 and Mozilla 1.3. Opera7 however screws up the subnav. Anybody a suggestion?

Quote this comment

Nate Posted…

Ok, here's my ticket to the css tab train. First, the browser breakdown. Works well in these browsers: Mozilla OS X, Mozilla Win, Safari. Works almost well in these browsers: IE 6 Win (jiggles the background color on the left for a fraction of a second, I have no idea why), Camino (sliver of color missing on bottom left, which can probably be repaired). Works oddly: Opera Mac and Win (does something weird with the background color on the left on hover). So the idea is that they are modeled after a certain really large online store, so I'm calling them Amazatabs. They use a left and right image that is called as a relatively positioned background image. Since you can only have one background image per element, I've attached the left image to the li and the right image to the anchor (a). I put all the code and css on the page for easy reference, and hopefully someone will see ways to improve it. Main idea: same as most tabs. Keep the code a very clean unordered list and let the CSS do the rest. amazatabs

Quote this comment

James Dezendorf Posted…

I implemeted a pseudo-tab nav bar on my site: http://faustlabs.com/portfolio/ Works in all CSS browers I've seen except for a border issue on older [pre-v73] versions of Safari

Quote this comment

liorean Posted…

Well, time for me to announce my work of the evening (or night, actually). The system I use is more complex than it needs to be... It uses the High Pass Filter, so moz, ie6w, op7 and other high-compliant browsers gets a tabbed rendering. Others get a rendering where all the tabs are visible. If you haven't got JavaScript enabled but has a HPF capable browser, :target is used displaying the correct tab contents. There's a gap in the ie6w rendering between the tabs and the content. I don't know why yet - will have to do testing on it. Otherwise it looks nice in both op7 and moz. (Click on my name to get there)

Quote this comment

radu Posted…

so I've got it nested: http://www.homelesspixel.de/tabs/tabs.html tested on win: op7, ie6, nn7, phoenix0.5 any mac feedback, please?

Quote this comment

Andreas Bovens Posted…

Radu, I sort of knew the solution had the come from you. ;-) I added width: 40em to the #subnav part of my stylesheet and it renders fine in Opera7 now, too. Thanks! BTW, very slick, your slanted tabs.

Quote this comment

Joshua Kaufman Posted…

Excellent work everyone! It's great to see so many different techniques. Some Mac feedback for Liorean: works in Safari only. Radu: Camino only. (tested in Camino, IE5.2 and Safari)

Quote this comment

dru Posted…

Has anyone noticed that if you place the xml start tag <?xml in the page the tabs won't work in xhtml strict? Maybe I am not supposed to do that. Any thoughts? I tried to implement plone's tabs a while back and this kept throwing me for a loop.

Quote this comment

Nate Posted…

Sorry about that temporary page crash. Now back to your regularly scheduled program...

Quote this comment

Nate Posted…

Ok, upgraded the version of Movable Type used on webgraphics. 2.6x includes Brad's MTSanitize, which should prevent commenters from being able to break pages. Ok, now back to tabs.

Quote this comment

Ed Posted…

Don't mean to rain on anyone's parade since some of these examples are great - they really are... but quite a few are not working on Mac 9.2 IE 5.0 A short rundown so far since it's late at night for me: Those that work well: Tabbity, Tab-Tab, Others that don't: Tabish and Taby - no tabs, each tab breaks onto their own line creating a "stack" effect if you will http://www.w3.org/Style/Examples/007/target.html http://www.homelesspixel.de/tabs/tabs.html - nothing shows up although the "hotspots" are clickable. And Plone.org has a HUGE horizontal scroll with no visible content past 900px (none that I can tell at least). My money is on Tabbity or Tab-tab right now. Great stuff so far. Ps... hope no one minds my constructive critcism

Quote this comment

Hintzmann Posted…

I have made this one: http://users.cybercity.dk/~dsl58854/articles/mhaTab/mhaTabPane.html The tabpanels are created from headings inside the document.

Quote this comment

Symbi Posted…

How about the webfx.eae.net solutions ? http://webfx.eae.net/dhtml/tabpane/demo.html http://webfx.eae.net/dhtml/tabpane/tabpane.html

Quote this comment

Ted Posted…

Another one... using a bg image: >> http://jodyferry.com/css-examples/horizontal-nav2/index.html

Quote this comment

bMs Posted…

Note: if you don't want your tabs to wrap when you reduce the window screen size I used white-space: nowrap on the ul or div.

Quote this comment

greg Posted…

I just did a tabbed interface for a webcomic CMS I'm developing and, while it's not as nice as some of these, I'm glad to see I'm on the right track. My example is here: http://www.zwol.org/zwolarchive/index.php

Quote this comment

liorean Posted…

A second revision (my first revision was far worse written and actually broke more than it patched together) of my Tabbed Interface example is now put online. It fixes some issues various browsers had with it. I'm still searching for a working fix for the gaps between top tab and it's content in ie5-6w and opA second revision (my first revision was far worse written and actually broke more than it patched together) of my Tabbed Interface example is now put online. It fixes some issues various browsers had with it. I'm still searching for a working fix for the gaps between top tab and it's content in ie5-6w and op<7, and I've not yet found the solution to saf and cam problems.

Quote this comment

DevT Posted…

Here's my simple tabbed interface page.... http://www.opus.co.tt/dave/

Quote this comment

francois Posted…

This page should be added to the CSS-discuss Wiki in similar fashion as http://css-discuss.incutio.com/?page=ThreeColumnLayouts Then we can easily capture information about browser support and other characteristics of each approach. (And much as I'd like to, I won't have time to do it -- sorry.)

Quote this comment

Lon Posted…

So this was all nice and so... but have we learned anything apart from having 25 tab-solutions now? shouldn't 'we' approach this stuff somewhat more constructive than the usual 'hey look at me, I made another one'.

Quote this comment

huphtur Posted…

http://www.onlinetools.org/tools/domtab.php (sorry lon)

Quote this comment

francois Posted…

Lon, that is exactly what I meant when I suggested a CSS-wiki page like this one needs to be created. Have you had a look at it? That way, anybody deciding on which tab system to adopt on their own site (assuming all the examples on this page have no usage restrictions) can do so based on browser support. A neatly tabulated list will also make examples much easier to compare. In theory, one could even construct a wizard-like q&a interface to help someone select a suitable system (something that would also be great for selecting CSS hacks). But I'm afraid I'm calling on the Lazy Web here, as I don't have time to do it myself.

Quote this comment

Lon Posted…

Hi Francois and others, I have a feeling web-graphics is becoming more than a weblog to lots of people. At least to me it is. Of course I'm lazy and busy myself. But still it would be extremely handy if resources like tab and multi-column were created under the WG flague. Anyone?

Quote this comment

francois Posted…

Web-graphics is very good for generating the discussion and experimentation to collaboratively hash out a particular issue, as this page clearly shows. But it would still be a success if the results of such a session is neatly documented in a different place. (This page is not very tidy.) The most relevant place for a summary of CSS tab implementations would be the CSS-discuss wiki. That page would link to here, gaining W-G more readers. Of course, any person who simply posts such a summary on their own website will gain lots of visitors and kudos. But that person will be personally stuck with the inevitable maintenance requests, while the CSS-discuss wiki can be updated by anyone.

Quote this comment

Nate Posted…

I have to agree with both Lon and Francois here. Essentially, resources of stuff like this should at least be duplicated on the wiki, there is a greater chance that more can be added down the road since anyone can work on the document. Also, anything that's posted here at webgraphics soon is no longer on the homepage, and is buried within the archives. On the other hand - I've been toying with an idea that is sort of like the one Francois mentions above, except in reverse. How about a web application that anyone could go to and submit their CSS based widget or interface element? The main benifit of having an application would be the cross-browser testing aspect. The author could enter the browser results they have witnessed, then others could fill in results for other browsers/os combinations. Of course if all this stuff is stored in a db, then, as francois suggested, the front end could be a dynamic way to locate code snippets you might need. I think a good example of code snippets with appropriate documentation and browser testing is demonstrated by how youngpup.net accomplishes it. The only problem I forsee in doing something like that is one of contextuality. A snippet might work fine in a test case where it's the only thing on the page, but that won't mean that it will be happy in your floating 3 column layuout. Perhaps it wouldnt be that big a deal, not sure.

Quote this comment

ksmith Posted…

francois wrote:

In theory, one could even construct a wizard-like q&a interface to help someone select a suitable system (something that would also be great for selecting CSS hacks).

That's actually on my list of things to do. The data for the css filters/hacks table is pulled from MySQL, and I've built the beginnings of an interface to allow users to specify which browsers they're looking to affect & generate a custom style sheet skeleton on the fly. I'm hoping to free up some time in a few weeks to finish it, but priorities change...

Quote this comment

francois Posted…

Kevin: I'm very glad to hear you're working on a CSS hack wizard. I knew somebody else must see the sense in it. Your table, which is wonderfully complete, is unnecessarily difficult to read. Why didn't you just generate class="Y"/class="N" spans while generating the table, styled like this? Just one other suggestion -- just let the wizard output the relevant URLs. Actually generating a custom stylesheet would be icing on the top, but shouldn't delay the release of a valuable tool like this.

Quote this comment

ksmith Posted…

You're right. This should help: http://centricle.com/ref/css/filters/

Quote this comment

francois Posted…

A great resource on the web just got better. Thanks Kevin.

Quote this comment

Liorean Posted…

It lacks my althack, though... (Click my name for the test page)

Quote this comment

John Posted…

I believe CSS tabs are much to much of a hassle right now. But my hat goes out to those that do it anyway.

Quote this comment

Russ Baldwin Posted…

How about two tier compact vertical tab - ish menus (I guess you could make them more tab like), that are scalable and are based on nested lists with a common menu for each page (chages to body tag) ? This is really part of further work still being done to create a better web interface for PDA's...
http://homepage.ntlworld.com/russell.baldwin/csstest/menu1.html
Russ

Quote this comment

endroo Posted…

Thank you for the CSS-styled tabs menus!!!!, I'm looking for something similar a couple of days....;)

Quote this comment

Jeremy Posted…

There's a really cool DHTML tab widget called WebTabs that i've seen. It's the only one i know of with multiple row support. It also has 16x16 icon support, and it looks just like the windows tab widget.

Quote this comment

echillri Posted…

FWIW, Taby will only render properly in Mozilla 1.6 as an inline style. If you use it in an external style sheet, there's a funny offset. Also Moz assumes a certain padding-left, so if you want it to flush left as it does in IE, set that to 0.

Quote this comment

Zach Posted…

Thanks for this topic and to radu - it might be a year later, but I actually stumbled across this page and his tabs page seperatly - this being the first draft version I made off of his idea (and this is will be going into a decent traffic site) -- http://sportsforum.ws/menutest

Quote this comment

Bill Creswell Posted…

Wiki: http://css-discuss.incutio.com/?page=ListTabs

Quote this comment

Freddy Posted…

've used a tabbed interface inside a collapsible menu system. In teh url, click on the link at the bottom of the page which opens the interface in a pop-up

http://www.faridur.com/portfolio/ws_ap.php

Quote this comment

Web Design Posted…

How do you think the use of CSS will change the way graphics are created ?

Quote this comment

kemie Posted…

another couple of nice tab panes:
HTML Tabbed Dialog Widget
Degradable, OOP DHTML Tabs
DHTML Kitchen tabs
and i second DOMtabs, really versatile

Quote this comment

Michiel Posted…

What about the tabs from silverorange?

You can see them in action on my own site.

Quote this comment

Posted…

Please put your comments in paragraph tags, no auto-line-breaking anymore.

i'm a beginer of tabs usage can i have a simple sample code to know about tab design

Quote this comment

Atul Posted…

Can someone tell me the CSS differences between Firefox and Internet explorer. You can email at our web design company site

Quote this comment

Atul Posted…

Can someone tell me the CSS differences between Firefox and Internet explorer. You can email at our web design company site

Quote this comment

Waldo Posted…

Great examples! However I still not found what I'm looking for.. I'm searching for a tab row on a fixed pane on the bottom of a page (so it keeps in place when the page resizes of scrolls). A click on a tab will focus that tab and a layer will rise up from the bottom and overlay, say 70% of the current content. The tabs also rise up, so they are now on top op this layer. This popped up layer will be used to display additional details of the content page below. In the photoshop design it looks great, but its not easy to build this from scratch... anyone have seen this somewhere!?