Sprites in CSS and positionning borders

Question

I'm facing a little problem with HTML / CSS right now.

First of all, I want to achieve this :

http://s27.postimg.org/wn17ahx5f/de.png

The 4 images are one sprite, that I already manage to cut and position on the page. The problem is with the border and the text just at the bottom of them.

How can I do it ? For the moment I have this :

                    <div class="stats-number-block-toto">
                        <ul class="icone-stats">
                            <li class="icone-forums"><div class="text-forums">Test text</div></li>
                            <li class="icone-utilisateurs"></li>
                            <li class="icone-sujets"></li>
                            <li class="icone-messages"></li>
                        </ul>
                    </div>

And the CSS :

    .stats-block-toto {
    float: left;
}

.stats-block-toto .titre-bloc-toto {
    float: left;
    border-bottom: 1px solid #c7c6c6;
    padding-bottom: 10px;
    margin-bottom: 15px;
}

.stats-number-block-toto {
    float: left;
    background-color: #FFFFFF;
    width: 100%;
}

.icone-stats li {
    float: left;
    width: auto;
    margin-top: 20px;
    width: 60px;
    height: 60px;
    display: inline-block;
    background: url("img/forumjv/icones-stats.png") no-repeat;
}

.icone-stats .icone-forums {
    background-position: 0 0;
    margin-right: 100px;
 }

.icone-stats .icone-utilisateurs {
    background-position: 33% 0;
    margin-right: 100px;
}
.icone-stats .icone-sujets {
    background-position: 66% top;
    margin-right: 100px;
}
.icone-stats .icone-messages {
    background-position: 100% top;
}

.text-forums {
    border-top: 1px solid black;
    padding-top: 15px;
    width: 100px;
    margin-top: 80px;
}

As I said, my sprites are ok, it's the text and the border that fails.

Here is the jsfiddle :

http://jsfiddle.net/gc4HT/

Anyone has a solution ?

Thanks !

Answer 1

This fiddle will work: http://jsfiddle.net/rajmathan/AThr4/

HTML:

 <div class="stats-number-block-forumjv">
                    <ul class="icone-stats">
                        <li class="icone-forums"><div class="text-forums">Test text</div></li>
                        <li class="icone-utilisateurs"></li>
                        <li class="icone-sujets"></li>
                        <li class="icone-messages"></li>
                    </ul>
                </div>

CSS:

       .stats-block-forumjv {
        float: left;
    }

    .stats-block-forumjv .titre-bloc-forumjv {
        float: left;
        border-bottom: 1px solid #c7c6c6;
        padding-bottom: 10px;
        margin-bottom: 15px;
    }

    .stats-number-block-forumjv {
        float: left;
        background-color: #FFFFFF;
        width: 100%;
    }

    .icone-stats li {
        float: left;
        width: auto;
        margin-top: 20px;
        width: 60px;


        display: inline-block;
        background: url("http://s27.postimg.org/wn17ahp5f/design.png") no-repeat;
    }

    .icone-stats .icone-forums {
        background-position: 0 0;
        margin-right: 100px;
     }

    .icone-stats .icone-utilisateurs {
        background-position: 33% 0;
        margin-right: 100px;
    }
    .icone-stats .icone-sujets {
        background-position: 66% top;
        margin-right: 100px;
    }
    .icone-stats .icone-messages {
        background-position: 100% top;
    }

    .text-forums {
        border-top: 1px solid black;
        padding-top: 15px;
        width: 100px;
        margin-top: 80px;
    }

Answer 2

JSFiddle

Make the width the same size as your text class (100px) or remove the width property completely.

In my jsFiddle, I made it same size, added a placeholder image so you can see what it would roughly look like and added text-align:center; to your text so that your text was aligned center to your image.

The reason the background image looks 'weird' in each li is because the background-position is changed on all of them and also that it's just running off 1 background image which is repeating each time. But when you use your own sprite and find the right background-position, it should look fine.