Need just a little help with sprites in Magento CE 1.9

Question

I need just a little help with sprites. I am not an expert, but I'm learning, and this it the first time I'm trying to make a sprite show on in the cms block. My sprite is spritesheet.png, an image with social icons on it. I uploaded it in public_html folder for now and I put this cone in my cms block (I had to add spaces after "<" here in my post because otherwise the code wouldn't show up)

<div class="sprite sprite-facebook"></div>
<div class="sprite sprite-google"></div>
<div class="sprite sprite-instagram"></div>
<div class="sprite sprite-pinterest"></div>
<div class="sprite sprite-twitter"></div>
<div class="sprite sprite-youtube"></div>

Then I added this to my styles.css

    background-image: url(spritesheet.png);
    background-repeat: no-repeat;
    display: block;
}

.sprite-etsy {
    width: 18px;
    height: 18px;
    background-position: -5px -5px;
}

.sprite-facebook {
    width: 18px;
    height: 18px;
    background-position: -33px -5px;
}

.sprite-google {
    width: 18px;
    height: 18px;
    background-position: -61px -5px;
}

.sprite-instagram {
    width: 18px;
    height: 18px;
    background-position: -89px -5px;
}

.sprite-pinterest {
    width: 18px;
    height: 18px;
    background-position: -117px -5px;
}

.sprite-twitter {
    width: 18px;
    height: 18px;
    background-position: -145px -5px;
}

.sprite-youtube {
    width: 18px;
    height: 18px;
    background-position: -173px -5px;
}

All this was generated by a website that helps with making sprites, so it should be correct, but I still don't see the images. I see the empty CMS block though. Could you please help me understand what am I missing? Thank you!

Answer 1

I usually prefer to use li and ul. example:

<ul id="footer-third-center">
                    <li id="facebook">
                         <?php echo "<a href=\"http://www.facebook.com/yourcompany\" target=\"_blank\" title=\"facebook\"></a>"; ?>
                    </li>
                    <li id="twitter">
                         <?php echo "<a href=\"http://twitter.com/yourcompany\" target=\"_blank\" title=\"twitter\"></a>"; ?>
                    </li>
                    <li id="google">
                         <?php echo "<a href=\"https://plus.google.com/u/0/b/yourcompany/\" target=\"_blank\" title=\"google+\"></a>"; ?>
                    </li>
                    <li id="linkedin">
                         <?php echo "<a href=\"http://www.linkedin.com/companies/yourcompany\" target=\"_blank\" title=\"linkedin\"></a>"; ?>
                    </li>
                </ul>

and css ->

for the sprite ->

#footer-third-center li {
    background-image: url("spritesheet.png");
    background-repeat: no-repeat;
    display: inline-block;
    height: 20px;
    margin-right: 10px;
    width: 22px;
}

for positions ->

#footer-third-center li#linkedin {
    background-position: -82px -42px;
}

#footer-third-center li#google {
    background-position: -55px -42px;
}

#footer-third-center li#twitter {
    background-position: -26px -40px;
}

hope it helps.