Поступил вопрос от одного из подписчиков: «Как создать фиксированную кнопку на сайте, похожую на эту?»
Чтобы эта кнопка, не зависимо от того места страницы, которое просматривает пользователь, всегда оставалась на одном и том же месте и прокручивалась вместе с окном браузера.
Чаще всего такие кнопки прикрепляют к одной из стенок (правой или левой) сайта.
Давайте сейчас рассмотрим тот код, который нужно добавить на свои веб-страницы, чтобы эта кнопка появилась и начала работать.
Вот тот код, который нужно разместить на свою веб-страницу:
<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;).
Вот и все. Как видите, используется минимальное количество кода.
Что еще почитать?
Как сделать фиксированную нижнюю часть для сайта.
Выравнивание блока div со свойством position:absolute или fixed по центру.
Понравилась заметка?
Получайте подобные на e-mail.
Отлично. Не внедрил ещё, но думаю получится, как всегда.
А я всё думал найти инфу, как прилепить такого зверя.
Спасибо!
Такого зверя ещё можно прилепить с помошбю вот такого онлайн сервиса – http://www.jotform.com/ (это не реклама)- он позволяет достаточно быстро малоопытному web-мастеру слепить любую кнопку или форму для отправки данных
Максим, благодарю за ссылку. Посмотрим, что за сервис.
Спасибо большое! Я на многих блогах видел такие меню или кнопки, но не находил времени разобраться как это сделать. Оказывается, тут все проще простого, просто задать фиксированную позицию. Спасибо, Дмитрий.
Спасибо, полезный урок.
Хотелось бы узнать, а как сделать такую красочную форму подписки, что появляется при заходе на сайт.
Хорошо, Руслан, подумаю, возможно в следующей заметке раскрою свои секреты
Да, полезная заметка. Наверняка таким образом вполне можно разместить и кнопку RSS подписки. Всегда будет на виду. Кстати количество RSS подписчиков может положительно повлиять на трафик блога.
Совершенно верно, можно и RSS ленту таким образом разместить.
Поддерживаю Руслана! Дмитрий, не могли бы вы рассказать, как сделать такую же форму подписки на сайте как у вас. А заметка про кнопку отличная, есть над чем поработать!!!
Спасибо за ценную информацию, воспользуюсь. А еще хочется, как Руслану и Владимиру, узнать про создание всплывающего окна подписки, как к вас
Дмитрий, спасибо за информацию. Как и другие жду продолжения…
Ах, молодец. Я тоже давно такую хотела. Как всегда некогда. Спасибо. Если что то не получится буду вас беспокоить. Надеюсь можно?
Попробуйте
И не только RSS ленту, а, как я понял и хоть не пробовал, можно много кой-чего понавешать и без сервисов, а чтобы было всё у себя, это главное – ни от кого не зависеть!!!
Так, Димон?!
Спасибо ещё раз!
Совершенно верно, Евгений.
Проблема только в том что в IE6 и ниже это не работает. Приходится яваскриптом подправлять
Боже! Да, IE6, это прошлый Век и даже Тысячелетие.
По статистике им пользуются еще до 8% процентов посетителей. Шестёрки ещё стоят на корпоративных компах и ноутах, где запрещено вмешиваться в програмное обеспечение. Отсекать посетителей с IE6 имеет смысл только если вы полностью уверены что ваш клиент или покупатель не пользуется IE6.
Да это естестественно, что надо оптимизировать под всё… ну или хотя бы стараться.
Что ж тогда корпоративщики не обновляются что ли? Тогда у них уже вообще позапрошлый Век.
Мое мнение, учитывать IE 6 нужно. Но, честно говоря, лень мне дабавлять лишний код и засорять страницу.
И это хорошо, что ЛЕНЬ, это полезная ЛЕНЬ, чем меньше под них будут адаптировать, тем быстрее они обновяться и меньше останется старья.
Добавлю ещё, у одной моей знакомой, мой этот блог WordPress 2.5.1 – http://zhizn.zarinet.ru/ не открывается.
Говорил ей: "давай поставлю Винду ХР3 Проф Пак3 со всеми обновлениями и обновляться будет и всё – со всеми прогами" – всё недосуг ей – дело её – не хочет – не надо и ЭТО ЗА БЕСПЛАТНО.
Что я теперь должен блог ковырять? Не буду. А у неё ИЕ7 или 8 даже.
Дмитрий, а как прописать CSS код, чтобы такая же полоска только шириной 1000 и высотой 20 была прилеплена по центру к верху страницы.
Скорее всего, нужно поменять параметры
top: 0px;
left: 0px;
width: 1000px;
height: 20px;
Так мне нужно, чтобы полоска была по центру! Если прописать
left: 0px; – то она прилепится к левому краю
если прописать position:fixed; top:0px; center:auto; – то это не работает в IE во всех версиях. Как выйти из положения?!
Сделайте width:100%. Если обязательно нужна четкая ширина, попробуйте margin:auto;. Разбираться нужно.
Дмитрий, сделать width:100% не могу, потому что внутри полоски картинка 1000 пикселей шириной. Так как страница (таблица) ширина тоже 1000.
Даже если поставить margin:auto; – все равно IE 7 не воспинимает это полоску как фиксированную, она прокручивается, а не остается на месте.
Тогда задам вопрос по другому:
Вы хорошо продемонстрировали пример с прилепленной боковой кнопкой …. а как сделать такую же кнопку сверху?!
Заранее благодарна.
Ирина, в IE нужно использовать JavaScript, чтобы выйти из положения. Почитайте дискуссию в начале комментариев.
Лично я на старые версии IE не ориентируюсь.
Что касается выравнивания, задайте нужное значение для поля left.
Так не работает даже в IE7. Разве это старая версия? 40% пользуется.
Дмитрий, раз вы разбираетесь в этом и пишете СТАТЬЮ на эту тему …. разве вам самому НЕ ИНТЕРЕСНО проверить такой вариант:
Как сделать такую же кнопку сверху,чтобы она работала в IE ?! Я понимаю, вы с Жекой крутые парни – пользуетесь оперой, но 40% посетителей нельзя со счетов сбрасывать
))
Заранее благодарна.
Да, забыла. Вы пишете:
"Что касается выравнивания, задайте нужное значение для поля left."
А если надо по центру поставить? Мониторы ведь у всех разные. Ширина их колеблеться в больших пределах – как можно поставить для всех …. угадать атрибут left
Да, действительно, здесь немного сложнее.
Вот какие стили нужно использовать:
html, body{
width:100%;
}
#top {
position:fixed;
width:500px;
top:0;
left:50%;
margin-left:-250px;
}
Смысл в том, что left:50%; смещает весь блок на половину экрана, margin-left:-250px; – это половина ширины самого блока
Спасибо Дмитрий. Попробую так.