CODEWITHSUNDEEP
htmlcsscss-sprites
lowerkey
lowerkey

Reputation: 8335

How do I create a link from a sprite image?

In this jsfiddle I'm trying to create a link that covers the entirety of the sprite image. For some reason though, the height and width attributes of a don't seem to work.

What can I do to create links from sprite images?

Upvotes: 1

Views: 4792

Answers (4)

Pal Singh
Pal Singh

Reputation: 1974

Add display:block; to a, it will work then...

Upvotes: 0

T. Junghans
T. Junghans

Reputation: 11683

I've updated your fiddle. The link covers the whole image now and this is done by turning the link into a block element with display: block like many other answers above state. I also added the id selector to all your other selectors and moved the selector and declaration with where the actual background image is being declared to the top. The reason for this, is that the li-element's background-position were overwritten because of lack of specificity and due to the order of your css declarations.

Upvotes: 2

hjpotter92
hjpotter92

Reputation: 80649

Use this

// Code shifted to the end.

Where, CSS is like this:

.sprite-sp1{ 
    background-position: 0 0; 
    width: 242px; 
    height: 244px; 
} 
.sprite-sp1 a{
    width: 242px;
    height: 244px;
    border: 1px solid;
}
.sprite-sp2{ 
    background-position: 0 -294px; 
    width: 241px; 
    height: 244px;
} 
#container li {
    background: url(http://i.imgur.com/iDrt8.png) no-repeat top left;
}

EDIT Edited to make the sprite clickable. The new code shall be:

<ul id="container">
    <li><a href="http://google.com/"><span class="sprite-sp1"></span>test</a></li>
    <li><span class="sprite-sp1"></span></li>
</ul>

​

Upvotes: 1

Joseph
Joseph

Reputation: 119867

add display:inline-block or display:block to a for dimensions to work. dimensions don't take effect for inline elements.

Upvotes: 4

Related Questions