Resizable tabs navigation tutorial, tabs navigation using background image

Search Engine Users are Search Savvy: Does your Website have the right keywords to attract the right people?…
read more

Why Credit Crunch Cutbacks Must NOT affect your staff training programme…
read more

Go back

Resizable tabs navigation with background image
This tutorial will explain how to create a resizable tabs navigation using CSS and background images. Compatible with all major browsers.
Download the image used in this tutorial by clicking on the download button on the right.
Demo

Download image used in this tutorial

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

<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;

}

And that´s it
Written by Freelance Web Designer – Sebastian Sulinski.