Привет, друзья! Сегодня я расскажу, как расставить кнопки социальных сетей в один ряд. Зачем я это рассказываю, ведь расставить кнопки в один ряд так легко? Не совсем просто. Располагать их коды просто в один ряд – это не решение, так как эти элементы блочные. Помимо кода нужно обернуть их в отдельные слои. Ну, в общем, читайте статью и все поймете.
Первым делом определитесь, какие кнопки вы будете ставить. Для этой статьи я выбрал стандартный набор: Вконтакте, Facebook, Твиттер, Google Plus.
Выбор сделан! Теперь идем по-порядку.
1. Создаем общий контейнер для всех кнопок. В дальнейшем пропишем для него высоту.
Выбирайте все кнопки одинаковые в высоту. Это и смотрится красиво и их легче в один ряд расположить.
<div class="social_button">Здесь мы будем помещать коды кнопок </div>
2. Добавим внутри контейнера слои для каждой кнопки. Если их 4, добавляйте четыре слоя, если кнопок 5, то, соответственно, и слоев должно быть пять. Получится так
<div class="social_button">
<div class="twitter"></div>
<div class="vk"></div>
<div class="facebook"></div>
<div class="googleplus"></div>
</div>
3. Вставляем между дивами коды кнопок. Где взять коды я писал в статье панель с кнопками Google+, Вконтакте и Twitter.
<div class="social_button">
<div class="twitter"><a href="https://twitter.com/share" class="twitter-share-button" data-via="sesc_sanek" data-lang="ru">Твитнуть</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></div>
<div class="vk"><script type="text/javascript"><!--
document.write(VK.Share.button(false,{type: "round", text: "Сохранить"}));
--></script></div>
<div class="facebook"><div class="fb-like" data-send="true" data-width="450" data-show-faces="true"></div></div>
<div class="googleplus"><g:plusone size="medium"></g:plusone></div>
</div>
Все тонкости установок данных кнопок, я надеюсь, вы знаете.
4. Добавляем стили к кнопкам. В style.css прописываем такие свойства:
.twitter{
float: left;
}
.vk{
float: left;
}
.facebook{
float: left;
}
.googleplus{
float: left;
}
Здесь мы добавили каждой кнопке обтекание слева. Другими словами, каждая кнопка будет располагаться по порядку в одну строку со всеми.
5. Немного стилей для контейнера. В style.css добавьте строки
.social_button{
height:35px;
padding:15px;
margin:15px;
}
и добавьте к ней дополнительные свойства для красоты. Например, можно поставить рамку (border) или фон контейнера (background).
Проделав все шаги правильно, ваши кнопки выстроятся в горизонтальный ряд.
Керамическая фабрика Gres de Aragon предлагает большой выбор красивых решений для вашего дома и дачи.
Из блога Писклова
Загрузка ...