Блог

Главная - Вопросы по программированию - Управление горизонтальным позиционированием кнопки Facebook Like

Управление горизонтальным позиционированием кнопки Facebook Like

#html #css #facebook-like

#HTML #css #facebook-нравится

Вопрос:

У меня возникли трудности с позиционированием комбинации кнопок Facebook Like и Send. Я, наконец, смог управлять вертикальным позиционированием с помощью таблицы и CSS. Код и CSS приведены ниже. Теперь я не могу контролировать горизонтальное позиционирование. Что бы я ни делал, кнопка Like находится примерно в 7 пикселях от левой части браузера. Даже если я добавлю несколько amp;nbsp символов s в столбец перед кодом Facebook, кнопка Like находится всего в 7 пикселях от левой части экрана. Код и CSS, которые я использую, приведены ниже, и они не изменяют горизонтальное расположение кнопок Facebook Like и Send.

Есть идеи, как я мог бы переместить кнопки Facebook Like amp; Send на 100 пикселей с левой стороны экрана?

Заранее спасибо,

Джон

Код:

 <table class="like">
<tr>
<td>
</td>
<td>

<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>

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;


}

Ответ №1:

Скрипт FB вставляет код как дочерний элемент элемента fb-root. Любой CSS, который вы хотите использовать для позиционирования элементов, должен быть применен к fb-root. Это устранило бы необходимость в таблице.

Комментарии:

1. Я попробовал <div class=»like» id =»fb-root»></div> и это не сработало.

2. У вас есть ссылка, на которую мы можем посмотреть? Как вы пытались расположить div?

Ответ №2:

Возьмите пустой тег #fb-root div и закрывающий тег и поместите их непосредственно после открывающего тега body.

Затем оберните скрипт в div и класс по вашему выбору и в стиле, который вы хотели бы.

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