Css Sprite Button

November 10, 2024 Post a Comment

These Sprite buttons are driving me bonkers. I can almost get them to work, but not quite. I'm playing with this very simple sprite image: I've got a jsfiddle project >> HER

Solution 1:

Is that what you want to get: http://jsfiddle.net/PZh9F/37/ ?

CSS:

#menu { left:10px; top:50px; height:300px; width: 147px; position:fixed; }
.sprite { background: url('http://www.jp2code.net/logos/jp2Rollover.png') 0px -100px no-repeat; height:50px; padding-left: 50px; width:147px; z-index:1; }
.spritea { background-position: 0px100px; color:Red; vertical-align: middle; }
.sprite.current { background-position: 0px0px; }
.sprite:hover { background-position: 0px -50px; }
.sprite:hovera { color:Yellow; }

And HTML:

<html><body><ulid="menu"><liclass="sprite current">You Are Here</li><liclass="sprite"><ahref="#A">Contact</li><liclass="sprite"><ahref="#B">Projects</li></ul></body></html>

Solution 2:

I updated your fiddle: http://jsfiddle.net/PZh9F/12/

As you ha set the background of the ul (as it should) you also need to change the backgorund position of this same ul on hover, so not for the a as you did. Change the text color however should be done with a:hover I hope this points you in the right direction.

Solution 3:

You're applying background to <li> tags and background-position to <a> tags instead of applying both to the same set of tags.

Solution 4:

you defined the background for li.sprite not the hyperlink . that's why when a:hover happens there is no background to go -50px down .

.spritea {
   background-image: url('http://www.jp2code.net/logos/jp2Rollover.png');
   background-position: 0px -100px;
   color:Red;
   vertical-align: middle;
   display:block;
   width:147px;
   height:50px;
  }
.spritea:hover {

   background-position: 0px -50px;

  }

Solution 5:

just a few issues:

The anchor tags weren't closed, so that may have caused some issues.

Any time you want something to behave like a link, it should use an anchor tag; I noticed the first li tag was just text. Technically, you can still achieve the same effect, but I'm guessing you're attempting to link to something.

When you're using html text for links within a button that is using a background image, I recommend putting the text into a span which makes it easier to format. When you add padding to an anchor tag without using the span, you can get extra padding on the opposite end in some browsers even with a set width. Just a little trick I learned over the years.

When using sprites, make sure you add height, width and display:block properties to the "a" selector. This will ensure that the entire link is clickable.

It looks like some of your hovers are jumping, it might be an issue with your sprite. It's crucial that your measurements are accurate. If it's even 1px off it can produce an undesired flicker effect.

The complete code is here: http://jsfiddle.net/PZh9F/65/

Hope that helps!

Html5 Cafe