CODEWITHSUNDEEP
css
lisovaccaro
lisovaccaro

Reputation: 33956

Can't get Share Button aligned!

I'm trying to align the share, like and tweet button horizontally but I can't get the share button right. I tried adding vertical align top, changing the height and display:inline but it always remains more or less 10px belowe the others. What should I do to get them all aligned?

<div style='vertical-align: top;'>

<a expr:share_url='data:post.url' name='fb_share'/> 

<a class='twitter-share-button' data-count='horizontal' data-lang='es' data-related=':' data-via='' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow'/>

<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:110px; height:20px;'/>
</div>


<script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'>
</script>

<script src='http://platform.twitter.com/widgets.js' type='text/javascript'>
</script>

Thanks

Upvotes: 3

Views: 3849

Answers (2)

jlmakes
jlmakes

Reputation: 2965

An easier method than styling these elements individually, is to sandwich them inside <li> tags--allowing you to position the parent <ul> easily, and also float the <li> tags (creating the 'inline' effect you're after.)

jsFiddle didn't like the facebook APIs, so I used 3 twitter buttons instead; the code looks like:

<ul class="social_network">
    <li>
        <a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="">Tweet</a>
    </li>

    <li>
        <a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="">Tweet</a>
    </li>

    <li>
        <a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="">Tweet</a>
    </li>
</ul>

With some very simple CSS (including a subtle outline so you can see the boundaries of the <li> elements:

.social_network {
    position : relative;
    list-style-type : none;
}
.social_network li {
    float : left;
    border : 1px solid rgba(0,0,0,.1);
    padding : 6px;
    margin : 2px;
}

You can find an example of the above here: http://jsfiddle.net/kgFaW/

This should put you in the right direction. Let me know if you run into any issues with the Facebook APIs.

Upvotes: 7

user194076
user194076

Reputation: 9017

to do display:inline you can wrap each control into list like this: 

  <ul><li>
<a class=....../>
</li> <li> <a expr....../> </li></ul>

Also, add: list-style-type:none; To make your controls stick to the right side of the screen, do: position:absolute; right:0;

Upvotes: 0

Related Questions