Article about css tabs.

I recently had to create tabs for a website i was working on, i googled CSS Tabs and found this article CSS Tabs 2.0. It helped me a lot creating a nice set of Cross Browser tabs. I won’t go into further detail about the actual tabs, you can check out the article for yourself. However keep in mind there are a few little changes i suggest you perform before you use them.

First replace the ul’s id tabnav to a class tabnav then change this code:

.tabnav li.tab1, body#tab2 li.tab2, body#tab3 li.tab3, body#tab4 li.tab4 { /* settings for selected tab */
border-bottom: 1px solid #fff; /* set border color to page background color */
background-color: #fff; /* set background color to match above border color */
}
body#tab1 li.tab1 a, body#tab2 li.tab2 a, body#tab3 li.tab3 a, body#tab4 li.tab4 a { /* settings for selected tab link */
background-color: #fff; /* set selected tab background color as desired */
color: #000; /* set selected tab link color as desired */
position: relative;
top: 1px;
padding-top: 4px; /* must change with respect to padding (X) above and below */
}

with

ul.tabnav li { /* settings for selected tab */
border-bottom: 1px solid #fff; /* set border color to page background color */
background-color: #fff; /* set background color to match above border color */
}
ul.tabnav li a.active { /* settings for selected tab link */
background-color: #fff; /* set selected tab background color as desired */
color: #000; /* set selected tab link color as desired */
position: relative;
top: 1px;
padding-top: 4px; /* must change with respect to padding (X) above and below */
}

so now all you need to do is add a class active to your anchor so that it is the selected tab.

Enjoy these are great tabs.

Related posts:

1. Cool navigation menu made with JQuery
2. Make a custom tab interface with JQuery
3. Simple Cross Browser CSS Layouts (ie6+, ff3+,safari*,chrome*)
4. Top 10 CSS Snippets
5. How To: Jquery Scroll to Anchor and Scroll To Top (simple)

Did you absolutely LOVE this article... share it!