benjaminmorgan Posted October 2, 2011 Report Share Posted October 2, 2011 http://img836.imageshack.us/img836/1040/sprites.gif is the link to my sprite. I am trying to get the 3rd one down to appear on an unordered list instead of bullets. Can someone please go through the steps? I have done it before but it has been so long and anything i do seems to screw it up. I've tried looking in several books and online tutorials also. <ul> <li>Example 1</li> <li>Example 2</li> <li>Example 3</li> </ul> what could the css be to get this to work? Quote Link to comment Share on other sites More sharing options...
Andrea Posted October 2, 2011 Report Share Posted October 2, 2011 http://www.csstutorial.net/2010/03/how-to-use-css-to-display-bullet-images/ Quote Link to comment Share on other sites More sharing options...
benjaminmorgan Posted October 2, 2011 Author Report Share Posted October 2, 2011 That isn't the problem. I am trying to figure out how to use that sprite. Quote Link to comment Share on other sites More sharing options...
Andrea Posted October 2, 2011 Report Share Posted October 2, 2011 Ok - sorry, know nothing about sprites. Quote Link to comment Share on other sites More sharing options...
falkencreative Posted October 2, 2011 Report Share Posted October 2, 2011 It's pretty close to the link that Andrea posted -- you need to remove the default bullets: ul { list-style:none; } then add a background image to the list items: li { background: url(sprites.gif) no-repeat 0 0; } The first "0" represents the x position (horizontal), and the second represents the y position (vertical), so you'd probably want to use "0 120px". Quote Link to comment Share on other sites More sharing options...
benjaminmorgan Posted October 2, 2011 Author Report Share Posted October 2, 2011 This doesn't work. When i take no-repeat out of it it will show the 4th one repeat horizontally. when i put the no-repeat in it doesn't show at all. <html> <head> <style type="text/css"> ul { list-style:none; } li { background: url(sprites.gif)no-repeat 0 120px; } </style> </head> <body> <ul> <li>Example 1</li> <li>Example 2</li> <li>Example 3</li> </ul> </body> </html> Quote Link to comment Share on other sites More sharing options...
benjaminmorgan Posted October 2, 2011 Author Report Share Posted October 2, 2011 It works with just the single image but not the sprite. UGGHH!. I just hope this gets figured out. Quote Link to comment Share on other sites More sharing options...
falkencreative Posted October 2, 2011 Report Share Posted October 2, 2011 Errr, sorry, my mistake. You need to use -120px, not 120px. Quote Link to comment Share on other sites More sharing options...
benjaminmorgan Posted October 2, 2011 Author Report Share Posted October 2, 2011 Still nothing ... GRR Quote Link to comment Share on other sites More sharing options...
benjaminmorgan Posted October 2, 2011 Author Report Share Posted October 2, 2011 oops i was using background-url it is working now. Thanks Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.