Название слоев header footer. Как с помощью CSS прижать footer к низу окна браузера. и используем на полную
В 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 во всех браузерах достаточно выполнить три условия:
Теперь рассмотрим некоторые теги 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 высадка человека на Луну.
Часто при установке , кнопок, баннеров и т.п. возникает необходимость вставки 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 оформления Style.css, но и в Index.html, содержащий Html код и формирующий Div блоки. Но обо всем по порядку.
Для примера мы будем использовать созданный нами ранее трехколоночный макет сайта. При этом Index.html будет выглядеть так:
Заголовок Шапка Содержимое страницы Содержимое страницы Содержимое страницы Содержимое страницы Подвал
А в файле Style.css были прописаны следующие CSS свойства:
Body, html { margin:0px; padding:0px; } #maket { width:800px; margin:0 auto; } #header{ background-color:#C0C000; } #left{ background-color:#00C0C0; width:200px; float:left; } #right{ width:200px; background-color:#FFFF00; float:right; } #content{ background-color:#8080FF; margin-left:202px; margin-right:202px; } #footer{ background-color:#FFC0FF; clear:both; }
Ну, а сам макет выглядел примерно так:
Как видите, футер не прижат к низу и, следовательно, не удовлетворяет нашим требованиям (он располагается всегда под самой нижней колонкой), поэтому придется внести коррективы в код. Все тоже самое можно будет проделать и для двухколоночного, и для резинового макета тоже. Метод универсальный.
Как прижать футер к низу макета сайтаИтак, нам нужно сместить Div контейнер с футером к низу экрана. Для этого сначала потребуется задать высоту всей страницы, равную ста процентам (она будет занимать весь экран). Это нужно будет для того, чтобы затем изменить размер основного блока с макетом тоже до 100%.
Все содержимое страницы сайта помещается в открывающий и закрывающий теги Body и поэтому нам нужно в Style.css дописать для тега Body еще одно CSS свойство, задающее высоту равной 100%:
Body, html { margin:0px; padding:0px; height: 100%; }
На внешнем виде это никак пока не отразится, но зато теперь основной блог можно будет растянуться на всю высоту экрана. Т.е. это был своеобразный подготовительный этап.
Основные свойства CSS, при желании, вы можете посмотреть . Теперь зададим для Div контейнера, в котором заключен весь наш макет, минимальную высоту равную 100%:
Еще я хочу его подсветить (div с id="maket"). Для этого задам ему рамку с помощью соответствующего свойства Border ():
Свойство border: solid 3px black позволяет задать для данного контейнера сплошную рамку (solid) толщиной в 3 пикселя черного цвета. Это позволит наглядно увидеть, что контейнер с макетом растянулся на всю высоту экрана даже при малом количестве информации на странице:
Теперь нам нужно будет вынести блок футера из общего контейнера и разместить его ниже, сразу же после общего. Что это даст? А то, что, наконец-то, соизволит опуститься вниз футер в макете, а не будет как прежде прижиматься к наиболее длинной его колонке. В этом случае Index.html примет следующий вид:
Заголовок Шапка Левая колонка Меню Меню Меню Меню Правая колонка Меню Меню Меню Меню Содержимое страницы Содержимое страницы Содержимое Подвал
Обратите внимание, блок с футером теперь не находится внутри общего контейнера (maket), а следовательно его ширина теперь уже не регулируется CSS свойствами, заданными для maket в файле со стилевым оформлением Style.css. Футер будет по ширине растягиваться на весь экран, но все-таки он уже будет расположен внизу экрана, сразу под основным блоком:
Но опять возникает проблема, ибо для того, чтобы увидеть подвал, теперь приходится прокручивать экран в браузере (видите на приведенном рисунке полосу прокрутки).
Получается это потому, что основной контейнер (maket) занимает по высоте весь размер экрана (это определяется свойством min-height: 100%), а футер располагается сразу за ним и для его просмотра уже придется использовать прокрутку, что не очень то удобно и функционально.
Решить эту проблему можно, задав отрицательный отступ для Div контейнера с футером для того, чтобы он сместился вверх, на расстояние равное его высоте. При этом контейнер footer наедет на основной и впишется в высоту экрана браузера (т.е. не нужно будет использовать прокрутку для его просмотра).
Но для того, чтобы задать отрицательный отступ от верха, нужно знать эту самую высоту footer, а мы ее пока что не знаем.
Поэтому сначала зададим контейнеру содержащему подвал высоту, прописав соответствующее свойство в Style.css:
#footer{ background-color:#FFC0FF; clear:both; height: 50px; }
А затем задаем для него отрицательный отступ сверху на высоту равную его высоте:
Это позволит подвалу подняться вверх ровно на свою собственную высоту и тем самым вписаться в экран браузера (теперь можно убрать CSS свойство border: solid 3px black из правила для maket, чтобы толщина рамки не мешала всему нашему макету вместе с футером поместиться в экране по высоте):
Как видите, теперь полоса прокрутки в браузере не появляется и весь наш трехколоночный макет сайта на основе блочной верстки помещается в одном экране (в случае малого количества информации на странице) и имеет футер, расположенный в самом низу. Что нам, собственно, и требовалось сделать.
Вставляем распорку и боремся с Internet ExplorerНо возникает проблема , которая проявится только тогда, когда информации на странице макета станет больше и может получиться такая ситуация:
Получается, что может возникнуть ситуация, когда информация в одной из колонок макета наедет на футер, что будет выглядеть не красиво. Происходит это из-за пресловутого отрицательного отступа, который мы задали для него и который помог поднять наш подвал с наездом на основной контейнер макета.
Т.е. получается, что внизу экрана расположены два блока, перекрывающие друг друга в области подвала.
Решение данной проблемы заключается в добавлении нового пустого Div контейнера (так называемой распорки ) в основной контейнер нашего макета (maket), в то место, где раньше располагался блок с футером.
Задав для этого нового контейнера высоту, равную высоте подвала, мы сможем избежать наезда информации из основного контейнера на блок с футером. Присвоим этому контейнеру ID () с названием Rasporka и в результате Index.html нашего трехколоночного макета примет вид:
Заголовок Шапка Левая колонка Меню Меню Меню Меню Правая колонка Меню Меню Меню Меню Содержимое страницы Содержимое страницы Содержимое страницы страницы страницы страницы страницы страницы Подвал
А в Style.css пропишем для этого ( , задающее высоту этому контейнеру-распорке равную высоте подвала:
#rasporka { height: 50px; }
В результате футер будет прижиматься снизу не к информации, содержащейся в основном контейнере (например, текст в самой высокой колонке), а на равную подвалу по высоте область с контейнером-распоркой, не содержащим никакой информации.
Таким образом мы избегаем наездов и перекосов в нашем трехколоночном макете. Все будет четко и красиво (чинно и благородно):
Как я уже упоминал выше, ширина футера теперь у нас должна задаваться отдельно, т.к. этот контейнер теперь не входит в состав основного. Для этого нужно добавить в CSS файл дополнительные свойства для Footer, позволяющие задать его ширину и выровнять его посередине экрана по горизонтали.
Ширину имеет смысл задать равной ширине всего макета с помощью свойства Width, а выравнивание по горизонтали можно осуществить таким же способом, как мы это сделали для всего макета на блочной верстке.
Таким образом, нам нужно будет добавить для ID Footer дополнительные свойства:
#footer{ background-color:#FFC0FF; clear:both; height: 20px; margin-top:-20px; width:800px; margin-left: auto; margin-right: auto; }
С помощью свойства width:800px задается ширина равная 800 пикселей, а с помощью двух свойств margin-left: auto и margin-right: auto задается настройка отступа слева и справа от подвала автоматически, в результате чего эти отступы будут равными и наш герой выровняется по середине:
Ну вот, вроде больше уже нечего улучшать, но не тут-то было. Как всегда наш любимый браузер Internet Explorer 6 чего-то да не понимает из используемых нами свойств CSS. В этом браузере (и, возможно, в каких-то других старых тоже) не смотря на все наши старания подвал не будет прижат к низу, а по прежнему будет прилипать к самой высокой колонке макета сайта.
Все это происходит из-за того, что ( не понимает свойство min-height: 100%, которое мы использовали для задания минимальной высоты основного блока, равной высоте экрана.
Поэтому для решения этой проблемы нам придется применить так называемый хак, позволяющий объяснить (на пальцах) старым браузерам, что нужно делать. Перед списком CSS свойств для maket нужно будет вставить следующую комбинацию:
* html #maket { height: 100%; }
Это правило будет применено только для браузера Internet Explorer 6, остальные не будут его учитывать и выполнять.
Итак, окончательный вид Style.css с прижатым к низу экрана футером будет следующим:
Body, html { margin:0px; padding:0px; height: 100%; } * html #maket { height: 100%; } #maket { width:800px; margin:0 auto; min-height: 100%; } #header{ background-color:#C0C000; } #left{ background-color:#00C0C0; width:200px; float:left; } #right{ width:200px; background-color:#FFFF00; float:right; } #content{ background-color:#8080FF; margin-left:202px; margin-right:202px; } #footer{ background-color:#FFC0FF; clear:both; height: 50px; margin-top:-50px; width:800px; margin-left: auto; margin-right: auto; } #rasporka { height: 50px; }
Ну, а окончательный вид Index.html был приведен чуть выше. Все, на этом серию статей, посвященную блочной верстке 2 и 3 колоночных фиксированных и резиновых макетов сайта, можно считать завершенной.
Можете также посмотреть видео «Работа с Html тегом div»:
Удачи вам! До скорых встреч на страницах блога сайт
Вам может быть интересно
Блочная верстка - Создаем двухколоночный, трехколоночный и резиновый макеты для сайта
DiV верстка - Создаем блоки для двухколоночного макета в HTML, определяем их размеры и задаем позиционирование в CSS
Если обувь это итоговая составляющая любого наряда, то футер для сайта 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 среде, кто-то начинает интересоваться инфраструктурой электронного магазина, инстинктивно прокручивая дальше…
Негативное пространство необходимо для читабельности контента. Вообще, «подвал» не для навигационных целей, в отличии от меню или карты сайта. Лишь в редких случаях, сайты электронной коммерции размещают в футере отдельные категории товаров (
Это кошмар какой-то! Почему подвал вашего сайта опять «всплывает » и сдвигает дизайн? Неужели нельзя нормально прижать футер к низу страницы чем-нибудь? Контентом или кирпичами хотя-бы! Кирпич в монитор не пролазит?
Понятно, тогда сидите и ничего не делайте, пока не прочитаете нашу статью до конца.
Делаем правильный футер для своего сайтаМногие владельцы сайтов встречаются с этой проблемой, когда 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 . Благодаря этому он будет отображаться как строка таблицы.