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?
Andrea Posted October 2, 2011 Report Posted October 2, 2011 http://www.csstutorial.net/2010/03/how-to-use-css-to-display-bullet-images/
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.
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".
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>
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.
falkencreative Posted October 2, 2011 Report Posted October 2, 2011 Errr, sorry, my mistake. You need to use -120px, not 120px.
benjaminmorgan Posted October 2, 2011 Author Report Posted October 2, 2011 oops i was using background-url it is working now. Thanks
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now