enavu webdevmania tutsvalley psdestination
visit the enavu network
3 Comments Article Title Overlay Article Title

CSS Tabs

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 [...]

DZoneDiggDesign FloatDeliciousBlinklistRedditFacebookGoogle BuzzTwitterStumbleUponTumblrShare

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.

DZoneDiggDesign FloatDeliciousBlinklistRedditFacebookGoogle BuzzTwitterStumbleUponTumblrShare

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!

Comments

  • Haha, this sure is a smart and simple solution to the origianl idea by Dragon.
    Bookmarked for future needs.

  • You sir, are an idiot.

  • A good animated design solution…

Leave your own!

Sponsors

freedcamp free project management

Popular Articles

fzilla file hosting