Плавающая панель для Вашего сайта, на которую можно установить не только социальные кнопки

Автор: Администратор
Дата публикации: 04 ноября 2012 года
Раздел: Статьи для WEB-мастера

Итак, Вы видите две плавающие панели у меня на сайте? Думаю, ДА! На эти панели можно вставить абсолютно любые кнопки и поэтому многие хотят их использовать. Частенько возникает вопрос по поводу реализации данных панелей. Именно поэтому я решил сообразить статейку, в которой будет все подробно описано.

Плавающая панель для Вашего сайта, на которую можно установить не только социальные кнопки. Картинка

Про панель социальных кнопок статья уже была написана. Ее Вы можете почитать здесь. Мы же сейчас обсудим создание плавающей панели с другими кнопками. Начнем с того, что вставим в код страницы такой блок.

<div id="socializ">

</div>

Теперь просто необходимо прописать необходимые свойства для данного блока. Это мы рассмотрим более подробно:

  • Первое свойство position: fixed; предназначено для фиксации панели на одном месте.
  • Второе свойство z-index: 1000; предназначено для отображения данного блока поверх всех остальных элементов HTML-страницы. Значение 1000 гарантирует правильность отображения.
  • Третье свойство width: 96px; устанавливает ширину панели.
  • Четвертое и пятое свойства text-align: center; и font-size:14px; позволяют выровнять содержимое блока по центру и выставить шрифту 14 размер.
  • Шестое свойство right: 25px; позволяет сделать отступ от правого края. Соответственно свойство left: 25px; позволяет сделать отступ от левого края.
  • Все остальные свойства направлены на стилизацию панели.

Так вот давайте соберем все воедино и посмотрим, что получится.

Это в CSS:

#socializ

{

position: fixed;

z-index: 1000;

width: 96px;

text-align: center;

font-size:14px;

top:25px;

right: 25px;

padding: 5px 5px 0;

background: #382d25;

border: 1px solid #382d25;

border-radius: 6px;

box-shadow: 0px 0px 8px #382d25;

}

Это блок плавающей панели:

<div id="socializ">

</div>

Вот собственно и все, реализация плавающей панели на этом закончена. Спасибо за внимание и надеюсь, что Вам все это поможет!

Fatal error: Call to a member function return_links() on a non-object in /var/www/zoleg9992/data/www/e2epro.com/page/footer.php on line 42