Fixed-Width Tab Navigation : tab « CSS Controls « HTML / CSS

HTML / CSS » CSS Controls » tab 
Fixed-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>Fixed-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;
  background: #6F6146;
  list-style-type: none;
  width: 767px;    
  float: left; /* Contain floated list items */
}
#nav li {
  margin: 0;
  padding: 0;
  float: left;
}
#nav a {
  float: left;
  width: 127px;
  color: #FFF;
  text-decoration: none;
  line-height: 2.5;
  text-align: center;
  border-right: 1px solid #FFF;
  background: url(images/tab.gifno-repeat; /* Add the background image */
}
#nav #nav_con a {
  border: none;
}
#nav a:hover {
  background-color: #4F4532;
  background-position: -127px 0;
}
#body_hom #nav_hom a, #body_map #nav_map a,#body_jou #nav_jou a,#body_his #nav_his a,#body_ref #nav_ref a,#body_con #nav_con a {
  background-color: #BEB06F;
  background-position: -254px 0;
  color: #1A1303;
  font-weight: bold;
}
</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
1.Simple Tab Menu
2.Use UL and LI to create tab bar
3.Tab menu with bottom bar highlight
4.Tab bar with bottom image
5.Anchor based tab
6.Dynamic tab without javascript
7.Horizontal tab bar
8.CSS only tab bar with content
9.Simple Tab Menu with UL LI
10.Tab list box
11.CSS tab
12.Image tab menu 1
13.Image tab menu 2
14.Image tab menu 3
15.Image tab menu 4
16.Image Tab menu 5
17.Image tab menu 6
18.Tab pages
19.Tab menu bar with image
20.Tab like top menu bar
21.Pure css based top tab menu
22.Footer with tab menu
23.Top tab menubar
24.Tab menu bar
25.Tab bar
26.Variable-Width Tab Navigation
27.Tab like top layout bar
28.Card layout with top tab menu bar
29.Tab like top menu bar 2
30.Tab menu bar with round corner
java2s.com  | Contact Us | Privacy Policy
Copyright 2009 - 12 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.