In this example I will explain how to create tabs with css without using javascript.
Code HTML :
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>CSS_Tab - Depot Webdesigner</title>
</head>
<body>
<div id="box">
<ul id="tab_nav">
<li><a href="#tab_1">category 1</a></li>
<li><a href="#tab_2">category 2</a></li>
<li><a href="#tab_3">category 3</a></li>
<li><a href="#tab_4">category 4</a></li>
</ul>
<div id="tab_content">
<div id="tab_1">category 1</div>
<div id="tab_2">category 2</div>
<div id="tab_3">category 3</div>
<div id="tab_4">category 4</div>
</div>
</div>
</body>
</html>
Code CSS :
body {
margin:0;
font-size:12px;
background:#7da513;
}
#box {
width:400px;
height:300px;
margin:100px auto 0;
}
#tab_nav {
margin:0;
padding:0;
height:25px;
line-height:24px;
}
#tab_nav li {
float:left;
margin:0 3px;
list-style:none;
border:1px solid #a9d82d;
border-bottom:none;
height:24px;
width:90px;
text-align:center;
background:#FFF url('background_nav.jpg') repeat-x;
}
a {
font:bold 11px/24px Tahoma, Geneva, sans-serif;
color:white;
text-decoration:none;
}
a:hover {
color:white;
}
#tab_content {
width:398px;
height:273px;
border:1px solid #a9d82d;
font:bold 4em/273px Tahoma, Geneva, sans-serif;
text-align:center;
background:#f6ffdf;
color:#7DA513;
overflow:hidden;
}
#tab_1, #tab_2, #tab_3, #tab_4 {
width:100%;
height:273px;
}