Variable-Width Tab Navigation
<!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>Variable-Width Tab Navigation</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
html {
font: small/1.4 "Lucida Grande", Tahoma, sans-serif;
}
body {
font-size: 92%;
}#nav {
margin: 0;
padding: 0;
list-style-type: none;
float: left;
}
#nav li {
margin: 0;
padding: 0;
float: left;
margin: 0 1px 0 0;
display: inline;
background: #6F6146 ;
}
#nav a {
float: left;
padding: 0 15px;
color: #FFF;
text-decoration: none;
line-height: 2.5;
}
#nav a:hover {
color: #F90;
}
</style>
</head>
<body id="body_his">
<ul id="nav">
<li id="nav_hom"><a href="/">Home</a></li>
<li id="nav_map"><a href="/maps/">Maps</a></li>
<li id="nav_jou"><a href="/journal/">Journal</a></li>
<li id="nav_his"><a href="/history/">History</a></li>
<li id="nav_ref"><a href="/references/">References</a></li>
<li id="nav_con"><a href="/contact/">Contact</a></li>
</ul>
</body>
</html>
Related examples in the same category