Styled tab navigation : Navigation Bar « CSS Controls « HTML / CSS

Styled tab navigation


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">
<html xmlns="">
<title>Styled tab navigation</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#wrapper {
  text-align: left;
  border: 1px solid #033;
  position: relative;
  font-size: 1.4em;

#header {
  background: #033;
  color: #fff;
  height: 55px;
  position: relative;

#header h1,#header h2 {
  position: absolute;
  padding: 0;
  margin: 0;

#header h1 {
  top: 5px;
  left: 8px;
  height: 50px;
  background: gold;

#header h2 {
  top: 20px;
  left: 193px;

#headerlinks {
  float: right;
  font-size: 0.8em;
  background: red;
  padding: 6px 6px 8px 10px;

#headersearch form {
  padding: 0;
  margin: 0;

#headersearch {
  position: absolute;
  top: 2em;
  right: 5px;

#headersearch form input {
  padding: 0;
  margin: 0;
  vertical-align: middle;

#txtSearch {
  height: 17px;
  width: 115px;
  border: 1px solid black;

#tablinks {
  background: #336868;

#tablinks div {
  float: left;
  border-right: 1px solid #094747;

#tablinks a {
  display: block;
  padding: 5px 10px;

#tablinks a.current {
  background: #ccc;

<body id="cols3">
<div id="wrapper">
 <div id="header">
 <h1>header 1</h1>
 <h2>header 2</h2>
 <div id="headerlinks">
    <a href="">Contact Us</a> | 
    <a href="">Site Map</a> | 
    <a href="">Store Locator</a></div>
 <div id="headersearch"><form><input type="text" name="txtSearch" id="txtSearch" />
  <input value="Search" type="button"/></form></div>
 <div id="tablinks" class="clearfix">
 <div><a href="">Home</a></div>
 <div><a href="" class="current">Travel</a></div>
 <div><a href="">Flights</a></div>
 <div><a href="">Hotels</a></div>
 <div><a href="">Late Deals</a></div>


Related examples in the same category

1.Left navigation bar
2.One column with top navigation bar
3.Right navigation bar
4.Left bar menu
5.Horizontal menu
6.Expandable left bar
7.CSS tab based navigational bar
8.Nested List style
9.Negative Margins example
10.Horizontal navigation bar with anchor and list
11.Horizontal menu with list
12.Using image only as the top navigation bar
13.Vertical Navigation
14.Horizontal Navigation
15.Highlight top navigation link when mouse hover
16.Links navigation at the bottom
17.One level top navigation bar
18.Navigation bar with selected item
19.Horizontal Nav