Controlling Horizontal Positioning of Facebook Like Button_问答_开发者

Controlling Horizontal Positioning of Facebook Like Button

开发者 https://www.devze.com 2023-03-03 04:18 出处：网络

I have been having a difficult time positioning a Facebook Like & Send button combination.I finally was able to control the vertical positioning using a table and CSS.The code and CSS are below.No

I have been having a difficult time positioning a Facebook Like & Send button combination. I finally was able to control the vertical positioning using a table and CSS. The code and CSS are below. Now, I cannot control the horizontal positioning. No matter what I do, the Like button is about 7 pixels from the left side of the browser. Even if I put a handful of &nbsps in the column before the Facebook code, the Like button is just 7 pixels from the left side of the screen. The code and CSS I am using is below, and they don't change the horizontal positioning of the Facebook Like and Send buttons.

Any idea how I could move the Facebook Like & Send buttons 100 pixels from the left side of the screen?

Thanks in advance,

John

The code:

<table class="like">
<tr>
<td>
</td>
<td&g开发者_如何学Pythont;

<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    FB.init({appId: 'your app id', status: true, cookie: true,
             xfbml: true});
  };
  (function() {
    var e = document.createElement('script'); e.async = true;
    e.src = document.location.protocol +
      '//connect.facebook.net/en_US/all.js';
    document.getElementById('fb-root').appendChild(e);
  }());
</script>

</td>

</tr>

</table>

The CSS:

table.like {
    margin-top: 140px;
    margin-left: 50px;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-size: 14px;
    color: #000000;
    width: 450px;
    table-layout:fixed;
    background-color: #FFFFFF;
    border: 2px #FFFFFF;
    border-collapse: collapse;
    border-spacing: 0px;
    padding: 0px;
    text-decoration: none;
    vertical-align: text-bottom;    

}

table.like td {
   border: 0px solid #fff;  
   text-align: left; 
   height: 10px;
   width:100px;


}

The FB script is inserting code as a child of the element fb-root. Any CSS you want to use to position the elements should be applied to fb-root. That would eliminate the need for the table.

Take the empty #fb-root div tag and closing tag and place them directly after your opening body tag.

Then wrap the script in the div and class of your choice and style however you'd like.

<body>
  <div id="fb-root">
  </div>
    <div id="wrapper">
       <div id="socialMedia">
             <-- fb button script -->
        </div>
    </div>
 </body>