Jump to content
Stef's Coding Community
Sign in to follow this  
benjaminmorgan

CSS: Problem with getting part of my sprite to use on a ul.

Recommended Posts

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?

Share this post


Link to post
Share on other sites

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".

Share this post


Link to post
Share on other sites

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>

 

sprites.gif

Share this post


Link to post
Share on other sites

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.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...