Фиксированный фон, баннер, меню.
Хочу рассказать Вам о css правилах с помощью которых можно сделать фиксированные баннеры, картинки, меню и так далее для Вашего сайта, блога.
Сегодня я Вам расскажу:
- Как сделать фиксированый фон для сайта.
- Как сделать фиксированый блок.
- Как сделать фиксированное меню, которое будет всегда с Вами по странице.
Начнем:
Как сделать фиксированый фон для сайта.
1 2 3 4 5 6 7 8 9 | <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Фиксированый фон</title> </head> <body> <div>Этот фон фиксирован и не тянется при прокрутке</div> </body> </html> |
CSS файл:
1 2 3 4 5 6 | body{ background: #FFF url(имя_картинки.jpg) no-repeat; <strong>background-attachmant: fixed; <code>height:1000px;</code> } |
Вот именно это правило background-attachmant: fixed; заставляет фон фиксироваться и никуда не деваться при прокрутке страницы.
Как сделать фиксированый блок.
Смотрим файл html:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Документ без названия</title> <style type="text/css"> #wrap{ position:fixed; width:150px; top:200px; left:200px; border:5px solid #666666; } body{ height:1000px; } </style> </head></p> <p style="padding-left: 30px;"><body> <div id="wrap">Этот блок можно разместить где угодно на странице. И при появлении прокрутки он будет всегда с Вами</div> </body> </html> |
Как сделать фиксированное меню, которое будет всегда с Вами по странице.
Опять же смотрим наш код:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Документ без названия</title> <style type="text/css"> #wrap{ position:fixed; width:400px; top:200px; left:200px; border:5px solid #666666; } #wrap li{ display:inline; padding-left:10px; } body{ height:1000px; } </style> </head> <p style="padding-left: 30px;"><body> <div id="wrap"> <ul> <li>Пункт1</li> <li>Пункт2</li> <li>Пункт3</li> <li>Пункт4</li> <li>Пункт5</li> </ul> </div> </body> </html> |
И так, мы разобрались, как же ж можно сделать фиксировынный фон, блок и меню, которое всегда будет с Вами, при любой высоте страницы. Это очень удобно использовать для popup рекламы, для меню, которое должно всегда быть под рукой, когда вы листаете страницы сайта.
PS: Знаю отличное место где реализуют ремонт дисплея iphone. Отличный сервис, быстрое выполнение заказов! Рекомендую!
451-240-340
lyash89 
mrmasterix@gmail.com
id811932
еще сделал тестовую страничку, где это посмотреть нужно..
Зачем ее тут делать? Просто скопируйте код и посмотрите )
Не люблю я фиксированный фон, при скроллинге как-то неуютно смотрится.
автор, у тебя ошибка, слово
“attachment” пишется чере е, а у тебя через “а”, исправь
блог верстальщика, это я удачно зашел. Сам этим увлекаюсь, щас попросили сделать в ДЛЕ выпадающее меню.Сам скрипт прикрутил, осталось две проблемы, заставить форму поиска встать с меню рядом и, что ещё главнее, отображать в ДЛЕ русские буквы, а не знаки вопросиков. Никогда с таким не встречались?
Ой, Я до ДЛЕ еще не дошел)))
если есть знаки вопросов, значит проблемы с кодировкой
ну, то что это проблема в кодировке и так понятно, а вот как заставить работать ее корректно я так и не понял. Уже вроде и установил dle с кодировкой utf-8 и везде,где есть упоминания сменил кодировку, а все равно – знаки вопросов. Видимо трабл кроется в базе данных sql, но тут я ещё совсем не копал.