CSS rounded tabs, resizable tabs, css and images navigation

Resizable Tabs Navigation

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.

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;

}

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.

And that's it - any questions or suggestions - please contact us using our contact page
Written by Web Designer West Sussex - Sebastian Sulinski.

CSS tabs navigation

Tabbed, resizable navigation, css navigation, tabs navigation