Resizable Tabs Navigation

Author: Coremediadesign.co.uk Author's URL: www.coremediadesign.co.uk More by this author

Added:Oct 01, 2007 Rating:

Level: Professional Software: Dreamweaver

This tutorial will explain how to create a resizable tabs navigation using CSS and background images.

Compatible with all major browsers.

Download image used in this tutorial from here.

To start with we need to create a simple layout with a list. Please make sure that each link contains <span> tag.

<div id="Wrapper">
<div id="Navigation">
<ul id="mainNav">
<li><a href="#"><span>home</span></a></li>
<li><a href="#" class="active"><span>services</span></a>
<li><a href="#"><span>about us</span></a></li>
<li><a href="#"><span>contact us</span></a></li> </ul>
</div>
<div id="Container">
</div>
</div>

In the first instance we will style the main elements of the layout.

html, body { margin: 0px;
padding: 0px; }

body { text-align: center; }

#Wrapper { font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #333333;
width: 765px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding: 0px;
text-align: left;
height: auto; }

#Container { color: #333;
clear: both;
width: 723px;
float: left;
display: block;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-right-color: #666666;
border-bottom-color: #666666;
border-left-color: #666666;
border-top-color: #666666;
border-top-width: 1px;
padding: 20px;
margin: 0px; }

Now we need to style our "Navigation" div.

#Navigation { font-size: 12px;
color: #333333;
height: 25px;
width: auto;
padding: 0px;
margin: 0px; }

Lastly we need to format our navigation. We will add background images to <a> and <span> tags. Becuase <span> is placed inside <a> tag it will expand it defining the size of the link.

#mainNav { margin: 0px;
padding: 0px;
list-style-image: none;
list-style-type: none; }

#mainNav li { float: left;
margin-top: 0px;
margin-right: 1px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px; }

#mainNav li a { margin: 0px;
background-attachment: scroll;
background-image: url(images/tabs_2.png);
background-repeat: no-repeat;
background-position: right 0px;
font-weight: normal;
color: #666666;
text-decoration: none;
height: auto;
width: auto;
float: left;
padding-top: 0px;
padding-right: 10px;
padding-bottom: 0px;
padding-left: 0px; }

#mainNav li a:hover { text-decoration: none;
color: #CCCCCC; }

#mainNav li a span { background-attachment: scroll;
background-image: url(images/tabs_2.png);
background-repeat: no-repeat;
background-position: 0px 0px;
display: block;
padding-top: 6px;
padding-right: 20px;
padding-bottom: 0px;
padding-left: 30px;
height: 19px;
width: auto;
float: left;
cursor: pointer;
cursor: hand;
margin: 0px; }

#mainNav li a.active { background-attachment: scroll;
background-image: url(images/tabs_2.png);
background-repeat: no-repeat;
background-position: right -47px; }

#mainNav li a.active span { background-attachment: scroll;
background-image: url(images/tabs_2.png);
background-repeat: no-repeat;
background-position: 0px -47px; }

#mainNav li a.active:hover { color: #FFFFFF;
text-decoration: none;
cursor: pointer;
cursor: hand; }

You can also have a look at our other web site - Affordable Web Site Design - where we have used the same method except tabs are displayed at the bottom of the header image.