Help with CSS image sprites

Discussion in 'Web Design and Development' started by iMasterWeb, Oct 26, 2009.

  1. iMasterWeb macrumors regular

    Joined:
    Mar 15, 2009
    #1
    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/
     

    Attached Files:

  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    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.
     
  3. iMasterWeb thread starter macrumors regular

    Joined:
    Mar 15, 2009
    #3
    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?
     
  4. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #4
    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;}
    
     
  5. iMasterWeb thread starter macrumors regular

    Joined:
    Mar 15, 2009

Share This Page