CSS tab : tab « CSS Controls « HTML / CSS

Home
HTML / CSS
1.CSS
2.CSS Controls
3.Form
4.IE Firefox
5.Layout
6.Marquee Attributes
7.Meta Tags
8.Microsoft Attributes
9.Object
10.Reference
11.Style Basics
12.Tags
13.Templates
14.XML
HTML / CSS » CSS Controls » tab 




CSS tab
   
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title></title>

<style type="text/css">
#navsite {
  border: 1px dashed white;
}
body {
  margin: 0 150 15%;
  border-left: 1px solid black;
  border-right: 1px solid black;
  border-bottom: 10px solid black;
  padding: 0 0 5em 0;
}

#header {
  background-color: white;
  border-top: 10px solid #333;

}
#navsite {
  background-color: white;
}

#navsite ul {
  background-color: white;
  padding: 0 0 3px 0;
  margin-left: 0;
  margin-top: 0;
  border-bottom: 1px solid #669;
}

#navsite ul li {
  list-style: none;
  margin: 0;
  display: inline;
}

#navsite ul li a {
  padding: 3px 0.5em;
  margin-left: 3px;
  border: 1px solid #669;
  border-bottom: none;
  background-color: #ccf;
  text-decoration: none;
}

#navsite ul li a:link {
  color: #339;
}

#navsite ul li a:visited {
  color: #666;
}

#navsite ul li a:link:hover, #navsite ul li a:visited:hover {
  color: #000;
  background: #AAE;
  border-color: #336;
}

#navsite ul li a#current {
  background: white;
  border-bottom: 1px solid white;
}

#header, #content {
 padding: 0 20 2%;

}

#content {
 background-color: white;
}

#contentMain {
  background-color: white;
}

</style>

</head>
<body>
<div id="navsite">
<ul>
    <li><a href="http://www.java2s.com" id="current">Home</a></li>
    <li><a href="http://www.java2s.com">Products</a></li>
    <li><a href="http://www.java2s.com">Services</a></li>
    <li><a href="http://www.java2s.com">About Us</a></li>
    <li><a href="http://www.java2s.com">Contact</a></li>
</ul>
</div>
<div id="content">
<div id="contentMain">
<h2><a href="http://www.java2s.com">link</a></h2>
<p>Text <a href="http://www.java2s.com">Link</a></p>
<p>Text.</p>
<p>Text <a href="http://www.java2s.com">Link</a></p>
</div>
</div>

<div id="footer">

<p>Copyright 2003 .</p>

</div>

</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.Image tab menu 1
12.Image tab menu 2
13.Image tab menu 3
14.Image tab menu 4
15.Image Tab menu 5
16.Image tab menu 6
17.Tab pages
18.Tab menu bar with image
19.Tab like top menu bar
20.Pure css based top tab menu
21.Footer with tab menu
22.Top tab menubar
23.Tab menu bar
24.Tab bar
25.Variable-Width Tab Navigation
26.Fixed-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.