Grow your CSS skills. Land your dream job.

need Sprite help

  • # September 10, 2012 at 12:12 pm

    I used Sprite Cow for the positioning. I need help with the css! Thanks!

    http://codepen.io/anon/pen/Logtb

    # September 10, 2012 at 12:15 pm

    Where is the image sprite being hosted?

    # September 10, 2012 at 12:19 pm

    the image is local I can upload it somewhere

    # September 10, 2012 at 12:33 pm

    Okay you need to use that in your code where the sprite is called to – also, the reason the overlay isn’t working is that you’re setting the background of the LI to the image and then telling it to change when the a within each li is hovered.

    So what you need to do is edit your CSS and remove the a:hover, changing it to liclass:hover

    # September 10, 2012 at 12:41 pm

    Did you try to erase the white background by zooming in? You can just remove the white background layer and save as .png.

    # September 10, 2012 at 1:20 pm

    liclass:hover?? do you mean ; #navigation .uac li.hover ??? or #navigation .uac li:hover??

    # September 10, 2012 at 2:03 pm

    Apologies. What I meant was the a:hover needed to be changed to just the classname for each li.

    I’ve edited it for you;

    http://codepen.io/andyunleashed/pen/xoCdG

    # September 10, 2012 at 2:15 pm

    THANKS!! do you know why when I hover over the image it moves? how can I fix this?

    # September 10, 2012 at 3:13 pm

    Yes, what you need to do next is make sure that you arrange the padding/margins, heights & widths of each list item so that when it is rolled over there is space for it and it looks more natural.

    # September 10, 2012 at 3:40 pm

    Thanks!

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".