Использование тега footer для создания подвала на странице. Новые теги Название слоев header footer


Мы начинаем пятый урок посвященный редактированию шаблонов в CMS Joomla 3, на этот раз мы поговорим о футере для сайта. Разберем возможные варианты оформления футера и некоторые подходы к его созданию.

Что такое футер

Футером или подвалом сайта называют самую нижнюю его часть, в которой, как правило, содержится информация о сайте, об авторских правах и т.д. В стандартном исполнении в шаблоне Protostar , футер не содержит какую либо значимую информацию:

Стандартное содержание футера такое - текущий год, имя сайта и ссылка «Наверх» ведущая в начало страницы. Если честно такой вариант футера совершенно бесполезен посетителям нашего сайта, кроме того ссылка «Наверх» в нашем случае абсолютно не нужна, мы для этих целей уже сделали красивую кнопку .

Поэтому для начала предлагаю избавиться от стандартного содержимого футера. Открываем файл index.php стандартного шаблона Protostar и ищем код, который отвечает за вывод футера. За вывод футера отвечает код между строками 205 и 219, который выглядит следующим образом (в зависимости от версии Joomla и внесенных изменений в индексный файл строки кода могут отличаться):

" />

И для наглядности скриншот:

Как выводятся модули понятно, а вот на логотипе хочу остановиться подробнее. За вывод логотипа отвечает код:

" />

На первый взгляд обычный HTML тег для изображения, но вместо привычного пути расположения файла написан php код. Данный код на первый взгляд может показаться сложным и непонятным, но на самом деле если его разобрать, то становится понятно, что ничего сложного в нем нет:

  • - конец php кода

В результате использования данного php кода мы получаем относительный путь до файла с изображением. Другими словами не зависимо от того какое имя будет у сайта и какой используется шаблон изображение будет взято из папки images выбранного шаблона.

Сохраняем файл index.php, теперь его можно закрыть, он нам больше не пригодится.

Теперь создадим несколько модулей, которые выведем в только что созданных новых позициях. Первый модуль будет выводить меню в футере, а второй небольшой текст.

На следующем этапе создаем модули - для меню с типом «Меню» и для текста с типом «HTML-код» (как создать модуль). В качестве позиций для них выбираем только что созданные позиции модулей:

Чтобы отличать наше меню для футера среди остального меню на сайте, в настройках модуля меню добавляем к нему суффикс класса «_footer»:

Для того чтобы не объяснять что за модуль с типом «HTML-код» я покажу принцип его действия на скриншоте:

Я заполнил данный модуль определенным текстом, который будет выведен в футер, кроме обычного текста я написал небольшой php код, который отображает текущий год:

Сохраняем модули и идем на сайт для проверки результата и вот что у меня получилось:

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

Для начала оформим новые блоки футера:

Foot-left, .foot-center{float: left;} /*выравнивание блоков футера*/ .foot-left {width: 20%;} /*ширина левого блока*/ .foot-center {margin-left: -6px;} /*отступ центрального блока*/ .foot-right { /*правый блок*/ float: none; height: 60px; }

Следующий кандидат на оформление это меню, к которому я применил следующие стили:

