HOME | DD
zilla774 — HTML Tabs using Lists and CSS
Published: 2006-06-20 18:16:53 +0000 UTC; Views: 19671; Favourites: 251; Downloads: 3252
Redirect to original
Description
This is a HTML and CSS tutorial showing how to create Tab tops for your website pages, using unordered lists and CSS, which are compatible with the following browsers:Internet Explorer 5
Internet Explorer 5.5
Internet Explorer 6
Firefox
Mozilla
Safari
Netscape 7
Opera
(basically all of them...)
This was a project I have been working on with a friend of mine, Emma (www.basement59.co.uk) which had to be compliant to a whole heap of accesibility guidelines and also specifically work all the way back to IE5.
Hope this is useful to someone
Download the ZIP for the accompanying source files.
Related content
Comments: 79
Nice tutorial.
Although I was already capable to create such a menu, it's good to see some of these tutorials on dA.
As a matter of fact I didn't even know there was a dreamweaver category here.
Nice work.
👍: 0 ⏩: 0
Very nice. I wish more tutorials would be that simple and to the point.
👍: 0 ⏩: 0
some suggestions:
ul.tabs li { font:bold .8em tahoma; } (shorthand)
ul.tabs li a:hover 
each instance of '#ff9933' can be shortened to '#f93'
... apart from a couple of minor semantic changes i'd make, this is pretty tight.
👍: 0 ⏩: 1
I was going to make some shorthand adjustments, but as i was trying to keep this in line with both the novice and expert HTML/CSS person, I figured it was safer to spell it out. But yeah, good points, thanks for the suggestion.
the extra float and padding solve an IE5 problem, if it wasnt for having to code for that, this code would be WAY simpler....
👍: 0 ⏩: 1
anytime. 
👍: 0 ⏩: 1
Nice tutorial! Btw. i guess you could combine this with a non-flickering css-image technique, but i guess you will lose some of the compatibility to older browsers...
Anyway, you can read "the Sliding Doors 2" at "A List Apart" here
👍: 0 ⏩: 0
woa cooo .. more info i could use!!! YESSSSS. tnx alot for doin this... i learn more everyday!!!
👍: 0 ⏩: 0
Hey, excellent work! I know photoshop, but i'm not very good with html, so this is definatly teaching me something. Thanks a bunch! Its nice to see people willing to share their knowledge to help people.
👍: 0 ⏩: 0
Now this is a brilliant tutorial... I didn't think I would get it due to lack of time spent in the Html/Css area, but even I got this... and it wwasn complex while giving proper eamples and exxplanations.
👍: 0 ⏩: 0
Oh jeebus, I wish I had known this much earlier XD Thankies a bunchies zilla man
👍: 0 ⏩: 0
This is awsome , ive always wanted to do this , ive always reliaed on imageready to do the slicing and roll overs , but this is awsome .
👍: 0 ⏩: 1
welcome to the wonderfull world of CSS, no more tables
👍: 0 ⏩: 1
Yep CSS is great . Especially its versitility .
👍: 0 ⏩: 0
Wow, great tutorial! Except I know next to nothing about web design, but...this is still a great thing to have! ~_~
👍: 0 ⏩: 0
Thanks a lot for this brilliant tutorial !
👍: 0 ⏩: 0
Well played, sir, well played.
Must say, I am impressed.
👍: 0 ⏩: 0
Becoming quite the tutorial guru lately eh?
Always nice to see someone lending a hand to those in need.
👍: 0 ⏩: 0
Wasn't expecting this from you, but it's come as a very welcome suprise. So thanks very much!
By the way, if you have any info on setting up a gallery slideshow (one where you have to click to get to the next image) using css and html, it would be very welcome.
👍: 0 ⏩: 0
Ahhmygod thankies!! Everyone could use this info.
👍: 0 ⏩: 0
thats cool not that i make web pages but is good to see how it work i might tell me bro about that thanks
👍: 0 ⏩: 0