CODEWITHSUNDEEP
css-sprites
JFA
JFA

Reputation: 135

I cannot get my css sprite to show

I have set of icons that are for hotel amenities and I am trying to use CSS sprite to show them on my page. This is what I have for html

<div class="sprite">
            <ul id="amenities">
                 <li class="bathtub"></li>
                 <li class="shower"></li>
                 <li class="next"></li>
                 <li class="tv"></li>
                 <li class="safe"></li>
            </ul>
        </div>

my css

.amenities { position: relative; }
.amenities li { margin: 0;  padding: 0; list-style: none; position: absolute; top: 0; }
.bathtub { background: url('graphics/icons.png') no-repeat 0 0; width: 60px; height: 60px;}
.shower { background: url('graphics/icons.png') no-repeat -61 0; width: 60px; height: 60px;}

only the first icon shows and the second one doesnt. jsfiddle

enter image description here

how I need it to look

enter image description here

Upvotes: 0

Views: 96

Answers (1)

laughingpine
laughingpine

Reputation: 1049

You haven't set any units on the background position. Setting this to any type of unit will make it work. Zero is a value that is an exception to this rule.

shower { background: url('graphics/icons.png') no-repeat -61px 0; width: 60px; height: 60px;}

See: https://jsfiddle.net/kbrbc62h/

EDIT: In response to your recent comment, see: https://jsfiddle.net/Ls8wLsa6/

Elements like li, ul, h*, and div have a display:block by default. This means these elements will take up an entire line. We can set a specified width, but even still the container will be placed on a new line. By changing the li elements to use inline-block, we are able to cram them on to one line. Since the ul has a fixed width, every 3rd element will appear on a new line.

We use vertical-align:top; to align the li content to the top of the container, and then adjust the p tag to display the text in the center with no margin.

HTML: 

<div class="sprite">
    <ul id="amenities">
        <li><div class="bathtub"></div><p>Bath</p></li>
        <li><div class="shower"></div><p>Shower</p></li>
        <li><div class="kitchen"></div><p>Kitchen</p></li>
        <li><div class="bathtub"></div><p>Bath</p></li>
        <li><div class="shower"></div><p>Shower</p></li>
        <li><div class="kitchen"></div><p>Kitchen</p></li>
        <li><div class="bathtub"></div><p>Bath</p></li>
        <li><div class="shower"></div><p>Shower</p></li>
        <li><div class="kitchen"></div><p>Kitchen Long</p></li>
    </ul> 
</div>

CSS:

#amenities {
    width:320px;
}

.bathtub {
    background: url('https://i.sstatic.net/NdUbQ.png') no-repeat 0 0; width: 60px; height: 60px;
}
.shower {
    background: url('https://i.sstatic.net/NdUbQ.png') no-repeat -61px 0; width: 60px; height: 60px;
}

.kitchen {
    background: url('https://i.sstatic.net/NdUbQ.png') no-repeat -122px 0; width: 60px; height: 60px;
}

.sprite ul li {
    list-style-type:none;
    display:inline-block;
    vertical-align:top;
    margin:10px;
    width: 60px;
}

.sprite ul li p {
 text-align:center;
 margin:0;   
}

Upvotes: 1

Related Questions