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
Featured in Project Educate: Design Tutorials and Resources .
👍: 0 ⏩: 0
Is it possible to change the content of the box using css when a tab is clicked or is javascript required for that?
👍: 0 ⏩: 1
that requires javascript to do it without a page reload.
my advice is to take a look at jquery
👍: 0 ⏩: 1
Heh, I was just wondering if I could do something like that on dA, but I guess not
👍: 0 ⏩: 0
I keep getting a "file not found" error when I try to download this. Full view is totally blank as well. The only thing I can see is the preview. I thought it might just be a temporary problem with the server but it's been like that for two days now. Is the file no longer available? I'd really like to get it if it is!
Thanks!
👍: 0 ⏩: 0
I like it. Covers all the basics and is compatible with all major browsers. A wonderful job you did here.
👍: 0 ⏩: 0
Do you know how to resize photos like here [link] , in CSS journals?
👍: 0 ⏩: 0
YEA... thank you very very much, that was the point. I wasted many time and don't got it to work. You fixed my problem. 👍: 0 ⏩: 0
Aww great now that I know how to do this I can't be lazy now I really gotta learn CSS :[ If only HTML was enough.darn xD Thanks for the help!
👍: 0 ⏩: 0
I LOVE YOU. I've been working on this thing for HOURS, and YOU just fixed it! YAI
👍: 0 ⏩: 1
its good but one thing it doesnt like IE 7! lol anyways ive used your tabs tutorial and i love the tabs heh when i get the site hosted i will link you to it!
👍: 0 ⏩: 0
This is excellent. I'm trying to redo my website, and I'm gonna try working with this as I found it very easy to follow.
Thank you!
👍: 0 ⏩: 0
Holy crap. This was unexpectedly just what I needed and wanted.
Thank you VERY much; I will worship you forever.
👍: 0 ⏩: 0
This tutorial is a godsend! I'll be designing a website shortly that requires such tabs that will be compatible with both Firefox and IE, and I didn't think it could be done. Apparently I was wrong!
I'll credit you for the code and shoot you a note once the site's up so you can take a look
👍: 0 ⏩: 1
Do you have to do this in dreamweaver or can you do this in notepad and bring it over to the css screen that DA gives you?
👍: 0 ⏩: 0
Simple and expandable.. Thanks for putting this up!
👍: 0 ⏩: 0
Thanks dude, this tutorial was a great help, even for an HTML & CSS beginner n00b like me
👍: 0 ⏩: 0
thats beyond me, darn.
I don't do CSS. I barely do HTML
👍: 0 ⏩: 0
Thanks for sharing. This will help me a lot since I'm looking for something different to use for my website. The same type of layout gets boring.
👍: 0 ⏩: 0
wow. dude i never knew it'd be that simple!
I'll have to try this out sometime.. I've been learning CSS lately.. Started a month ago, and its very easy.
Definately a great tutorial, easy steps.. well shown.
Best tutorial I've seen recently, by far
👍: 0 ⏩: 0
I was just looking for something like this. I didn't want to do it with tables and javascript, so this is perfect! Thank you so much! I have to give it a 
👍: 0 ⏩: 0
{quote}"So, you want to do a set of tabs for the top of your website, with roleovers, using as simple code as possible?"{/quote}
... Could it be possible?
...
... Can he really read my mind?
...
...
...
Thank you!
👍: 0 ⏩: 0
I will definitly use this info if I ever make a webpage. I probably won't but it would be very useful.
--
Do you like pain? Then try wearing a corset.
Have you ever worn a corset? Probably not. I haven't, I mean come on those things are like death traps waiting to happen.
👍: 0 ⏩: 0
cool! ..and very neat code! ..id probably done that some much harder way 
👍: 0 ⏩: 0
tight coding mate...
but this isn't sumthing new... 
👍: 0 ⏩: 1
i never said it was new
however, there are very few that are backwards compatible with IE5.
👍: 0 ⏩: 1
hm... mkay... that's aight... ^^ 
gah... hate ie... -.-*
👍: 0 ⏩: 0
brilliant, definatley need to give this a try at some point, do you have a working example i can have a look at? (just to be annoying
👍: 0 ⏩: 1
if you download the ZIP it has all the working examples.
👍: 0 ⏩: 1
I'm beginning to think I really am thick. HTML gives me a migraine as well. I'll just stick to complicated cameras I think.
👍: 0 ⏩: 0
| Next =>