Hi Guys, I am stumped, I have a fixed footer in a fluid layot that I am placing custom facebook and twitter background images right:1%; in the .share div that then link to adding facebook and twitter likes and shares, I am completely stumped, the twitter remained where I wanted it in isolation, when I tried to add a second background icon, they would not line up properly, any thoughts… I have tried many different combinations of css, div’s spans, in the meanwhile, I have the sense that I am moving further away from proper markup solution… I am sure there is a more elegant approach…
.share {
position:fixed;
width:180px;
right: 1%;
bottom:0;
}
#custom-tweet-button a {
background: url(‘…/images/twitter.png’) 100% 100% no-repeat;
position:relative;
display: block;
right:0px;
width: 50px;
height: 80px;
z-index:1002
}
#custom-tweet-button a:hover {
background: url(‘…/images/twitter_cl.png’) 100% 100% no-repeat;
top: -17px;
}
#custom-facebook-button a {
background: url(‘…/images/facebook.png’) 100% -65px no-repeat;
position:relative;
display: block;
right:55px;
width: 50px;
height: 80px;
z-index:1002
}
#custom-facebook-button a:hover {
background: url(‘…/images/facebook_cl.png’) 100% -65px no-repeat;
top: -17px;
}
<div class=“share”>
<span id=“custom-tweet-button”>
<a href=“http://twitter.com/share?url=http://http://www.mysite1.com/” target=“_blank” rel=“nofollow”></a></span>
<span id=“custom-facebook-button”><a href=‘http://www.facebook.com/share.php?u=http://www.mysite.com’> _target=“_blank” rel=“nofollow”></a></span></div>