Solved

Align social buttons correctly

Posted on 2010-09-19
4
620 Views
Last Modified: 2012-05-10
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

http://finance.yahoo.com/news/General-Motors-to-test-apf-122107979.html?x=0

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.
0
Comment
Question by:sunseshasai
  • 3
4 Comments
 
LVL 3

Expert Comment

by:arweeks
ID: 33713034
Have you got some code to start with that I could troubleshoot?  Or do you want to write something for you - either is OK.  What alignment issues are you having?  Up/down or left/right?
To be honest, I'd probably just use a table.  It's bad form, but it's quick and it mostly works.
0
 

Author Comment

by:sunseshasai
ID: 33713605
Hello arweeks,

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">Share</a><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"></script>
------------------------

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

Thank You.


<a name="fb_share" type="button_count" share_url="http://www.yahoo.com" href="http://www.facebook.com/sharer.php">Share</a><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"></script>

Open in new window

social.gif
0
 
LVL 3

Accepted Solution

by:
arweeks earned 500 total points
ID: 33713809
What about putting it inside a holding div, then having an adjustment div that brings the twitter one down a little?


<html>
<div class="socialbuttons">

<a name="fb_share" type="button_count" share_url="http://www.yahoo.com" href="http://www.facebook.com/sharer.php">Share</a>

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

<div class="tweetAdjust" style="padding-top:3px;position:absolute">
<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"></script>
</div></div>
</html>
<html>
<div class="socialbuttons">

<a name="fb_share" type="button_count" share_url="http://www.yahoo.com" href="http://www.facebook.com/sharer.php">Share</a>

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

<div class="tweetAdjust" style="padding-top:3px;position:absolute">
<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"></script>
</div></div>
</html>

Open in new window

0
 
LVL 3

Expert Comment

by:arweeks
ID: 33759116
Did this resolve the issue?
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Angular JS Route 3 47
Error on link 14 37
Wrapper for APPs 9 31
Target h5 of a div 3 6
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

911 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now