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-etsy"> < div class="sprite sprite-facebook"> < div class="sprite sprite-google"> < div class="sprite sprite-instagram"> < div class="sprite sprite-pinterest"> < div class="sprite sprite-twitter"> < div class="sprite sprite-youtube">

Then I added this to my styles.css

.sprite { 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.