Solved

Align social buttons correctly

Posted on 2010-09-19
4
651 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

Question has a verified solution.

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

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

734 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