Tab Navigation CSS

The purpose of the tab interface is to guide the user as to their present location, these small features do actually improve the usability of the tab structure. Below are simple codes for tab interface.

Insert the code below inside your <body> ... </body>

<div class="tabs">

<a href="#" class="selected">Wall</a>
<a href="#">Info</a>
<a href="#">CSS</a>
<a href="#">HTML</a>
<a href="#">alfie-css</a>
<a href="#">alfieindesigns</a>

Create tab.css, then input the CSS code below:

/********************************************
Coded by: alfieindesigns
Website: http://alfie-css.blogspot.com/
Inquiries: alfienollora@yahoo.com
********************************************/

/**********************
COMMON STYLE
**********************/
.clear {clear:both;} /* use to clear all floats */

/**********************
TAB ALA FACEBOOK
**********************/
.tabs {

border-bottom: 1px solid #D8DFEA;
bottom: 0;
font-family:Arial, Helvetica, sans-serif; /* When you change font-family be sure to adjust the height */
height: 24px; /* Adjust this for border bottom to fit the layout (only if you change the font family ) */
left: 0;
width: 530px; /* Change to fit your layout */
padding:50px 0 0 10px;
}

.tabs a {

float:left;
background:#D8DFEA;
border-color:#D8DFEA;
border-style:solid solid none;
border-width:1px 1px 0;
display:block;
font-size:13px;
font-weight:bold;
padding:4px 11px;
white-space:nowrap;
color:#3B5998;
cursor:pointer;
outline-style:none;
text-decoration:none;
margin:0 2px 0 0;
}

.tabs a:hover {

background-color:#627aad;
border-color:#627aad;
border-style:solid solid none;
border-width:1px 1px 0;
color:#FFF;
}

.tabs a.selected, .tabs a:hover.selected {

background-color:#FFF;
color:#333333;
font-size:13px;
padding:5px 10px 4px;
border-color:#D8DFEA;
border-style:solid solid none;
border-width:1px 1px 0;
}

On the <head> tag insert the code below: (make sure path is correct "css/") i put my tab.css on css folder.

That's all! Enjoy! God bless always!