Shivan Jaikaran - CSS Tabs Tutorial

Cascading Style Sheets (CSS) TABS Tutorial
(in TWO easy steps)

CSS Tabs are a great way to have tabs on your webpage and get that same great feel of javascript onhover effect without actual javascript.

Please see this example of the CSS Tabs result before proceeding so that you will have an idea of what the following code does.

Step 1:

I am going to use an un-ordered list to accomplish this. Ignore the CSS code in the following lines of code for now. I will explain it in step 2.

<li><a href = "register.html">register</a></li>

</ul>

As you can see, the three (3) list elements <li>..</li> make up the 3 tabs. For the page that you are currently on, this tab needs to be unique and should show the user that it is the current tab so the class "active" is applied to the active tab.

NB: class "active" is applies to both the <li> tag as well as the <a> tag.

Step 2:

The following CSS code needs to be incorporated into the page either withing the same page or as an external style sheet.

The main CSS code here is "display: inline;" which according to w3schools.com means:

"The element will be displayed as an inline element, with no line break before or after the element"

In layman's terms, this just means that all the <li> tags are displayed on one line with no break before or after.

/* Tab navigation */

ul.primary {
                     border-collapse: collapse;
                     padding: 0 0 0 1em;
                     white-space: nowrap;
                     list-style: none;
                     margin: 5px;
                     height: auto;
                     line-height: normal;
                     border-bottom: 1px solid #bbb;
}

ul.primary li { display: inline; }

ul.primary li a {
                          background-color: #ddd;
                          border-color: #bbb;
                          border-width: 1px;
                          border-style: solid solid none solid;
                          height: auto;
                          margin-right: 0.5em;
                          padding: 0 1em;
                          text-decoration: none;
}

ul.primary li.active a {
                                     background-color: #fff;
                                     border: 1px solid #bbb;
                                     border-bottom: #fff 1px solid;
}

ul.primary li a:hover {
                                      background-color: #eee;
                                     border-color: #ccc;
                                     border-bottom-color: #eee;
}

[ See the CSS Tabs ]

[ << back ] [ my blog >> ]