CSS Forum

**numbenator** · 11-25-2009, 06:41 AM

HI

I have to design a horizontal navigation as ::

http://quintain-wembleycity.catchdig...mbley-tabs.jpg

I know that i must change the background position of the purple and i have created an image that shows all the different states so on mouse over i can put the purple in place.

However, as i began to develop i realised that the change in state extends past the actual a href parameters i defined.

How do i style this type of navigation up please. Any help would really be appreciated.

I started with the below as an start point::

Code:

<style type="text/css">
<!--

#nav-container {
		width:908px;
		min-height:50px;
		background-image:url(images/navigation/tabs.jpg);
		background-position:top left;
		background-repeat:no-repeat;
}


a.home {
display:block;
width: 110px;
font: bold 13px sans-serif;
/*padding:2px 0 0 10px;*/
color:#333;
background: url(images/navigation/hovers.jpg) 0 50px no-repeat;
text-decoration: none;
min-height:47px;
}
* html a.home  {
		width:110px;
		height:47px;
}
a.home:hover { 
background-position: 0 0px;
color: #FFF;
}

/*
.home a:active {
background-position: 0 -70px;
color:#fff;
}*/
-->
</style>


<body>
	<div id="nav-container">
    <a href="" class="home">&nbsp;</a>
        </div>

</body>

thanks

**racer x** · 11-25-2009, 07:50 PM

This is a good candidate for using sprites instead.
Why?
1. You can make the entire menu bar look as you want for each roll-over state.
2. There is no need to pre-load any images used for roll-over.
3. There is ONE http request for the entire menu rather than at least 9 in your case.

Take a look at these tutorials:
Smashing Magazine
Nettuts
stylemeltdown

**numbenator** · 11-26-2009, 09:35 AM

Hey racer. Thanks for your response.

Could you elaborate on sprites? Im unaware of what it is etc etc.

thanks

**chrishirst** · 11-26-2009, 09:49 AM

CSS Sprites

**numbenator** · 11-26-2009, 10:25 AM

great thanks very much for you input.