Not so long ago, I posted a first pass at CSS tabs with lists which, importantly, included secondary navigation and mouseover effects on the tabs themselves. My implemenation wasn’t bad but it was flawed.
Radu Darvas has since come along and made some big improvements, in particular the primary and secondary navigation are now nested lists, as logic dictates. There is also the addition of images to give a more tab-like appearance. In fact, I reckon that this implementation is the ultimate starting point for any tab system, only fonts, colours and images (the easy stuff) would need to be changed to give any look required. (Actually I’ve just checked this on IE5/Mac and they fail – however setting a width for the tabs would fix this).
Guy wrote:
It’s a shame IE5/mac doesn’t display it properly and it doesn’t degrade nicely when you have a small window. Not convinced by it. Your version was better.
Philippe wrote:
Actually, i made a small change in your own implementation, and it works fine in IE Mac, widthout specifying width.
http://www.l-c-n.com/lab/clagnut_tabs/tabs.html
It is not tested in Opera7, maybe it fails there. Let me know, I think I know how to fix that.
radu wrote:
it’s a pitty they don’t work in IE/mac (and that I don’t have one to test it, too).
but setting a width would make those tabs no more flexible… must be some other way to manage it!?...
philippe: opera7 fails.
Spencer wrote:
Yeah, that brakes pretty in Opera 7
Philippe wrote:
Ok, i did one more small change to the css file, should work fine now. Same URL as below. Cross fingers :-)
IRFAN AFZAL wrote:
Can we change this to rounded corner tabs either with right or left corner images or with css.
http://www.l-c-n.com/lab/clagnut_tabs/tabs.html
any suggestions or solution.