PDA

View Full Version : Help with CSS image sprites



iMasterWeb
Oct 26, 2009, 07:06 PM
Hi, I've looked through gobs of tutorials, but they all differ slightly. I understand the concept of image sprites, but I just can't get them to work. Here's my CSS, any obvious mistakes?? #navbar li {
list-style: none;
}
#navbar li a {
background-image: url("Images/navigation_bar_images");
width: 420px;
height: 75px;
margin: 0;
padding: 0;
float: left;
}

#navbar01, #navbar02, #navbar03, #navbar04 {
width: 100px;
}

#navbar01 li a {background-position: 0px 0px;}
#navbar01 li a:hover {background-position: 0px -75px;}

#navbar02 li a {background-position: 100px 0px}
#navbar02 li a:hover {background-position: 100px -75px;}

#navbar03 li a {background-position: 200px 0px}
#navbar03 li a:hover {background-position: 200px -75px;}

#navbar03 li a {background-position: 300px 0px}
#navbar03 li a:hover {background-position: 300px -75px;}



The image I'm using is attached. Each bar is 75px high and 420 px wide. Each "button" is 100px wide.

P.S. My main reference tutorial can be found here: http://css-tricks.com/css-sprites/


angelwatt
Oct 26, 2009, 10:13 PM
I believe the issue is the,
#navbar li a {
...
width: 420px;
...
}
I think you want it to be 100px; The 420px should possibly be applied to the #navbar {} section. It's hard to say for certain without seeing the HTML as well. Don't suppose you have this posted somewhere we can take a look at it? It would make it much easier to diagnose. Nice looking sprite by the way.
iMasterWeb
Oct 26, 2009, 10:15 PM
Thanks and here's the HTML <html>
<head>
<LINK REL=StyleSheet HREF="stylesheet.css" TYPE="text/css" MEDIA=screen>
<title>About iMasterWeb</title>
</head>
<body>
<div id = page>
<div id = content_wrapper>
<div id = header>
<div id = logo>
<img src="Images/logo.jpg" alt="Welcome to iMasterWeb!"/>
</div>
</div>
<div id = navigation>
<ul id="navbar">
<li id="navbar01"><a href="http://imasterweb.net"><span>Home</span></a></li>
<li id="navbar02"><a href="http://imasterweb.net"><span>Blog</span></a></li>
<li id="navbar03"><a href="http://imasterweb.net"><span>Forums</span></a></li>
<li id="navbar04"><a href="http://imasterweb.net"><span>About</span></a></li>
</ul>
</div>
<div id = main_content>
</div>
</div>
</div>
</body>
</html>

Obviously, the CSS posted above is not ALL of my CSS, just the parts relating to the sprite. Do you need to see all of it?
angelwatt
Oct 26, 2009, 11:00 PM
OK, that helped. One big thing, you forgot the file extension to the background image.
background-image: url("Images/navigation_bar_images.jpg");

I also moved the float from the link to the li. I redid the selectors for the individual tabs. You had #navbar01 li a, which looks for a li inside an element that has an id of "navbar01," but the li was the ones with that id. Therefore, it didn't match up. I also made the link a block element so it works correctly. Finally, the last big change was the x/y positioning. You have extra graphic room on the left so that needs to be taken into consideration for placement.

Updated CSS:
#navbar li {
list-style: none;
float: left; /*moved from below*/
}
#navbar li a {
display: block; /*new*/
background-image: url("Images/navigation_bar_images.jpg");
width: 100px; /*was=420*/
height: 75px;
margin: 0;
padding: 0;
}
#navbar01, #navbar02, #navbar03, #navbar04 {
width: 100px;
}
#navbar01 a {background-position: -9px 0px;}
#navbar01 a:hover {background-position: -9px -75px;}

#navbar02 a {background-position: 110px 0px}
#navbar02 a:hover {background-position: 110px -75px;}

#navbar03 a {background-position: 211px 0px}
#navbar03 a:hover {background-position: 211px -75px;}

#navbar04 a {background-position: 312px 0px}
#navbar04 a:hover {background-position: 312px -75px;}
iMasterWeb
Oct 26, 2009, 11:14 PM
THANK YOU! It works perfectly!