professional-web-02-css-tabs.htm / htm
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Tabs</title>
<style type="text/css">
body {
font-family: verdana, sans-serif;
font-size: 12px;
}
#tabnav {
height: 20px;
margin: 0;
padding-left: 10px;
background: url(css-tabs.gif) repeat-x bottom;
}
#tabnav li {
margin: 0;
padding: 0;
display: inline;
list-style-type: none;
}
#tabnav a:link, #tabnav a:visited {
float: left;
background: #f3f3f3;
line-height: 14px;
padding: 2px 10px 2px 10px;
margin-right: 4px;
border: 1px solid #ccc;
text-decoration: none;
color: #666;
}
#tabnav a:link.active, #tabnav a:visited.active {
border-bottom: 1px solid #fff;
background: #fff;
color: #000;
}
#tabnav a:hover {
background: #fff;
}
</style>
</head>
<body>
<ul id="tabnav">
<li><a href="#" class="active">Lorem</a></li>
<li><a href="#">Ipsum</a></li>
<li><a href="#">Dolor</a></li>
<li><a href="#">Sit</a></li>
</ul>
</body>
</html>
(C) Æliens 20/2/2008
You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.
