Help with CSS image sprites

iMasterWeb · Oct 26, 2009

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??

Code:

#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

I believe the issue is the,

Code:

#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

Thanks and here's the HTML

Code:

<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

OK, that helped. One big thing, you forgot the file extension to the background image.

Code:

background-image: url("Images/navigation_bar_images[B][COLOR="Red"].jpg[/COLOR][/B]");

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:

Code:

#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

THANK YOU! It works perfectly!

Search

Search

Help with CSS image sprites

iMasterWeb

macrumors regular

Attachments

angelwatt

Moderator emeritus

iMasterWeb

macrumors regular

angelwatt

Moderator emeritus

iMasterWeb

macrumors regular

Our Staff