If your sprites are a menu or are important data then you should use the image replacement technique mentioned in that link above. If the images are just decoration then you can just apply them to the background of a suitably sized element. You will of course need to add classes to all these elements so that you can change the background-position accordingly. If all the images are the same size then there is no need to add the dimensions in every rule - just declare them once on the main element.
Note that in your example you have the main image in the list element here:
#container li{}
That will means that you cannot over-ride the background position with a simple class because the id will win out. You will need equal or greater weight to win out.
e.g.
#container li.sprite-nav_contact_up{}
If the above is for a clickable menu then you should really be applying the images to the anchor anyway (as shown in my first snippet).
Simply remove the <img> elements from your anchor tags and replace them with actual readable text then use text-indent on #container li selector to hide it, of course that is a very simply solution to hiding the text but I don’t have the time tonight to explain the correct solution.
Once you have done that simply add the above classes to there respective anchor elements and you should be good to go.
No you can’t do that as all you are doing is applying a background to an image and the image will cover any background up (you can actually apply a background to an image but is too complicated to explain here and not the right way anyway).
Remove the images and use the classes and html as shown in my code above.
Post a link to your actual tab image and I’ll show a working example.
(You could actually just use border-radius and real text for ie9+ instead of images anyway.)
Yes it could work but you would have to size the image to fit the sprite size but if you are doing that then you adding an extra image request where none is needed if you do it the correct way.
I also want to use Sprites for my site logo and a few other areas. Is this going to affect things since everything is done using li?
It makes no difference what element you use as the technique is the same. Lists are used for navigation because they are a list of things and indeed bare anchors next to each other is bad for accessibility anyway. However you can apply the technique to any element you like within reason.
For a logo you’d just apply the technique to the anchor inside the heading tag - or as I have said a few times now use the image replacement technique I mentioned to provide more accessible content.
My tab image is here: http://www.access-programmers.co.uk/forums/images/custom/csg-50585316f2810.gif[/QUOTE]
Why is there only 1 blue tab? Surely you want blue states available for all the tabs for hover and current page etc?
To make it easier for you to understand it would be beneficial to create the menu on a stand alone page and then you can practice the techniques needed and we can help you with the live version. If you look at the example I gave above it contains the image replacement technique and all the code you need to make this work in an accessible way and can easily be inserted into your structure.
Here’s a working example anyway:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
#container {
margin:0;
padding:0;
list-style:none;
}
#container li {
width: 100px;
height: 30px;
float:left;
text-align:center;
}
#container li a {
height: 30px;
line-height:30px;
float:left;
position:relative;
}
#container li a span {
width: 100px;
height: 30px;
background: url(http://www.access-programmers.co.uk/forums/images/custom/csg-50585316f2810.gif) no-repeat top left;
position:absolute;
left:0;
top:0;
}
#container li a.sprite-nav_contact_up span{ background-position: 0 0 }
#container li a.sprite-nav_forum_down span{ background-position: 0 -80px }
#container li a.sprite-nav_home_up span{
background-position: 0 -160px;
width: 99px
}
#container li a.sprite-nav_learning_up span{ background-position: 0 -240px }
#container li a.sprite-nav_products_up span{ background-position: 0 -320px }
#container li a.sprite-nav_services_up span{ background-position: 0 -400px }
</style>
</head>
<body>
<ul id="container">
<li><a class="sprite-nav_contact_up" href="#">Contact<span></span></a></li>
<li><a class="sprite-nav_forum_down" href="#">Forum<span></span></a></li>
<li><a class="sprite-nav_learning_up" href="#">Learning<span></span></a></li>
<li><a class="sprite-nav_products_up" href="#">Products<span></span></a></li>
<li><a class="sprite-nav_services_up" href="#">Services<span></span></a></li>
</ul>
</body>
</html>
Thanks Paul, I will have a look at what you wrote. The reason I only have one blue tab is that there are no hover states. Also, the Sprites are only to be used on the forum, rather than the rest of the site. The idea is to reduce the number of http requests when the forum pages load and so the sprites are for performance reasons only.
That worked nicely, thank you Paul. I will see if I can work out how to do it for the logo too. Its not a list of tabs but rather an individual item, so not sure what to do.
<h1 class="logo"><a href="#">Logo text goes here<span></span></a></h1>
/* image replacement for logo image */
.logo, .logo a, .logo span{
width:272px;/* the width of your image */
height:122px;/* the height of your image */
text-decoration:none;
float:left;
position:relative;
overflow:hidden;
margin:0;
cursor:pointer;
}
.logo span{
position:absolute;
left:0;
top:0;
background: url(images/logo.png) no-repeat 0 0;/* adjust the positions to match the sprite position*/
}