Просмотров: 5 130

Как создать фиксированную кнопку на сайте?

Поступил вопрос от одного из подписчиков: «Как создать фиксированную кнопку на сайте, похожую на эту?»

Чтобы эта кнопка, не зависимо от того места страницы, которое просматривает пользователь, всегда оставалась на одном и том же месте и прокручивалась вместе с окном браузера.

Чаще всего такие кнопки прикрепляют к одной из стенок (правой или левой) сайта.

Давайте сейчас рассмотрим тот код, который нужно добавить на свои веб-страницы, чтобы эта кнопка появилась и начала работать.

Вот тот код, который нужно разместить на свою веб-страницу:

<div id='follow'>
<a href='http://twitter.com/dimachen' target='_blank'>
<img src='http://www.dimachen.info/images/twitter.gif'
border=0 width=38 height=166 alt='Следи за мной на
Twitter' title='Следи за мной на Twitter' /></a>
</div>

Я разместил его перед закрывающим тэгом </body>. Если вы используете шаблон wordpress, то это можно сделать в файле footer.php вашей темы.

Что собой представляет этот код?

По сути, мы просто создали блок div с идентификатором follow. Содержанием этого блока является та самая картинка-ссылка, которую мы и хотим сделать фиксированной.

Все. По HTML части мы закончили.

Теперь остается только с помощью средств CSS, сделать этот блок фиксированным.

Вот тот код, который для этого необходим.

#follow {
margin: 0px;
background: e6eeee;
z-index: 2;
position: fixed;
top: 300px;
left: 0px;
width: 38px;
height: 166px;
}

Его нужно добавить в файл стилей, который у вас используется. Например, style.css.

z-index: 2 – необходим для того, чтобы на небольших мониторах кнопка располагалась поверх основного текста.

Основной эффект достигается за счет применения свойства position: fixed, которое делает блок фиксированным и заданием точного местоположения блока (top: 300px; left: 0px;) и его размеров (width: 38px; height: 166px;).

Вот и все. Как видите, используется минимальное количество кода.

Вот несколько книг, которые помогут вам разобраться в верстке сайтов и CSS более подробно.

02019055_cover-pdf-kniga-nina-komolova-komputernaya-verstka-i-dizayn-samouchitel    css3 cover_OUT.indd    09450331_cover-pdf-kniga-devid-soyer-makfarland-bolshaya-kniga-css3-2

  • Вика Оздоба

    А КАК РАЗМЕСТИТЬ НЕСОЛКЬО КНОПОК?