We Recommend

CSS: The Definitive Guide CSS: The Definitive Guide
Provides you with a comprehensive guide to CSS implementation, along with a thorough review of all aspects of CSS 2.1. Updated to cover Internet Explorer 7, Microsoft's vastly improved browser, this new edition includes content on positioning, text wrapping (nowrap), lists and generated content, table layout, user interface, paged media, and more.


Posted By

jatkins on 02/24/08


Tagged

css webdesign tabs webdev webdevelopment


Versions (?)


Who likes this?

4 people have marked this snippet as a favorite

jonhenshaw
basicmagic
adix
ctronci


CSS Tabs


Published in: CSS 


Tested in Firefox 2, Opera 9, IE8 (Beta 1), and Safari 3. No issues with text resizing. Simply apply the 'tabset' class to any (un-)ordered list with hyperlinks, and it will be converted to a tab set.

  1. ul.tabset,ol.tabset{list-style:none;margin:0;padding:0;border-bottom:1px solid black;float:left;width:100%;}
  2. ul.tabset li,ol.tabset li{float:left;}
  3. ul.tabset li a,ol.tabset li a{color:black;text-decoration:none;display:block;padding:0.5em;margin-right:0.5em;border:1px solid black;border-bottom:0;}

Report this snippet 

You need to login to post a comment.