CODEWITHSUNDEEP
html
Keith Power
Keith Power

Reputation: 14151

Html sprite showing full height

I have a div which I have a plus icon to expand the view. When the user hovers overs the icon moves to the green version.

I am now adding a extra line of text but now the full icon gets shown. I am not sure how to set the height to only allow the fist part of the icon to be show.

<div class="span-5 roomtitle">
   <a href="#">Classic Double Room</a>
   <br>Sleeps: 2
</div>

css:

.roomtitle {
            background: url("../images/icons/icon_add.gif") no-repeat scroll 0 0 transparent;
            color: #990000;
            line-height: 14px;
            padding-left: 25px;
            }

Upvotes: 0

Views: 53

Answers (2)

gilly3
gilly3

Reputation: 91667

Put the sprite in the link instead of the div:

.roomtitle { 
    color: #990000; 
    line-height: 14px; 
}
.roomtitle > a {
    display: inline-block;
    height: 14px;
    background: url("../images/icons/icon_add.gif") no-repeat scroll 0 0 transparent; 
    padding-left: 25px; 
}

Working demo: http://jsfiddle.net/gilly3/U285K/

Upvotes: 1

locrizak
locrizak

Reputation: 12279

You have two options here:

1) you can change the sprite so that there is a gap inbetween each image (not very good)

2) add a span within the .roomtitle div and add the sprite to that. (this is the approch I will usually take)

.roomtitle{
    width:25px;
    height:25px;
    background:url("../images/icons/icon_add.gif") no-repeat scroll 0 0 transparent;
    float:left;
    display:block;
}

Upvotes: 1

Related Questions