benjaminmorgan Posted October 2, 2011 Report 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
Andrea Posted October 2, 2011 Report Posted October 2, 2011 http://www.csstutorial.net/2010/03/how-to-use-css-to-display-bullet-images/ Quote
benjaminmorgan Posted October 2, 2011 Author Report Posted October 2, 2011 That isn't the problem. I am trying to figure out how to use that sprite. Quote
Andrea Posted October 2, 2011 Report Posted October 2, 2011 Ok - sorry, know nothing about sprites. Quote
falkencreative Posted October 2, 2011 Report 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
benjaminmorgan Posted October 2, 2011 Author Report 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
benjaminmorgan Posted October 2, 2011 Author Report Posted October 2, 2011 It works with just the single image but not the sprite. UGGHH!. I just hope this gets figured out. Quote
falkencreative Posted October 2, 2011 Report Posted October 2, 2011 Errr, sorry, my mistake. You need to use -120px, not 120px. Quote
benjaminmorgan Posted October 2, 2011 Author Report Posted October 2, 2011 Still nothing ... GRR Quote
benjaminmorgan Posted October 2, 2011 Author Report Posted October 2, 2011 oops i was using background-url it is working now. Thanks Quote
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.