Ul.nav.menu_footer {margin: 0;} /*нулевые отступы у меню*/ ul.nav.menu_footer li { /*оформление текста меню*/ font-family: "Lobster", cursive; font-size: 16px; line-height: 18px; } ul.nav.menu_footer li.item-179 a { /*пункт меню Карта сайта*/ margin-left: 15px; color: #fc8f30; } ul.nav.menu_footer li.item-180 a { /*Пункт меню О сайте*/ color: #5aa426; border-top: 3px solid #5aa426; } ul.nav.menu_footer li.item-181 a { /*Пункт меню Контакты*/ margin-left: 45px; border-bottom: 3px solid #0f70ad; color: #0f70ad; }

И в завершении отделяем футер от основной части контента:

Footer.footer hr {border-top: 3px solid #fc8f30;} /*отделяем футер от основного контента*/

Сохраняем файл стилей, переходим на сайт и смотрим на результат:

Вот мы и создали футер для нашего сайта, который смотрится гораздо веселее, чем стандартный. На этом данный урок считаю заершенным, а в следующем уроке мы проверим возможные ошибки адаптивного дизайна и исправим некоторые недочёты. Кроме того советую почитать статью о том как создать шаблон Joomla 3 и в частности футер с нуля быстро при помощи Bootstrap.

В HTML5 для структуры кода введено несколько новых тегов: , , , , , которые заменяют в некоторых случаях привычный . Хотя кажется, что особой разницы между тегами и нет, между ними лежит огромная пропасть. Теги ориентированы не на людей, которым нет смысла заглядывать в исходный код страницы, а на машины, интерпретирующих код. Машины или роботы не понимают , для них это типовой тег разметки - замени его на и смысл не поменяется. Другое дело , робот, обнаружив этот тег, воспринимает его именно как шапку сайта или раздела.

Что это даёт в итоге? Поисковые системы начинают лучше индексировать сайт, потому что чётко отделяют контент страницы от вспомогательных элементов. Речевые браузеры, предназначенные для слепых людей, пропускают заголовок и переходят непосредственно к содержимому. Сайты могут автоматически обмениваться контентом и другой информацией между собой. Все эти возможности называются семантикой и позволяют представить данные в удобном для роботов виде.

Давайте для начала сделаем шапку сайта с помощью тега (пример 6.2).

Пример 6.2. Использование

Попытка добавить в стилях фон к тегу ни к чему не привела, фон в некоторых браузерах отображаться не желает. Все новые теги следует сделать вначале блочными через свойство display , тогда они начнут корректно выводиться (пример 6.3).

Пример 6.3. Шапка сайта

HTML5 CSS 2.1 IE 7+ IE 9+ Cr Op Sa Fx

header { display: block; background: #00B0D8 url(images/header-gradient.png) repeat-x; }

Данный пример будет работать во всех браузерах, кроме IE7 и IE8. Internet Explorer не добавляет стиль к элементам, которые не понимает. Это недоразумение можно исправить, если создать фиктивный элемент с помощью JavaScript. Для этого включим в такой код.

document.createElement("header");

Если на странице встречается один тег, этот скрипт вполне подойдёт для работы. Но не хочется повторять строку десять раз для десяти разных тегов, поэтому автоматизируем этот процесс через цикл. Сами теги указываются списком, разделяясь запятой (пример 6.4).

Пример 6.4. Скрипт для IE

var e = ("article,aside,figcaption,figure,footer,header,hgroup,nav,section,time").split(","); for (var i = 0; i < e.length; i++) { document.createElement(e[i]); }

Сам скрипт заключается в условные комментарии, чтобы выполнялся только для IE версии 8.0 и ниже. В IE9 поддержка новых тегов HTML5 уже включена.

Пример выше не обязательно вставлять к себе на сайт, можно воспользоваться общедоступным скриптом написанным Реми Шарпом и распространяемым по лицензии MIT. Для этого достаточно указать на него ссылку, как показано в примере 6.5.

Пример 6.5. Скрипт для IE

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

Таким образом, для полноценного использования тегов HTML5 во всех браузерах достаточно выполнить три условия:

  • установить доктайп ;
  • включить скрипт из примера 6.4 или 6.5;
  • в стилях для новых тегов установить display : block .

    • Теперь рассмотрим некоторые теги HTML5 более подробно, чтобы понять область их применения.

    Пример 6.6. Использование тега

    HTML5 IE Cr Op Sa Fx

    article Следы невиданных зверей История о том, как возле столовой появились загадочные розовые следы с шестью пальцами, и почему это случилось.

    Определяет блок, который не относится к основному контенту, для размещения рубрик, ссылок на архив, меток и другой информации (пример 6.7). Такой блок, если он располагается сбоку, называется, как правило, «сайдбар» или «боковая панель».

    Пример 6.7. Использование

    HTML5 IE Cr Op Sa Fx

    aside document.createElement("aside"); document.createElement("article"); aside { background: #f0f0f0; /* Цвет фона */ padding: 10px; /* Поля */ width: 200px; /* Ширина сайдбара */ float: right; /* Обтекание слева */ } article { margin-right: 240px; /* Отступ справа */ display: block; /* Блочный элемент */ }

    Экономьте электричество

    Хороший язык

    Чья палка больше

    История о том, как приходилось экономить электричество, какие меры для этого принимались, и куда оно на самом деле уходило.

    Используется для группирования любых элементов, например, изображений и подписей к ним (пример 6.8).

    Пример 6.8. Использование

    HTML5 IE Cr Op Sa Fx

    figure document.createElement("figure"); document.createElement("figcaption"); figure { background: #5f6a72; /* Цвет фона */ padding: 10px; /* Поля вокруг */ display: block; /* Блочный элемент */ width: 150px; /* Ширина */ float: left; /* Блоки выстраиваются по горизонтали */ margin: 0 10px 10px 0; /* Отступы */ text-align: center; /* Выравнивание по центру */ } figcaption { color: #fff; /* Цвет текста */ }

    Софийский собор

    Польский костёл

    Содержит описание для тега . Тег должен быть первым или последним элементом в группе.

    Задаёт «подвал» сайта или раздела, в нем обычно располагается имя автора, дата документа, контактная и правовая информация (пример 6.9).

    Пример 6.9. Использование

    HTML5 IE Cr Op Sa Fx

    footer Персональный сайт Кристины Ветровой Добро пожаловать!

    Рада приветствовать вас на своем сайте.

    Copyright Кристина Ветрова

    Определяет «шапку» сайта или раздела.

    Используется для группирования заголовков веб-страницы или раздела (пример 6.10).

    Пример 6.10. Использование

    HTML5 IE Cr Op Sa Fx

    hgroup Кристина Ветрова Персональный сайт

    Задаёт навигацию по сайту (пример 6.11). Если на странице несколько блоков ссылок, то в обычно помещают приоритетные ссылки. Также допустимо использовать несколько тегов в документе. Запрещается вкладывать внутрь .

    Пример 6.11. Использование

    HTML5 IE Cr Op Sa Fx

    nav Чебурашка и крокодил Гена Чебурашка | Гена | Шапокляк | Лариска Добро пожаловать!

    Определяет раздел документа, который может включать в себя заголовки, шапку, подвал и текст (пример 6.12). Допускается вкладывать один тег внутрь другого.

    Пример 6.12. Использование

    HTML5 IE Cr Op Sa Fx

    section Съёмки фильма Полипропилен

    История о том, как снимали фильм, где герои отдыхали на пляже, потом пришёл антагонист, избил протагонистов, сбросил их в бассейн, и что из этого получилось.

    Хороший язык

    История о том, как проходила студия изучения языка эсперанто, в то время, как над ней, на веранде велась студия приколистов, где травились анекдоты, и что из этого получилось.

    Помечает текст внутри тега как дата, время или одновременно дата и время. Может указываться непосредственно внутри контейнера , либо задаваться через атрибут datetime (пример 6.13).

    Дата и время задается в международном формате ISO 8601. Примеры оформления приведены в табл. 6.1.

    Для каждой единицы существует своя заданная форма и ограничения.

    • Год — задается четырьмя цифрами (1860).
    • Месяц — две цифры (01 — январь, 02 — февраль, 12 — декабрь).
    • День — две цифры от 01 до 31.
    • Час — две цифры от 00 до 23.
    • Минуты — две цифры от 00 до 59.
    • Секунды — две цифры от 00 до 59.
    • Часовой пояс — часы и минуты с указанием знака плюс или минус.

    Дата и время разделяются между собой заглавной латинской буквой T. Часовой пояс при необходимости пишется после времени со знаком плюс или минус. К примеру, для Москвы часовой пояс будет +03:00.

    Пример 6.13. Использование

    HTML5 IE Cr Op Sa Fx

    time

    1957-10-04 запущен первый искусственный спутник Земли.

    1960-08-19 первый полёт собак в космос.

    1961-04-12 первый полёт человека в космос.

    1963-06-16 первый полёт женщины-космонавта.

    1969-07-21 высадка человека на Луну.

    Если обувь это итоговая составляющая любого наряда, то футер для сайта e-Commerce - завершающий элемент его продающего дизайна. Уделяя внимание самому нижнему элементу «подвалу», современные веб-сайты готовы продемонстрировать свою индивидуальность всеми способами. В конкурентной e-commerce среде достаточно оригинальных идей, креатива и оформительских тенденций. Перед тем как разнообразить футер Е-коммерческого сайта, стоит учесть немаловажные моменты. Что разместить первую очередь и как это лучше сделать? В обзоре вдохновляющих дизайнов футеров есть интересные варианты.

    Читайте также: 13 маркетинговых трендов в электронной коммерции 2019 года

    Любопытна статистика от компании Chartbeat. Исследование поведения 25 млн. пользователей показало, насколько глубоко они просматривают страницы. Оказывается, пользовательское внимание обращено на пространство ниже линии сгиба. Получая больше практически полезной информации, посетители дольше всего задерживаются в области 1200px от верха страницы (при средних 700px по вертикали экрана в браузере), либо за вторым экраном.

    Время просмотра (сек.) / Расстояние от верха страницы (пиксели)

    Большой разрыв по продолжительности просмотра первого и второго экранов. Самый ТОП – 4 сек, длительность достигает максимума (16 сек.) на 1200 пикселях от верха и при дальнейшей прокрутке, медленно снижается.

    Доля посетителей (%) / Расстояние от верха страницы (пиксели)

    Значительная часть посетителей (более 25%) даже не ждут загрузки контента и начинают скроллить страницу. Значит, только 75% сперва увидят самый верх. Наиболее просматриваемая область страницы, это 550px (сразу над линией сгиба).

    Исследование развеивает миф о том, что пользователи не прокручивают страницу до самого низа и не смотрят весь контент. Футер также важен для современного eCommerce сайта, даже имеет свои преимущества.

    Идеи как оформить «подвал» (футер), примеры продающих дизайнов

    Эти 10 советов подскажут, как красиво оформить футер для сайта – по правилам композиции в веб-дизайне и с разрешением приоритетных задач. Примените наиболее подходящие тактики для улучшения юзабилити, UX (пользовательского опыта) и даже повышения продаж.

    1. Необходимая информация

    Традиционно, в футере сайта освещаются требуемые организационно-правовые вопросы. Уведомления оформляются менее заметным текстом, что освобождает другие области страниц для более значимых элементов. Вот примерный список для рассмотрения:

    • Отметки о копирайте
    • Правовые оговорки
    • Биллинговая информация
    • Уведомление об использовании файлов cookie

    Веб-сайту реализующему товар, нужно удовлетворять правовым требованиям и предоставлять информацию о порядке, сроках возврата. Расположение ее в футере, удобно как продающему ресурсу, так и посетителям.

    Пример footer’a: Ив Роше

    Интернет-магазин торговой марки Ив Роше: футер во весь экран с приятным дизайном из чередующихся слоев. Информирует о компании, инфраструктуре продающего сайта – от отслеживания заказа, до политики персональных данных. Тут же советы по использованию продукта, бонусы, акции

    Пример footer’a: Lumity

    На торговцев пищевыми добавками возлагается повышенная юр. ответственность. Есть немало вещей о которых они должны/не должны сказать на своем продающем сайте. Ссылки на правовую информацию выделены жирным для лучшей заметности.

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

    Пример footer’a: Saddleback Leather Co

    Продающий сайт с красивым ретро-дизайном шапки и футера. 100-летняя гарантия на отсутствие дефектов материала и отделки. Условия возврата сопровождаются интересными историями… не все так грустно с необходимой e-Commerce-информацией бывает, оказывается

    2. Негативное пространство – достаточность визуальной дистанции

    Ограничивая число футерных линков не поскупитесь на отрицательное пространство – это окажет потрясающий эффект на визуальное восприятие и улучшит читаемость. Общее правило: при соблюдении визуальной иерархии, центральные элементы замечаются быстрее (можно использовать с выгодой!).

    Пример footer’a: QUAY AUSTRALIA

    С минималистичным стилем и фиксированным выпадающем меню, интернет-магазин может себе позволить просторный футер

    Пример footer’a: Incase

    О большом количестве микро-негативного пространства (между мелкими элементами) можно сказать так: пока вся необходимая информация присутствует, она разборчива и быстро воспринимаема – все нормально

    Пример footer’a: Stumptown Coffee Roasters

    Просторный футер кофейного сайта - отличное завершение композиции чистого дизайна, в котором много макро-негативного пространства («воздуха» между разделами/секциями)

    3. Завершающий призыв к действию

    Читайте также: 30+ примеров и идей оформления кнопок целевого действия

    Стильное оформление футера красноречиво говорит о самом ресурсе. Важно заметить: покупатель задерживается здесь чуть дольше, чем в остальных частях страницы. Удобным случай для еще одного, завершающего призыва к действию . Часто это подписка/рассылка, но можно связать СТА-призыв и с регистрацией аккаунта.

    Пример footer’a: Greetabl

    У Greetabl скромно оформленная нижняя часть страниц, включает призыв к подписке. При минимуме элементов призыв становится заметным, а гармонируя с бирюзовым фоном превращается в украшение сайта

    Пример footer’a: Ecwid

    Приятное оформление с призывами к действию в нижней части страниц. Структура конструктора продающих сайтов универсальна. Для миллиона своих клиентов он переведен на 35 языков

    4. Плавающая корзина – повышение доступности продающего функционала

    Доступ к корзине из нижней части сайта – отличный способ улучшить юзабилити и продающие качества сайта.

    Пример footer’a: Lemonadela

    Продающий сайт кейтеринговой компании приятен на вид и удобен для покупателя

    5. Навигация в футере

    Нижняя часть сайта идеально подходит для не часто просматриваемой информации: о компании, условиях предоставления услуг и политики конфиденциальности. В этом случае функция футера – всех спасти. Чувствуя себя потерянным в eCommerce среде, кто-то начинает интересоваться инфраструктурой электронного магазина, инстинктивно прокручивая дальше…

    Негативное пространство необходимо для читабельности контента. Вообще, «подвал» не для навигационных целей, в отличии от меню или карты сайта. Лишь в редких случаях, сайты электронной коммерции размещают в футере отдельные категории товаров (

    Часто при установке , кнопок, баннеров и т.п. возникает необходимость вставки html, css и JavaScript кодов в в тело тегов body и head. Некорректное выполнение этой операции вручную, может повредить сайт и даже полностью нарушить его работоспособность.

    Для автоматизации этого процесса создан замечательный плагин , зайдите в настройки в админпанели и с удовольствием работайте. Он легкий в использовании и имеет следующие функции:

    Чтобы увеличить картинку щелкните по ней кнопкой мышки. Чтобы уменьшить щелкните ещё раз.

    1. Page Head and Footer (Заголовок и подвал страницы) . Добавление кода в главной страницы сайта.

    Code to be added on HEAD section of the home (код, который надо вставить в заголовок домашней (главной) страницы). Позволяет вставить мета теги, коды рекламных баннеров, кнопок и т.п. в тело тега . Чаще это невидимая часть кода для отсутствия на сайте визуального показа. Результат работы видимой части кода появится над шапкой на главной странице.

    Code to be added on HEAD section of every page (код, который надо вставить в заголовок каждой страницы). Добавление кода в тело тега в раздел HEAD. Результат работы видимой части кода появится над шапкой на всех страницах, в том числе и на главной.

    Code to be added before the end of the page (код, который надо вставить в конец (подвал) страницы). Добавление кода в подвал на всех страницах перед закрывающим тегом . Это работает только для тем, имеющих подвал и файл footer.php.

    Практически все счетчики состоят из двух частей – это коды невидимой и видимой (информер) частей счетчика. Код невидимой части вставляется после открывающегося тега , как можно выше к началу страницы. Для этого можно использовать плагин или внести коррекцию непосредственно в файл header.php, . Код видимой части (информер) вставляется в подвал сайта с помощью плагина Header and Footer перед закрывающимся тегом или в сайдбар с помощью виджета.

    2. Post content (содержимое записи) . Добавление кода в начало и конец поста на всех страницах категорий, при полном показе поста.

    Code to be inserted before each post (код, который надо вставить перед каждой записью). Вставка кода в начале каждого поста (статьи) категории после заголовка, только в том случае, если статья показана полностью.

    Code to be inserted after each post (код, который надо вставить после каждой записи). Вставка кода после каждого поста категории.

    3. Page content. Добавление кода в начало и конец поста всех статических страниц, при полном показе поста.

    Code to be inserted before each page. Вставка кода в начале каждого поста (статьи) статической страницы после заголовка, только в том случае, если статья показана полностью.

    Code to be inserted after each page. Код будет вставлен после поста на каждой статической странице.

    4. Faceboock . Если добавить метапризнак og:image (протокол Open Graph, с помощью которого можно ввести метаданные в формате Social Graph на страницы ресурса), например список контактов Faceboock, то при нажатии кнопки Faceboock в начале или конце постов, на всех страницах можно управлять выборкой изображения, которое отправится на стену пользователя.

    5. Snippets . Имеется возможность задавать отрывки, которые отсылаются на стену пользователя при нажатии кнопки социальных сетей, расположенных в начале или в конце поста. Отрывки отсылаются как , где N – номер отрывка от 1 до 5.

    6. Notes and parked codes. Примечания.

    Это кошмар какой-то! Почему подвал вашего сайта опять «всплывает » и сдвигает дизайн? Неужели нельзя нормально прижать футер к низу страницы чем-нибудь? Контентом или кирпичами хотя-бы! Кирпич в монитор не пролазит?

    Понятно, тогда сидите и ничего не делайте, пока не прочитаете нашу статью до конца.

    Делаем правильный футер для своего сайта

    Многие владельцы сайтов встречаются с этой проблемой, когда footer страницы просто всплывает «кверху ». И тогда непонятно, что делать. Чаще всего таким недостатком грешат дизайны сайтов, сверстанные на скорую руку, самостоятельно (кружок «очумелые ручки» ) или начинающими веб-мастерами.

    При этом на первых порах жизни сайта ничего ужасающего не происходит. И такая идиллия продолжается до тех пор, пока контент давит «своим весом » на подвал, не давая ему подняться вверх. Но стоит разместить на странице материал меньшего объема, и недавно «спокойный » футер моментально поднимается вверх, приводя весь дизайн сайта в неподобающий вид.

    Для устранения этого «дефекта » сверстанного шаблона не обязательно тратиться на услуги веб-мастера. Чаще всего футер сайта можно поставить на место самостоятельно. Рассмотрим все возможные варианты устранения подобной проблемы:

    Первый способ

    Первый способ «привязать » подвал «к дну » страницы построен на основе CSS . Для начала приведем код примера, а затем более подробно рассмотрим его реализацию:

    html { height: 100%; } header, nav, section, article, aside, footer { display: block; } body { height: 100%; } #wrapper { width: 1000px; margin: 0 auto; min-height: 100%; height: auto !important; height: 100%; } #header { height: 150px; background-color: rgb(0,255,255); } #content { padding: 100px; height:400px; background-color: rgb(51,255,102); } #footer { width: 1000px; margin: -100px auto 0; height: 100px; position: relative; background-color: rgb(51,51,204); }

    Для того чтобы приклеить подвал к низу страницы тег мы вынесли за пределы контейнера (слоя wrapper ). Растягиваем всю страницу и содержимое «тела » до границ экрана. Для этого в коде CSS мы задали высоту тегов и в 100%:

    html { height: 100%; } body { height: 100%; }

    Минимальную высоту слоя-контейнера устанавливаем тоже в 100%. Для случая, если ширина контента будет больше, чем высота контейнера, задаем свойству значение auto . Благодаря этому wrapper будет автоматически подстраиваться под ширину размещенного на странице контента:

    #wrapper { min-height: 100%; height: auto !important; height: 100%; }

    Строчка кода «height: 100% » предназначена для старых версий IE , которые не воспринимают свойство min-height .

    Чтобы в дизайне страницы отделить место под подвал, мы устанавливаем отступ для тега в 100 пикселей:

    #content { padding: 100px; }

    На данном этапе мы получили веб-страницу шириной во весь экран и дополнительно 100 пикселей, которые «нейтрализуются » отрицательным значением отступа для футера (margin: -100px ) при установленном для него относительном позиционировании (position: relative ). Таким образом, с помощью отрицательного значения отступа мы «сдвигаем » подвал в область контейнера, для которого установлена высота в 100%.

    В данном примере разметка веб-документа задана с помощью сравнительно новых тегов HTML 5 , которые могут быть неправильно интерпретированы устаревшими версиями браузеров. Из-за этого весь дизайн страницы может быть отображен некорректно. Чтобы избежать этого, нужно новые теги из арсенала 5 версии языка гипертекста заменить на обычные :

    header content footer

    Усовершенствованный вариант

    Рассмотренный выше способ того, как сделать футер внизу страницы «незыблемым » не всем подходит. Если в будущем вы собираетесь модифицировать и совершенствовать дизайн своего сайта с помощью всплывающих окон, тогда лучше отказаться от использования предыдущей реализации.

    Чаще всего в реализации pop-up окон используется свойство CSS z-index . С помощью его значений задается порядок наложения слоев друг на друга.

    Чем больше значение z-index элемента, тем выше он будет находиться в общем стеке «наслоения ».

    Но из-за того, что в предыдущем примере мы использовали отрицательное значение отступа для футера, нижняя часть всплывающего окна будет перекрываться верхней областью подвала. Даже несмотря на то, что оно будет иметь большее значение z-index . Потому что у родителя всплывающего окна (wrapper ) значение этого свойства все равно меньше.

    Вот более совершенный вариант:

    CSS — код примера:

    html, body { height: 100%; } .header { height:120px; background-color: rgb(0,255,102); } .main { min-height:100%; position: relative; background-color: rgb(100,255,255); } .footer { height:150px; position: absolute; left: 0; bottom: 0; width: 100%; background-color: rgb(0,0,153); }

    Как видно из кода, подвал мы поместили в состав основного элемента. Контейнеру мы задали относительное позиционирование, а для футера – абсолютное. Подвал мы закрепили в самом низу контейнера, установив его положение слева и сверху в 0.

    Вариант для подвала с нефиксированной высотой

    Предыдущие способы реализации могут гарантировать, что футер будет всегда внизу страницы. Но только если подвал фиксированной ширины. А что делать, если количество размещаемого в нем контента нельзя спрогнозировать?

    Для этого потребуется более совершенный вариант для нефиксированного подвала. В нем футеру задается значение table-row для свойства display . Благодаря этому он будет отображаться как строка таблицы.