Code and Code Explanation: The end result of this article in Mozilla Firefox, IE and Safari is depicted in Figure below 
Complete code can be found below or download it from the download section. The first rule appearing in the style.css style sheet sets the text property from the <body> element:
body {
font: bold 11px/1.5em Verdana;
}
The next few rule styles the <ul> element that contains the list items that eventually become tabs:
#tabs {
float:left;
width:100%;
background:#fff;
font-size:93%;
line-height:normal;
}
#tabs ul {
list-style:none;
margin:0;
padding:10px 10px 0 50px;
}
#tabs li {
display:inline;
margin:0;
padding:0;
}
#tabs a {
float:left;
background:url("left.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabs a span {
float:left;
display:block;
background:url("right.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}
#tabs a:hover span {
color:#FFF;
}
#tabs a:hover {
background-position:0% -45px;
}
#tabs a:hover span {
background-position:100% -45px;
}
The declaration in the rule,
list-style: none; //removes the default bullet styling of each <li> item.
margin: 0; // removes the default spacing each browser applies to the <ul> element, though as was the case with the <body> element.
Some browsers apply padding instead of margin to the <ul> element;
padding:10px 10px 0 50px; // takes care of this, and you add 10 pixels of space to the top padding, which appears between the top border of the browser's viewport and the top border of each tab. Like the modification for the <body> element, this space isn't really necessary to create a tab implementation and can be customized to suit your own needs.
To make the tab design even more portable you can also position absolutely and set to any place in a html document desired by using the offset properties of CSS (top, right, bottom, or left).
The next rule sets styles for each <li> element:
#tabs li {
display:inline;
margin:0;
padding:0;
}
Note If the <ul> element containing each tab is absolutely positioned, a fixed width larger than the <li> elements' cumulative widths will need to be applied to maintain compatibility with Opera. This is required because each <li> element is floated and the containing <ul> is not expanded horizontally to accommodate the nested <li> elements in Opera. This behavior is the result of an ambiguity in the CSS 2 specification, the wording of which actually leads to both Firefox and Opera being correct through a mutually exclusive interpretation of the specification. The conflict revolves around absolutely positioned elements using the shrink-to-fit width sizing algorithm, and at which point that width is determined. Opera calculates the absolutely positioned element's width before taking its floating descendants into account; Firefox floats those elements first and then gives the absolutely positioned element its width.
Background image is applied to each <li> element to set them apart from the containing <ul> element.
#tabs a {
float:left;
background:url("left.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
In the next rule, a hovering effect is added to each <li> element. Whenever you hover over the menu the lower half of the tab background image is displayed as the background.
#tabs a:hover {
background-position:0% -45px;
}
The next rule applies styling to the <span> element nested inside of each <a> element:
#tabs a span {
float:left;
display:block;
background:url("right.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}
The first declaration in this rule changes the display state of the <span> element from its default, inline, to block. This enables you to apply padding utilizing the block box model instead of the inline box model. This is done to control the spacing around the text of each tab, which may or may not be desired, depending on the stylistic requirements of your web project.
To create tabs using CSS and XHTML, follow the following instructions:
Create the following markup documents
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Tab Navigation</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<link rel="stylesheet" href="styles.css" type="text/css" />
</head>
<body>
<div id="tabs">
<ul>
<li><a href="http://www.fowara.com/about-fowara.aspx"><span>About Us</span></a></li>
<li><a href="http://www.fowara.com/search-engine-optimization-SEO.aspx"><span>Search Engine Optimization</span></a></li>
<li><a href="http://www.fowara.com/web-design-development.aspx"><span>Web Design</span></a></li>
<li><a href="http://www.planettutorials.com"><span>Planet Tutorials</span></a></span></li>
</ul>
</div>
</body>
</html>
Save the document as index.html.
Next, key in the following style sheet:
body {
font: bold 11px/1.5em Verdana;
}
h1 {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:16px;
font-weight:bold;
margin:0;
padding:0;
}
#tabs {
float:left;
width:100%;
background:#fff;
font-size:93%;
line-height:normal;
}
#tabs ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabs li {
display:inline;
margin:0;
padding:0;
}
#tabs a {
float:left;
background:url("left.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabs a span {
float:left;
display:block;
background:url("right.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}
#tabs a:hover span {
color:#FFF;
}
#tabs a:hover {
background-position:0% -45px;
}
#tabs a:hover span {
background-position:100% -45px;
}
Save the style sheet as style.css.
Everything else is pretty straigh forward and self explanatory. If you have any questions or comments feel free to post it in our forums section. Also you can also download the full source code and images from the download section of this site. You will need to register before you can download the files. I hope you will find this article useful.
