I'm playing with 3 images. and it's making me dizzy. What I want is when a tab is active it will change the background-image.
I have this code right now in my html:
div id="promo-nav-wrapper">
<ul>
<li id="active">
</li>
<li>
</li>
</ul>
</div>
My CSS
#promo-nav-wrapper {
background: url("http://imageshack.us/photo/my-images/580/menubackground.png/");
background-repeat: repeat-x;
width: 100%;
height: 82px;
}
#promo-nav-wrapper ul {
text-align: center;
}
#promo-nav-wrapper ul li {
display: inline-block;
margin-top: 20px;
}
#promo-nav-wrapper ul li a {
height:53px;
width:41px;
display:block;
text-decoration: none;
background-repeat: no-repeat;
text-shadow: none;
}
a.promo-call{
background-image:url("http://imageshack.us/photo/my-images/861/callicon2.png/");
z-index: 3;
margin-right: 10px;
}
a.promo-text {
background-image:url("http://imageshack.us/photo/my-images/807/texticon2.png/");
margin-left: 10px;
margin-right: 10px;
}
/*this don't work*/
#promo-nav-wrapper li#active a {
background-image: url('http://imageshack.us/photo/my-images/694/selectediconbackground.png/') no-repeat!important;
height: 76px;
width: 64px;
/*background: blue;*/
}
My problem is I can't snip the image when an li is active, it doesn't show the background. T_T. Say like this
#active a{ background-image: url('selected_icon_background.png');
....
}
Acc to what i am understanding after reading the problem -
First of all in fiddle: http://jsfiddle.net/si_dean_ako/kyYWU/ images are not loading and secondly the css rule is wrong on #promo-nav-wrapper li#active a
Try to remove
#promo-nav-wrapper li#active a {
background-image: url('http://imageshack.us/photo/my-images/694/selectediconbackground.png/') no-repeat!important;
height: 76px;
width: 64px;
/*background: blue;*/
}
and add like this
#promo-nav-wrapper li#active {
background: url('http://imageshack.us/photo/my-images/694/selectediconbackground.png/') no-repeat!important;
height: 76px;
width: 64px;
}
When we want to write multiple value (shorthand properties) at that time we have to use background property of css and in above fiddle background-image is used and on that the url('image path'), no-repeat, !important; is applied. And background-image always take the path of the image.
So it better to use like that background: url('http://imageshack.us/photo/my-images/694/selectediconbackground.png/') no-repeat!important;
See updated fiddle: http://jsfiddle.net/kyYWU/2/ in this fiddle active image is showing behind the .
See the output generated on my local machine:
Try this
#promo-nav-wrapper #active a { background-image: url('selected_icon_background.png');
....
}
at the end of your stylesheet
Related
I have a spaninside the anchorelement.
All I want is:
1) Have a width for the anchor text, so that it does not overlap on the span element.
2) The span element should be aligned to the first line of the anchor text
3) The span element to be right of the anchor text
a {
width: 147px;
display: inline-block!important;
}
span.expand {
background: url(https://cdn2.iconfinder.com/data/icons/deadsimple/youtube.gif) no-repeat right center;
text-decoration: none !important;
padding-right: 14px;
margin-left: 100px;
}
<a href="#">
Enrollment to communication skills
<span class="expand"></span>
</a>
I have no other choice but to use span inside anchor, even though it is not a recommended.
Not sure what you want to achieve, but based on what you have mentioned, here is the solution.
WORKING DEMO
The CSS Change:
a {
width: auto;
display: inline-block!important;
}
span.expand {
background: url(https://cdn2.iconfinder.com/data/icons/deadsimple/youtube.gif) no-repeat right center;
text-decoration: none !important;
background-position: top right;
padding: 11px;
float: right;
}
Edited CSS Change:
If the width needs to exist without setting it to auto, below is the code.
WORKING DEMO WITHOUT AUTO WIDTH
a {
width: 135px;
display: inline-block;
position: relative;
}
span.expand {
background: url(https://cdn2.iconfinder.com/data/icons/deadsimple/youtube.gif) no-repeat right center;
text-decoration: none !important;
background-position: 0 0px;
padding: 11px;
position: absolute;
z-index: 1;
top: 1px;
right: 17px;
}
Hope this helps.
You can do this in a few ways. One way is by moving the <span> outside the anchor. Another way is by adding the background image to the anchor and remove the span.
Both ways are visible in this JSFiddle: https://jsfiddle.net/xpoa06x8/
<a href="#">
<!-- using a backgroundimage -->
Enrollment to communication skills
</a>
<br/><br/><br/><br/><br/>
<a class="href" href="#">
<!-- using an extra span -->
Enrollment to communication skills
</a>
<span class="extend"></span>
CSS:
a {
width: 146px;
display: inline-block!important;
background-image: url(https://cdn2.iconfinder.com/data/icons/deadsimple/youtube.gif);
background-repeat: no-repeat;
background-position: 120px 0px;
}
/* Second example */
.href{
background-image: none;
float:left;
display:block !important;
}
.extend{
display:block;
float:left;
background-image: url(https://cdn2.iconfinder.com/data/icons/deadsimple/youtube.gif);
background-repeat: no-repeat;
width:15px;
height:15px;
}
Working fiddle
I added :after pseudo-element instead .extend with position:absolute;
a {
width: 147px;
display: inline-block!important;
position:relative
}
a:after {
background: url(https://cdn2.iconfinder.com/data/icons/deadsimple/youtube.gif) no-repeat right center;
text-decoration: none !important;
width: 15px;
height: 15px;
vertical-align: baseline;
display: block;
margin-left: 5px;
content: '';
position: absolute;
right: -10px;
top: 0;
}
I have a navigation which holds either text or images for links. I want the image to change on hover, so am using CSS backgrounds inside an empty div. However, I am looking for a way of doing this without using "position: absolute;" as the containing a tag will not expand to fill its dimensions. I would also like to do this without using a transparent placeholder image as I want to find a more elegant solution.
Here's the jsfiddle and the code:
http://jsfiddle.net/urhLs736/1/
<nav id="navigation">
<ul>
<li><a onclick="example1.html">PAGE 1</a></li>
<li><a onclick="example2.html">PAGE 2</a></li>
<li><div id="nav-image"></div></li>
</ul>
</nav>
and for the CSS:
#navigation {
z-index: 1;
background-color: #3A5E90;
color: #FFFFFF;
text-align: center;
width: 100%;
padding-top: 5px;
padding-bottom: 5px;
}
#navigation.fixed {
position: fixed;
top: 0px;
}
#navigation li {
display: inline;
}
#navigation a {
cursor: pointer;
padding-left: 3.5%;
padding-right: 3.5%;
color: #FFFFFF;
text-decoration: none;
}
#navigation a:hover {
background: #FFFFFF;
color: #3A5E90;
padding-top: 2%;
padding-bottom: 2%;
}
#nav-image {
display: inline;
background: url('https://avatars1.githubusercontent.com/u/3081095?v=2&s=72') no-repeat;
background-size: 100%;
margin-bottom: -6px;
height: 24px;
width: 100px;
}
#nav-image:hover {
height: 24px;
width: 100px;
background: url('https://avatars3.githubusercontent.com/u/5278945?v=2&s=96') no-repeat;
background-size: 100%;
}
I think that your layout will work as is with a minor adjustment to the CSS:
#nav-image {
display: inline-block;
background: url('https://avatars1.githubusercontent.com/u/3081095?v=2&s=72') no-repeat;
background-size: 100%;
margin-bottom: -6px;
height: 24px;
width: 100px;
border: 1px dotted yellow;
}
If you use display: inline-block, the div will take up the specified width and height and the background image will be visible, and the hover effect will work as you expect.
See demo: http://jsfiddle.net/audetwebdesign/9fd1dxn4/
In order to achieve this, you have to change both your HTML and your CSS.
First, your HTML should go like this:
<nav id="navigation">
<ul>
<li><a onclick="example1.html">PAGE 1</a>
</li>
<li><a onclick="example2.html">PAGE 2</a>
</li>
<li id="nav-image">PAGE 3
</li>
</ul>
</nav>
Note that I have added some content in your empty div. If you have an empty <li>, you'll have no background at all (just like your example) since you have a 0x0 pixels li element. I have added some content so the li displays as a general rule, which anyways won't be necessary after you see the CSS, which is the following:
#navigation {
z-index: 1;
background-color: #3A5E90;
color: #FFFFFF;
text-align: center;
width: 100%;
padding-top: 5px;
padding-bottom: 5px;
}
#navigation.fixed {
position: fixed;
top: 0px;
}
#navigation li {
display: inline-block;
height: 24px;
width: 100px;
padding-left: 3.5%;
padding-right: 3.5%;
}
#navigation ul li a {
cursor: pointer;
padding:2% 3.5%;
color: #FFFFFF;
text-decoration: none;
display:block;
height: 24px;
width: 100px;
}
#navigation a:hover {
background: #FFFFFF;
color: #3A5E90;
}
#nav-image {
background: url('https://avatars1.githubusercontent.com/u/3081095?v=2&s=72') no-repeat;
background-size: 100%;
}
#nav-image:hover {
background: url('https://avatars3.githubusercontent.com/u/5278945?v=2&s=96') no-repeat;
background-size: 100%;
}
#nav-image:hover a {
background:transparent
}
OK, now you see I have made some changes and added width and height to the li (the same you had in your sample, but you can change it to anything you want). Now, if you delete the content inside the empty DIV, you'll see how the rendering changes. While it's very easy to solve, I'll leave it to you so you can practice and understand how the whole positioning and display thing works. Also, you can add paddings, margins, et
Here you have a fiddle so you can see it in action and play around
I have a perfectly working html/css sprite nav. When each link in its unordered list is hovered over, the background sprite image changes as expected, for that specific item. I want to make the entire nav sprite move position based on which linked is hovered over, so that the effect for any one link changes the background for the entire unordered list.
Reason: the edges of each inline are not vertical, they are at a 45 degree angle, so changing a traditional block background doesn't work so well. Changing the entire background will accomodate and work perfectly.
Code in use currently:
CSS:
#nav {
position: relative;
float: right;
background: url('../gfx/nav.gif');
width: 498px;
height: 23px;
margin: 110px 2px 0 0;
border: 0;
padding: 0;
}
#nav li {
position: absolute;
top: 0;
margin: 0;
border: 0;
padding: 0;
list-style: none;
}
#nav li, #nav a {
height: 23px;
display: block;
}
#nav span {
display: none;
}
#n1 {
left: 0;
width: 73px;
}
#n2 {
left: 74px;
width: 94px;
}
#n3 {
left: 167px;
width: 124px;
}
#n4 {
left: 292px;
width: 82px;
}
#n5 {
left: 375px;
width: 125px;
}
#n1 a:hover {
background: transparent url('../gfx/nav.gif') 0 -23px no-repeat;
}
#n2 a:hover {
background: transparent url('../gfx/nav.gif') -74px -46px no-repeat;
}
#n3 a:hover {
background: transparent url('../gfx/nav.gif') -167px -69px no-repeat;
}
#n4 a:hover {
background: transparent url('../gfx/nav.gif') -292px -92px no-repeat;
}
#n5 a:hover {
background: transparent url('../gfx/nav.gif') -375px -115px no-repeat;
}
And the HTML:
<ul id="nav">
<li id="n1"><span>Home</span></li>
<li id="n2"><span>About</span></li>
<li id="n3"><span>Programmes</span></li>
<li id="n4"><span>Grants</span></li>
<li id="n5"><span>Publications</span></li>
</ul>
So how do I make the background sprite shift for the entire nav, vertically different amounts depending on which link is hovered over? Assuming this is possible without JS of any sort.
Thanks. :)
PS - As requested, current system presented on a jsfiddle - http://jsfiddle.net/NhL7E/
Note how the edges of each coloured link don't completely change on the hover - hence wanting to move the entire UL background as opposed to individual LI backgrounds.
ADDED AFTER MARKED AS ANSWERED
Thank you to Shive, Jcubed and Barry Dowd. All three responses were completely acceptable and each one of them achieved the target result. However the primary question still is truly unanswered - as no one has suggested an HTML/CSS only method to shift the entire background image sprite different increments, based on which link is hovered on.
If I could mark all three answers as accepted, I would. I chose to mark Barry's as this is the answer that was easiest to implement on my project. It required no graphical modification so I was able to use the existing sprite image. All answers had benefits over the others - less http requests by use of jQuery, smaller nav sprite by another and no JS/jQuery required... etc.
Once again thank you all - your responses, jsfiddles, answers... your time and effort in helping me is greatly appreciated!
Cas
Here you go:
You give each li a left and right margin of -4px (#n1 only add to right margin, #n5 only add to left margin)
You then need to add 8px to each li width (4px on the first and last)
Then add 4px to the left position of the li background image so -74px becomes -70px (leave the first as 0)
New CSS
#nav {
position: relative;
float: right;
background: url('http://i59.tinypic.com/25tapoi.jpg');
width: 498px;
height: 23px;
margin: 110px 2px 0 0;
border: 0;
padding: 0;
}
#nav li {
position: absolute;
top: 0;
margin: 0 -4px;
border: 0;
padding: 0 0px;
list-style: none;
}
#nav li#n1 {
margin: 0 -4px 0 0;
}
#nav li, #nav a {
height: 23px;
display: block;
}
#nav span {
display: none;
}
#n1 {
left: 0;
width: 77px;
}
#n2 {
left: 74px;
width: 102px;
}
#n3 {
left: 167px;
width: 132px;
}
#n4 {
left: 292px;
width: 90px;
}
#n5 {
left: 375px;
width: 129px;
}
#n1 a:hover {
background: transparent url('http://i59.tinypic.com/25tapoi.jpg') 0 -23px no-repeat;
}
#n2 a:hover {
background: transparent url('http://i59.tinypic.com/25tapoi.jpg') -70px -46px no-repeat;
}
#n3 a:hover {
background: transparent url('http://i59.tinypic.com/25tapoi.jpg') -163px -69px no-repeat;
}
#n4 a:hover {
background: transparent url('http://i59.tinypic.com/25tapoi.jpg') -288px -92px no-repeat;
}
#n5 a:hover {
background: transparent url('http://i59.tinypic.com/25tapoi.jpg') -371px -115px no-repeat;
}
JSFiddle http://jsfiddle.net/NhL7E/12/
2 Solutions:
First, you can change your image so that it has extra space between each section of the navigation and has a transparent background. http://i60.tinypic.com/sq3xjn.png
This allows you to make each li have its own background that changes on its own without it effecting how the other parts oft he nav look.
#nav {
position: relative;
float: right;
/*background: url('http://i59.tinypic.com/25tapoi.jpg');*/
width: 498px;
height: 23px;
margin: 110px 2px 0 0;
border: 0;
padding: 0;
}
#nav li {
position: absolute;
top: 0;
margin: 0;
border: 0;
padding: 0;
list-style: none;
}
#nav li, #nav a {
height: 23px;
display: block;
}
#nav span {
display: none;
}
#n1 {
left: 0;
width: 73px;
}
#n2 {
left: 71px;
width: 94px;
}
#n3 {
left: 167px;
width: 124px;
}
#n4 {
left: 292px;
width: 82px;
}
#n5 {
left: 375px;
width: 125px;
}
#n1 a{
width:77px;
background: transparent url(http://i60.tinypic.com/sq3xjn.png) 0 0 no-repeat;
}
#n1 a:hover{
background-position:0 -23px;
}
#n2 a{
width:102px;
background: transparent url(http://i60.tinypic.com/sq3xjn.png) -77px 0 no-repeat;
}
#n2 a:hover{
background-position:-77px -23px;
}
#n3 a{
width:131px;
background: transparent url(http://i60.tinypic.com/sq3xjn.png) -179px 0 no-repeat;
}
#n3 a:hover{
background-position:-179px -23px;
}
#n4 a{
width:89px;
background: transparent url(http://i60.tinypic.com/sq3xjn.png) -310px 0 no-repeat;
}
#n4 a:hover{
background-position:-310px -23px;
}
#n5 a{
width:128px;
background: transparent url(http://i60.tinypic.com/sq3xjn.png) -399px 0 no-repeat;
}
#n5 a:hover{
background-position:-399px -23px;
}
http://jsfiddle.net/gh6Aq/
The other options is to nest your li's in such a way that the element with the background image is the deepest element, then you can use hover states to change it's style.
Example:
<ul id="nav">
<li id="n1"><span>Home</span>
<li id="n2"><span>About</span>
<li id="n3"><span>Programmes</span>
<li id="n4"><span>Grants</span>
<li id="n5"><span>Publications</span>
<div class='backgroundElement'></div>
</li>
</li>
</li>
</li>
</li>
</ul>
Then:
#n1:hover .backgroundElement{
background: transparent url('http://i59.tinypic.com/25tapoi.jpg') 0 -23px no-repeat;
}
However this method basically kills the underlying structure of your navigation, so I would recommend using the first option.
As continued from comments, I am posting a jQuery(JavaScript) based solution because, the exact problem is that, we have background image on the ul and we are hovering over ul>li>a and there is no parent selector in CSS to manipulate parent elements's CSS property(baclground image of ul).
However using jQuery we can easily achieve it. So the jQuery code will be something like this.
$('#nav >li>a').on('mouseenter', function() {
var id = $(this).parent().attr('id');
switch (id) {
case 'n1':
$(this).parent().parent().css({
'background-position': '0 -23px'
});
break;
case 'n2':
$(this).parent().parent().css({
'background-position': '-0 -46px'
});
break;
case 'n3':
$(this).parent().parent().css({
'background-position': '0 -69px'
});
break;
case 'n4':
$(this).parent().parent().css({
'background-position': '0 -92px'
});
break;
case 'n5':
$(this).parent().parent().css({
'background-position': '0 -115px'
});
break;
}
}).on('mouseout', function() {
$(this).parent().parent().css({
'background-position': '0 0'
});
});
Here the benefit we get is that the background image is now loaded only once and not 5 times because each time someone hovered over the image previously was getting loaded again.
Here we just find the ID of the hovered element and re-position the ul's background image accordingly.
You will also not need the additional code for :hover in the CSS, so the CSS code will be something like this.
#nav {
position: relative;
float: right;
background: url('http://i59.tinypic.com/25tapoi.jpg');
width: 498px;
height: 23px;
margin: 110px 2px 0 0;
border: 0;
padding: 0;
}
#nav li {
position: absolute;
top: 0;
margin: 0;
border: 0;
padding: 0;
list-style: none;
}
#nav li, #nav a {
height: 23px;
display: block;
}
#nav span {
display: none;
}
#n1 {
left: 0;
width: 73px;
}
#n2 {
left: 74px;
width: 94px;
}
#n3 {
left: 167px;
width: 124px;
}
#n4 {
left: 292px;
width: 82px;
}
#n5 {
left: 375px;
width: 125px;
}
JSFiddle Sample
I have a list that uses pictures in the navigation without any text. It appears that they have gone to the background and I am having difficulty trying to fix it. I want to be be to click the images and for them to bring me to another page. I am pretty new to this. I was using CSS to do this.
<div id="navigation">
<ol>
<li class="news">news</li>
<li class="review">Review</li>
<li class="contact">Contact</li>
<li class="photos">Photos</li>
</ol>
</div>
and here is my CSS:
#navigation li {
float: left;
height: 30px;
margin: 0 0px 0 0;
text-indent: -9999px;}
#navigation li.news {
background: url( "news.png" );
display:block;
width: 308px;
height: 80px;
list-style:none;}
#navigation li.review {
background: url( "review.png" );
width: 308px;
height: 80px;
list-style:none;}
#navigation li.contact
{
background: url( "contact.png" );
width: 308px;
height: 80px;
list-style:none;}
#navigation li.photos
{
background: url( "photo.png" );
width: 308px;
height: 80px;
list-style:none;}
Any help would be appreciated.
text-indent is moving the <a> tags off the page because <a> is display: inline by default. It is treated sort of like text in this case and gets indented. You could do this instead:
#navigation li {
float: left;
height: 30px;
margin: 0 0px 0 0;
}
#navigation a {
display: block;
text-indent: -9999px;
height: 100%;
}
Though I'm not sure why you want the text there at all.
Check out this demo: http://jsbin.com/ejeGufa/2/edit
You can tell that the <a> tags are now in the correct place because the cursor changes (or you can inspect the element in the dev tools).
By the way, you can avoid repeating code by doing this:
#navigation li {
list-style: none;
float: left;
margin: 0;
display:block;
width: 308px;
height: 80px;
}
#navigation a {
display: block;
text-indent: -9999px;
height: 100%;
}
#navigation li.news {
background: red;
}
#navigation li.review {
background: blue;
}
Something like this should work. Adjust accordingly.
#navigation a {
display: inline-block; //or block
width: 308px; //adjust accordingly
height: 80px; //adjust accordingly
}
I need to make a css navigation according to the following style:
DESIRED LOOK
Below are the designs that I have done:-
1)Exhibit A - made using sprites
Note: Ignore the arrangement of the menu items
Pros: works well and has the desired look
Cons: if there is a need to add another menu item, another image must be manually made for that particular menu item. ie. not extensible
2)Exhibit B
Pros: very extensible. If another menu item must be added, new extra images need not be made. Only the menu name need to be typed in the html code.
Cons: the hover effect is not the same as the desired look.
My Requirement
Is to use Exhibit B, along with the hover effect from Exhibit A, but without having to add extra images when a menu item is created(this is what happens in Exhibit A, although it has the desired hover effect).
My approach:
Start working with Exhibit B
For the hover effect in the case of a single menu item use 3 images
a)left most edge
b)repeating slice of the middle area
c)right most edge
Is this correct ?
Is this possible ?
Is there a better way? A link to a tute would be fine.
Thanks
1] css code for Exhibit A
#charset "UTF-8";
* {
margin:0;
padding:0;
list-style: none;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
img {
border: none;
}
.clear {
clear:both;
}
.nav-container {
width: 960px;
}
#navMenu{
display: inline;
margin: 0;
padding: 0px;
position: relative;
z-index: 5;
}
#navMenu li{
float: left;
display: inline;
}
#navMenu li.navRepeat{
float: left;
display: inline;
background-image:url("../images/navigation_repeat.gif");
width:425px;
height:40px;
}
#navMenu li.navRepeatEnd{
float: right;
display: inline;
background-image:url("../images/navigation_repeat_end.gif");
width:1px;
height:40px;
}
a.navReservations{
display:block;
float:left;
width:89px;
height:40px;
background-repeat:no-repeat;
background: url("../images/reservations.gif")
}
a.navReservations:hover{
background: url("../images/reservations.gif") 0 40px;
}
a.navRentals{
display:block;
float:left;
width:62px;
height:40px;
background-repeat:no-repeat;
background: url("../images/rentals.gif")
}
a .navReservations {
float: left;
display: inline;
height: 100px;
width: 400px;
}
a.navRentals:hover{
background: url("../images/rentals.gif") 0 40px;
}
a.navTariffs{
display:block;
float:left;
width:59px;
height:40px;
background-repeat:no-repeat;
background: url("../images/tariffs.gif")
}
a.navTariffs:hover{
background: url("../images/tariffs.gif") 0 40px;
}
a.navFleet{
display:block;
float:left;
width:64px;
height:40px;
background-repeat:no-repeat;
background: url("../images/fleet.gif")
}
a.navFleet:hover{
background: url("../images/fleet.gif") 0 40px;
}
a.navTools{
display:block;
float:left;
width:56px;
height:40px;
background-repeat:no-repeat;
background: url("../images/tools.gif")
}
a.navTools:hover{
background: url("../images/tools.gif") 0 40px;
}
a.navReports{
display:block;
float:left;
width:71px;
height:40px;
background-repeat:no-repeat;
background: url("../images/reports.gif")
}
a.navReports:hover{
background: url("../images/reports.gif") 0 40px;
}
a.navSystem-Management{
display:block;
float:left;
width:133px;
height:40px;
background-repeat:no-repeat;
background: url("../images/system_management.gif")
}
a.navSystem-Management:hover{
background: url("../images/system_management.gif") 0 40px;
}
2] css code for Exhibit B
#navigation {
width: 959px;
height: 36px;
margin: 0;
padding: 0;
background-image: url(images/navigation-bg.gif);
background-repeat: no-repeat;
background-position: left top;
border: 1px solid #CCC;
}
#navigation ul {
list-style: none;
margin: 0;
padding: 0;
}
#navigation ul li {
display: inline;
margin: 0px;
}
#navigation ul li a {
height:27px;
display: block;
float: left;
color: #000;
text-decoration: none;
font-family: Arial;
font-size: 12px;
font-weight: bold;
background-image: url(images/navigation-separator.gif);
background-repeat: no-repeat;
background-position: right center;
padding-top: 6px;
padding-right: 15px;
padding-left: 15px;
vertical-align: 10%;
padding-bottom: 4px;
}
#navigation ul li a:hover {
color:#FFF;
background-image: url(images/navigation-hover.gif);
background-repeat: repeat-x;
background-position: left top;
}
#navigation ul li#active a {
color:#363636;
background: url(images/navigation-hover.png) repeat-x left top;
}
Well you technically only need two sprites, a wide left + body of the tab and a right side. By wide, I mean, 400px or some arbitrarily wide size that you don't anticipate hitting. You're trading a kb for easy of use. You can accomplish this by having markup like:
<ul class="list">
<li>Text</li>
</ul>
with css like:
ul.list
{
list-style-type: none;
margin: 0;
}
ul.list li
{
float: left;
background: url(leftpluswide.png) top left no-repeat;
}
ul.list li a
{
background: url(right.png) top right no-repeat;
}
The only caveat is that since the right.png will be overlapping the background on the li, you'll need to make sure that it doesn't have any transparency.
Also for completeness sake, you might need to apply a height to the li and the a (which will potentially require a display:inline-block or a line-height to take it) to make everything line up well.