CODEWITHSUNDEEP
htmlcssweb
Holly
Holly

Reputation: 1976

Using a sprite sheet for icons in css

i'm having trouble getting this to work for some reason.

Heres the icon sheet i want to use: enter image description here

My problem is that even though I've tried setting the width and height of both the <li> items and the <a> items i can't see the 25x25px icon, i can only see as much of the background as is covered by the text inside <a> (which i intend to get rid of of course!)

Could you tell me what i'm doing wrong? Thank you!

Here's a jsfiddle that shows my code and the problem.

Or you could look at my code below:

html:

<div id="connect">
                <h4>Stay Connected</h4>

                    <ul class="icons">
                    <li><a  class="blogger" href="#blogger">a</a></li>
                    <li><a class="linkdin" href="#linkd">b</a></li>
                    <li><a class="facebook"  href="#facebook">c</a></li>
                    <li><a class="twitter" href="#twit">d</a></li>
                   </ul>
            </div>

css:

#connect ul.icons{list-style: none;}
        #connect ul.icons li{
             width: 25px;
            height: 25px;
        }
        #connect ul.icons li a {
            width: 25px;
            height: 25px;
            background-color: red;
            background-image: url('../IMG/iconset.gif');
        }
            #connect li a.blogger{background-position:100px 0px; }
            #connect li a:hover.blogger{background-position:100px 25px;}
            #connect li a.linkdin{background-position:50px 0px;}
            #connect li a:hover.linkdin{background-position:50px 25px;}
            #connect li a.facebook{background-position:25px 0px;}
            #connect li a:hover.facebook{background-position:25px 25px;}
            #connect li a.twitter{background-position:75px 0px;}
            #connect li a:hover.twitter{background-position:75px 25px;}

Upvotes: 4

Views: 2987

Answers (5)

apparat
apparat

Reputation: 1952

For general usage of the css sprite technique a can highly recommend these two articles from A List Apart:

CSS Sprites: Image Slicing’s Kiss of Death

and the second part using sprites in combination with javascript (jquery)

CSS Sprites2 - It’s JavaScript Time

I know there are tons of others, but these two are really worth reading in my opinion.

Upvotes: 1

supersaiyan
supersaiyan

Reputation: 1730

why dont you try this:

http://jsfiddle.net/ubguy/13/

Its the better way i suppose.

Upvotes: 0

hunter
hunter

Reputation: 63512

Try this: http://jsfiddle.net/hunter/ubguy/14/

I made your li a styling display: block;

Also specify your :hover styling after the class, not before

#connect li a.blogger:hover

You can also use text-index: -9999px to hide the text on screen

#connect ul.icons li a {
    text-indent: -9999px;
    background-image: url('http://c3it.webuda.com/IMG/iconset.gif');
    width: 25px;
    height: 25px;
    display: block;
}

#connect li a.blogger{background-position:25px 0px; }
#connect li a.blogger:hover{background-position:25px 25px;}

#connect li a.linkdin{background-position:75px 0px;}
#connect li a.linkdin:hover{background-position:75px 25px;}

#connect li a.facebook{background-position:100px 0px;}
#connect li a.facebook:hover{background-position:100px 25px;}

#connect li a.twitter{background-position:50px 0px;}
#connect li a.twitter:hover{background-position:50px 25px;}

Upvotes: 3

Ross Gledhill
Ross Gledhill

Reputation: 662

I've updated your jsfiddle here:

http://jsfiddle.net/YXeuf/

You needed to add display: block to the anchor tag, and also add the class for hovering to the li instead. I've also centered the text and added in a line height to center the text vertically too.

Upvotes: 3

punkrockbuddyholly
punkrockbuddyholly

Reputation: 9794

You need to make the a element display:block.

Upvotes: 5

Related Questions