samedi 18 avril 2015

Put span on top of div

I built some social buttons with counters. And I want the counter data to show on top of my buttons. Somehow they are always inside the buttons. 1) Is it possible to put the number of shares on top of the button, how? 2) Each social button has text inside, even though I put float: left and text-align: left, the text still shows in the center, why?


Please see my fiddle... Fiddle


My HTML:



<a class="post-share facebook entShare" target="entsharewindow" href="#">
<div class="social-buttons-text">Facebook Like</div><span>0</span>
</a>
<a class="post-share facebook entShare" target="entsharewindow" href="#">
<div class="social-buttons-text">Facebook Share</div><span>0</span>
</a>
<a class="post-share twitter entShare" target="entsharewindow" href="#">
<div class="social-buttons-text">Twitter</div><span>0</span>
</a>


My CSS:



a.post-share {
display: block;
width: 74px;
height: 34px;
float: left;
margin: 10px 0px 0px 0px;
background: #3e599a url(sidebar-share.png) no-repeat 0 0;
text-decoration:none;
width: 110px;
text-indent: 50px;
font: 15px/46px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
color: #FFFFFF;
}
a.post-share:hover {
opacity: 0.8;
text-decoration: none;
cursor: pointer;
}

a.post-share span {
width: 22px;
height: 18px;
padding: 3px;
display: block;
float:right;
background-color:#080563;
color: #FFFFFF;
font-style:bold;
vertical-align: middle;
font: 10px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
text-align:center;
text-indent: 0;
}

a.post-share.facebook {
background-color: #3B5998;
background-image: url('/images/social-icons/facebook-32.png');
margin-right: 10px;
}

a.post-share.facebook {
background-color: #3B5998;
background-image: url('/images/social-icons/facebook-32.png');
margin-right: 10px;
}


a.post-share.googleplus {
background-color: #D14836;
background-image: url('/images/social-icons/googleplus-32.png');
margin-right: 10px;
}

.social-buttons-text {
font-size:4px;
color:#FFFFFF;
float:left;
margin:0px;
padding:0px;
text-align:left;
}

Aucun commentaire:

Enregistrer un commentaire