Website Design Company

Ecommerce web site design uk

Call us: 0845 0944 755
news feed
 
CSS Tabbed Navigation with image background

Back to the list of tutorials

This tutorial will explain how to create a resizable tabs navigation using CSS and background images.
Compatible with all major browsers. See example.
Download image used in this tutorial.

CSS Tabbed Navigation

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

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

Back to top

Testimonials | Job opportunities | How we work | Warranty | Web design news | About us | Contact us
Freelance Web Designer | Website Design Company Bognor Regis | Web Site Design Chichester | Web Hosting Review | Tutorials
Core Media Design Ltd is registered in England No 6557241 Suite B, 29 Harley Street, London, W1G 9QR | VAT Number: GB 930 8084 29
© Web Site Design Company - Core Media Design Ltd 2004-2008