Align social buttons correctly

Question

Hello, I am trying to put social buttons facebook and tweetmeme in our site. I liked the way it's done in yahoo sites. Please look

Yahoo Link

I looked at yahoo code, but the implementation style is very difficult to understand. It would be great if someone can help me in html/css coding.

Thanks.

Update

This is the code I have so far.. The issues I am having is Yahoo customized the css by changing the facebook and tweetmeme css behavior. Please check the attached image and compare with it. The code I am using is

---

<a name="fb_share" type="button_count" share_url="http://www.yahoo.com" href="http://www.facebook.com/sharer.php"&gt;Share&lt;/a&gt;&lt;script 

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

<script type="text/javascript">
tweetmeme_url = 'http://www.yahoo.com';
tweetmeme_style = 'compact';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"&gt;&lt;/script&gt;

---

Please let me know, can we have exactly they have. I liked the look and feel of that. :)

Thank You.

Answer 1

They are using an unordered list at the elements to show the buttons.

A UL is mostly used to show a list of items vertically but you can use CSS to make the items appear next to each other instead.

<ul>
  <li style="display:inline">One</li>
  <li style="display:inline">One</li>
</ul>

I think the above would work ok.

All you need to do then is right align it.

<div style="width:400px">

    <ul style="float:right">
      <li style="display:inline">One</li>
      <li style="display:inline">One</li>
    </ul>

</div>

Don't forget to use classes instead of inline styles like I have here.