There are 4 images in a vertical sprite that I want to display horizontally on my page as clickable links. The first image should start at position left:250px and top:2px with a padding of 3px between each image.
CSS
.sprites {
background:url('/pic/sprites.jpg')no-repeat top left;
width:36px;
height:36px;
}
.sprites.sprites.twitter {
background-position:0px 0px;
}
.sprites.sprites.facebook {
background-position:0px -46px;
}
.sprites.sprites.google-plus {
background-position:0px -92px;
}
.sprites.sprites.pinterest {
background-position:0px -138px;
}
.social {position:relative;left:250px;top:2px;}
I have managed to position the images starting at 250px from the left and 2px from the top, but I am struggling to make them display horizontally as clickable links with a padding of 3px.
HTML
<div class=social>
<a href="http://www.example.com"><div class='sprites google-plus'></div></a>
<a href="http://www.example.com"><div class='sprites facebook'></div></a>
<a href="http://www.example.com"><div class='sprites twitter'></div></a>
<a href="http://www.example.com"><div class='sprites pinterest'></div></a></div>