Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    May 2005
    Location
    Tenneessee
    Posts
    29
    Thanks
    1
    Thanked 0 Times in 0 Posts

    CSS sprites, is this even possible??

    First off I don't even know this is possible, I am trying to work with sprites for the first time, so I might be way off.

    http://paulchinetti.com/1newpaul/ImageSlide.html

    Say I want to have 1-6 red and then 7-9 green and 10-20 yellow to represent different areas of work.

    Is that even possible with sprites or am I going about it in the wrong way all together. I've read a few articles and it seems like this would be a good idea to go about it but I can't get it to work like the articles say.

  • #2
    New Coder
    Join Date
    Jan 2009
    Posts
    58
    Thanks
    4
    Thanked 3 Times in 3 Posts
    I think ive found your problem....

    in your css (i did some digging round your code...)
    you have the following

    Code:
    /* #container li {
       background: url(images/sprite1.png) no-repeat top left;
    } */
    
    .sprite-blue { background-position: 0 -10px; } 
    .sprite-brown { background-position: 0 -82px; } 
    .sprite-green { background-position: 0 -134px; } 
    .sprite-pink { background-position: 0 -186px; } 
    .sprite-red { background-position: 0 -238px; } 
    .sprite-yellow { background-position: 0 -290px; }
    but in yout html, you dont have a
    Code:
    <div id='container'></div>
    so you are never going to get it to work... i think what you want to do is change your css to..

    Code:
    #gallery li {
       background: url(images/sprite1.png) no-repeat top left;
    }
    the only other time you reference your sprite image is in

    Code:
    .stripTransmitter ul { /* the auto-generated set of links */
    	position: relative;
    	list-style-type: none;
    	background: url(images/sprite1.png) no-repeat top left;
    }

    but i dont think you ever reference that in your html.. but it might be in the javascript somewhere.. i didnt check...

    hope that helps a bit...


    also im not sure that

    Code:
    <a class="sprite-green">
    is the best way to call it.. i think you may need to change it so that eachi <li> defines the class... but im not sure really.. just thaught id point it out...
    Last edited by CalumK; 05-05-2009 at 07:53 AM. Reason: also...

  • #3
    New Coder
    Join Date
    May 2005
    Location
    Tenneessee
    Posts
    29
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks for the help, I can't seem to get it to work at all. I keep changing things and nothing changes, I guess sprites are above me, that sucks.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •