How to make tabs with html and css

Question

I want to apply 3 tabs for a common way to partition lists. How can I improve my view and also add the way a tab gets to the foreground like in the link? I could read the html / css from the link to learn how it swtiches between the three categories and looks more like tabs than my effort.

The difficulty for me is styling the tabs named "All", "Private", "Company". Could you help me? My website which uses a http get parameter f=c for company view and f=p for private view which correctly fetches the apprioriate subset but at the moment doesn't change the layout which it should to look more professional.

Update: The above looked terrible so I've styled it and I want also to add dynamics with a tabs URL parameter.

Answer 1

You're very close. Mark the active tab with a css class like <li class="active"> then assign that class a different background color (like white) and no bottom border. Then it will appear to merge in with the content beneath.

Answer 2

use jQueryUI tabs see demo here

easy to use, easy to style, all the functionality you could want :)