Как сделать фиксированную нижнюю часть для сайта.
Бывают ситуации, что необходимо показывать пользователю какую-то информацию вне зависимости от того, какое место html-страницы он сейчас читает. Т.е. нужно сделать так, чтобы текст прокручивался, а какая-то область оставалась на месте и всегда была перед глазами посетителя.
Давайте рассмотрим конкретный пример. У нас на странице есть определенная текстовая информация, а в самом низу (в нижней части сайта) находится блок с рекламой.
И не зависимо от того, какое место текстовой информации вы будете в данный момент читать, область с рекламой всегда должна оставаться на месте.
Согласитесь, что это очень интересный и полезный эффект?
Давайте сейчас разберемся, как такое можно сделать на практике. Есть несколько способов, как этого можно добиться, но я остановлюсь на самом современном из них – фиксированное позиционирование с помощью стилей CSS.
Для того, чтобы понять, как все работает, нам нужно создать пробную html-страницу и создать в нем два блока .
Это основное содержание сайта Это основное содержание сайта Это основное содержание сайта Это основное содержание сайта Это основное содержание сайта Это основное содержание сайта Это основное содержание сайта Это основное содержание сайта Это основное содержание сайта Это основное содержание сайта Это основное содержание сайта Это основное содержание сайта Это основное содержание сайта Это основное содержание сайта Это основное содержание сайта Это основное содержание сайта Это основное содержание сайта Это основное содержание сайта Это основное содержание сайта Это основное содержание сайта Это основное содержание сайта Это основное содержание сайта Это основное содержание сайта Это основное содержание сайта Это основное содержание сайта Это основное содержание сайта Это основное содержание сайта Это основное содержание сайта Это основное содержание сайта Это основное содержание сайта Это основное содержание сайта Это основное содержание сайта Это основное содержание сайта Это основное содержание сайта Это основное содержание сайта Это основное содержание сайта Это основное содержание сайтаБольше моих уроков по Javascript здесь.
Основное содержание просто размножьте до такой степени, чтобы html-страницу можно было прокручивать в браузере. А нижней части присвойте идентификатор далее мы ему будем назначать нужные стили CSS.
На самом деле это самое позиционирование элемента в нужном месте экрана осуществляется всего-навсего с помощью одного свойства CSS position:fixed. Смотрите, как его можно использовать на практике.
#footer
Идентификатору footer, который мы с вами указали ранее для тэга , присваиваем стили CSS.
position:fixed; — позиция блока фиксированная и положения своего не меняет.
bottom:0px; — блок этот должен находиться в самом низу html-страницы.Следующие свойства отвечают за отображение внешнего вида блока, чтобы его можно было отличить от основного текста:
text-align:center; — выравнивание текста по центру
background:#990000; — цвет заднего фона
color:#FFFFFF; — цвет текста
width:100%; — ширина страницыВот и все. Теперь можете посмотреть на результат в браузере. Надеюсь, что у вас все получилось.
Таким же способом вы можете зафиксировать положение практически любого блока на html-странице.
Вот такое интересное свойство есть у стилей CSS. Используйте его по назначению на благо своего дела.
Больше моих уроков по Javascript здесь.
Фиксированный подвал
Подвалом на жаргоне веб-разработчиков называется нижняя часть сайта, где пишутся авторские права, публикуются контакты, выводятся разные счетчики и тому подобная информация. Обычно подвал располагается после всего контента и виден только при прокрутке страницы. В некоторых случаях желательно сделать подвал доступным всегда, независимо от высоты страницы, и зафиксировать его внизу окна браузера.
Для этого воспользуемся свойством position и его значением fixed . При этом элемент остается на одном месте, а его положение задается координатами через свойства top , right , bottom , left . В нашем случае достаточно задать нулевые значения у left и bottom . Ширина фиксированных элементов равна их контенту, что хорошо заметно, если добавить фоновый цвет или рисунок, поэтому необходимо также задать ширину через width как 100% (пример 1).
Пример 1. Фиксированный подвал
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Фиксированный подвал Результат примера показан на рис. 1.
Рис. 1. Подвал внизу страницы
Браузер Internet Explorer 6 не поддерживает значение fixed , поэтому в нем данный пример будет работать некорректно. Для IE6 придется дополнить код двумя тегами , вложив их внутрь контейнеров content и footer , а также включить еще один стиль специально для этого браузера (пример 2).
Пример 2. Код с учетом IE6
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Фиксированный подвал Похожие публикации:
