Как сделать красивый подвал в html
Обновлено: 25.04.2024
Сайты тоже имеют свой скелет. Но о его особенностях спрашивать врачей бесполезно. Да и ветеринары тоже не в курсе строения сайта. Об этом ведомо лишь верстальщикам. Именно от них зависит строение скелета будущего ресурса. А главным способом создания костей его скелета является блочная верстка.
Верстка сайта – ремесло для посвященных
Есть в верстке сайта что-то таинственное. Но это до тех пор, пока не познакомишься с этим ремеслом поближе. Начинаем наше посвящение:
Следующим этапом разработки сайта после создания его макета является верстка. Задача верстальщика перенести с помощью html кода и таблиц css скелет будущего сайта в виртуальный мир. Проще говоря, перенести размеры и пропорции ресурса в форму, понятную для браузера.
В процессе верстки кодом html происходит разбивка « скелета » сайта на части. А с помощью css ( каскадных таблиц стилей ) задаются размеры его « костей », цвет и расположение.
Различают несколько видов верстки:
Также к основным недостаткам табличного кода относится его долгая загрузка и плохая индексация содержимого поисковыми системами.
Содержимое страницы, сверстанной на основе таблиц, не будет отображено до тех пор, пока не загрузятся все данные. Блочная верстка позволяет отображать каждый загруженный элемент отдельно.
Плохая индексация табличных страниц объясняется большими промежутками между блоками текста, расположенного в разных ячейках таблицы.
Теперь табличная верста редко используется в качестве основного метода создания сайтов. Сейчас ее применяют лишь для структурирования табличных данных и расположения графических изображений.
II. Блочная – в данный момент является основным способом верстки. В отличие от табличной блочная верстка обладает рядом преимуществ:
- Отделение стиля элементов от кода html ;
- Возможность наложения одного слоя на другой – такая возможность во многом облегчает позиционирование элементов.
- Лучшая индексация поисковиками;
- Высокая скорость загрузки страницы, состоящей от взаимно независимых элементов;
- Легкость создания визуальных эффектов ( выпадающих меню, списков, всплывающих подсказок ).
Основным недостатком блочной верстки является некая « двусмысленность » понимания ее кода различными браузерами. Поэтому часто html страницы приходится « доводить » путем использования специальных хаков.
С появлением блочной верстки родилось такое понятие, как «кроссбраузерность». Из-за различия отображения одного и того же элемента в разных браузерах верстальщикам приходится вставлять в основной html целые куски кода (хаки).
Действие хака является узкоспециализированным и решает проблему некорректного отображения лишь в одном браузере.
Основным элементом, применяемым в блочной верстке, является тег . Участок кода, отделенный этим тегом, называется слоем. Все стилевые решения вынесены за границы кода html в каскадные таблицы стилей. Доступ к ним осуществляется через идентификаторы или классы css :
Как происходит блочная верстка?
Перед началом верстки готовый psd макет сайта в графическом редакторе разрезают на блоки ( слои ). В отдельную папку помещают вырезанные фоновые картинки, которые будут прикрепляться отдельно к каждому слою:
Для примера возьмем вот такой макет сайта, созданный в Photoshop . Сначала в текстовом редакторе с помощью div задаем структуру будущего ресурса и присваиваем каждому слою свой селектор id . Получается такая структура:
Затем к готовой структуре сайта на html строкой прикрепляем файл css . После чего добавляем в него стилевое описание каждого слоя, позиционирование относительно других элементов и его размеры.
Полный код примера index.html :
Содержимое файла style.css :
Вот так наш пример блочной верстки сайта выглядит в окне браузера:
Конечно, этот пример является лишь наглядным пособием для демонстрации того, как происходит блочная верстка. Настоящая верстка происходит с использование фоновых изображений и логотипов, подключаемых в css . А также с включением в html и css кода хаков для оптимизации отображения во всех браузерах.
Для редактирования кода страниц сайта используются специальные редакторы html . Многие из них способны автоматически генерировать код визуальных элементов, создаваемых в них пользователем в режиме « дизайн ». Но такой код не является валидным, и чаще всего нуждается в « ручной » доводке:
Свое роднее!
С помощью рассмотренных здесь основ блочной верстки можно легко сверстать свой сайт самостоятельно. Тогда будущий ресурс будет более родным и знакомым. Ведь в его скелете все косточки вы « перемоете » собственными руками.
Эта серия мануалов покажет вам, как создать и настроить веб-сайт с помощью CSS, языка таблиц стилей, используемого для управления внешним видом сайтов. Вы можете выполнить все инструкции по порядку, чтобы создать тестовый веб-сайт и познакомиться с CSS, или вразброс использовать описанные здесь методы для оптимизации других проектов CSS.
Для работы с CSS вам нужно иметь базовые знания по HTML, стандартному языку разметки, который используется для отображения документов в браузере. Если ранее вы не работали с HTML, рекомендуем предварительно изучить первые десять руководств серии Создание веб-сайта с помощью HTML.
В последнем мануале этой серии по CSS мы поговорим о том, как создать статический футер и зафиксировать его (он будет оставаться в нижней части области просмотра, когда посетитель прокручивает страницу вниз).
Методы, которые использованы здесь, можно применить к любым другим проектам, разработанным на CSS и HTML.
Требования
Чтобы выполнить эти инструкции, вам следует подготовит среду согласно мануалу Подготовка проекта CSS и HTML с помощью Visual Studio Code.
В качестве контента для футера мы используем несколько значков социальных сетей. Если вы тоже хотите использовать эти значки, загрузите их и сохраните в папке images как:
Примечание: Чтобы загрузить изображение, перейдите по нужной вам ссылке, нажмите Ctrl и кликните левой кнопкой (на Mac) или правой кнопкой мыши (в Windows) по изображению, выберите «Сохранить изображение как» и сохраните его в своей папке images. Сохраните изображения с указанными именами.
После этого вы можете приступать к работе.
Создание класса для оформления футера
Сначала мы определим класс footer, добавив следующий фрагмент кода в конец файла styles.css:
Сохраните файл styles.css. Как всегда, новый раздел кода начинается с комментария (/* Footer */). Затем мы определяем класс footer и объявляем несколько правил стиля. Первое правило объявляет параметр position со значением fixed, что означает, что элемент не будет перемещаться из указанного вами расположения, когда пользователь будет прокручивать страницу вниз. Это расположение задается следующими двумя объявлениями: bottom:0 и left:0 – 0 пикселей слева и 0 пикселей снизу области просмотра браузера.
Откорректировав эти значения, вы можете изменить расположение элемента на странице. Однако помните: любое значение, кроме нуля, должно включать суффикс px после числа. В наборе правил также указаны ширина, высота и цвет фона класса footer.
Добавление футера на страницу
Чтобы добавить контент для футера, мы создадим новый контейнер
Сохраните файл index.html и загрузите его в браузере.
Если вы не знаете, как открыть оффлайн-файл, обратитесь к нашему руководству Основы работы с html-элементами (раздел Просмотр оффлайн HTML-файла в браузере).
На экране будет пустой контейнер для футера, который остается на месте при прокрутке страницы вверх и вниз.
Теперь можно добавить контент – сделаем это в следующем разделе руководства.
Добавление и оформление контента футера
Следующим шагом будет добавление и стилизация элементов меню в левой части футера. Эти пункты меню можно использовать для ссылки на другие страницы вашего сайта. В настоящее время на нашем сайте есть только одна страница, поэтому вы можете использовать условные ссылки. Если позже вы создадите новые страницы для вашего сайта, вы сможете добавить в футер новые пункты меню и прикрепить правильные ссылки.
Вернитесь к styles.css и добавьте следующий фрагмент кода в конец файла:
Давайте подробно рассмотрим каждый из созданных нами наборов правил:
- Первый набор определяет класс footer-text-left, который будет использоваться для стилизации текста меню. Обратите внимание, свойство float имеет значение left – следовательно, текст, оформленный по этому классу, будет размещен в левой части страницы. Свойство word-spacing предоставляет дополнительное пространство между элементами меню. Однако если какой-либо из пунктов вашего меню состоит из более чем одного слова, вам нужно создать класс для стилизации пунктов меню (недостаточно просто изменить значение интервала между словами).
- Второй набор правил использует псевдокласс hover, чтобы сделать желтым цвет фона того текста, на который пользователь наводит курсор.
Теперь давайте пропишем в файле index.html пункты меню. Вставьте следующий выделенный фрагмент кода в контейнер footer, который вы создали ранее:
Этот фрагмент кода добавляет два элемента меню (about и credits), связывает эти элементы и стилизует текст с помощью только что созданных классов footer-text-left и a.menu.
Сохраните оба файла и перезагрузите веб-страницу в браузере. В левой части закрепленного футера появится три пункта меню: home, about и credits. При наведении на них фон будет менять свой цвет на желтый.
Добавление значков социальных сетей
Давайте добавим в наш футер значки социальных сетей, которые можно использовать для ссылки на свои учетные записи. Если вы хотите использовать значки для других соцсетей, вы можете найти их бесплатные логотипы в Интернете и загрузить их в папку images, а затем добавить на свою страницу. Откройте styles.css и вставьте следующие три набора правил в конец файла:
Остановимся на этих правилах подробнее:
- Первый набор правил определяет класс footer-content-right и присваивает определенные значения его внутренним полям, внешним отступам и выравниванию (padding, margin и float соответственно). Этот набор правил нужен для стилизации элемента , который будет содержать значки социальных сетей.
- Второй набор создает класс icon-style, который задает высоту и внешние поля для значков социальных сетей, учитывая их размер и расположение.
- Третий набор правил использует псевдокласс hover, что изменит цвет фона значка на желтый при наведении курсора.
Примечание: Не забудьте заменить нашу ссылку в коде ссылками на свои соцсети. При необходимости откорректируйте пути к файлам.
Этот фрагмент кода создает контейнер , которому присваивается класс footer-content-right. Внутри этого контейнера div находятся три значка социальных сетей, вставленные с помощью HTML-тега ; с помощью тега HTML каждое изображение поддерживает ссылку на соответствующую соцсеть.
Также мы добавили атрибут alt – это альтернативный текст, описывающий каждый значок. При создании веб-сайтов альтернативный текст следует добавлять ко всем изображениям, чтобы обеспечить доступность сайта для людей, использующих скринридеры. Чтобы узнать больше об использовании альтернативного текста с HTML, читайте мануал Добавление изображения на веб-страницу с помощью HTML.
Сохраните файл index.html и перезагрузите его в браузере. Теперь на вашей странице должен быть зафиксированный футер, содержащий в правой части ссылки на ваши социальные сети. Ссылки должны менять цвет фона при наведении на них курсора.
Заключение
Мы добавили статический футер, который всегда отображается в нижней части области просмотра, когда посетитель прокручивает страницу вниз. Вы можете продолжить изучение возможностей CSS, изменив значения в созданных нами классах или добавив в файл index.html новый контент.
Поздравляем, работа над тестовым сайтом завершена! Теперь вы знаете, как стилизовать HTML-элементы с помощью определения классов и псевдоклассов CSS. Вы также ознакомились с несколькими вариантами верстки сайта, которые можно реализовать через различные HTML-элементы и CSSстили.
CSS можно изучать бесконечно, но описанные в этой серии методы обеспечат вам прочную основу для развития ваших навыков работы с CSS и подготовят вас к изучению других инструментов (таких как JavaScript) и фреймворков (как, к примеру, Tailwind). Также у вас теперь есть все файлы и папки, необходимые для развертывания готового веб-сайта в облаке.
Для практики попробуйте изменить что-нибудь на веб-сайте, который у вас получился. Вот пара идей, которые могут вас заинтересовать:
Актуальность HTML верстки очень высока. На всех фриланс-биржах всегда висит по 10-20 заказов на срочную верстку, также HTML+CSS+JS позволяют клепать пусть плохие, но приложения под Android и iOS. Да и любой компании нужен работающий сайт, а не только красивые дизайны. Что такое обычный проект для верстальщика? Это 5-10 страниц в psd/pdf, которые нужно очень качественно сверстать за 2-3 дня со всеми правками и спонтанными идеями клиента.
Давайте сверстаем подвал для сайта и поймем, удастся ли получить удовольствие и деньги от процесса верстки своих же макетов.
Предварительно, установите в свой редактор Emmet. Пройдите flexboxfroggy.
Самое важное — заранее продумать структуру сайта, расставить div’ы в необходимой последовательности и с правильной вложенностью. Если вы верстаете страницу сразу, без дизайна (например, клепаете 5-10 лэндингов за рабочий день), то лучше набросать структуру хотя бы на листочке, иначе вы будете переверстывать страницы сайта по несколько раз.
Старайтесь всегда все центровать. Это сильно упрощает работу с адаптивом.
Думаю, что наиболее важно рассмотреть display . Display это свойство, которое определяет, как элемент будет показан на странице. Самые распространенные и надежные значения это block, inline, list-item и none . Block делает элемент блочным, inline делает элемент строчным, inline-block делает элемент внутри блочным, но при этом он обтекается другими элементами страницы подобно строчному, list-item делает элемент блочным и добавляет маркеры списка, none прячет элемент (а hidden со свойством visibility позволит элемент скрыть, но оставить место пустым). Также, none убирает элемент из разметки, что не всегда допустимо.
Если на странице есть заголовки H1 и H3 , но дизайнер не добавил H2 , то разработчик не может себе позволить пропустить H2 . Иерархия заголовков важна для поисковых систем и скрин-ридеров. Такой заголовок верстается, и вырывается из потока с помощью position: absolute , уменьшается и прячется за пределы экрана.
Пути к файлам прописываем следующим образом: src="https://your-scorpion.ru/make-footer-site/img/image.jpg" . Можно писать и src="https://your-scorpion.ru/img/image.jpg" , но могут возникнуть проблемы при заливке файлов на хостинг. Путь к картинке прописывается так, background-image: url("../img/background.jpg"); , здесь мы видим выход на уровень вверх за счет ../ .
Вооружившись этим знанием, накидываем вложенность div’ов и общую структуру, не забывая все грамотно оформлять отступами. Ах да, и никаких таблиц, только блоки. В этом и заключена основная суть HTML-верстки: правильная расстановка div'ов и грамотное оформление через классы CSS. Конечно, верстальщик должен прикрутить js-скрипты. Но эта работа выходит за рамки данного урока, да и бОльшая часть скриптов требует всего-то прописать класс. Структуру набрасывать легко:
Пишем примерно такой HTML-код:
Набросав структуру, можно вставить картинки и текст, и любой другой контент. Не забываем установить плагин LiveServer, чтобы не обновлять страничку вручную + настраиваем автосохранение. Смотрим в самых популярных браузерах на получившееся безобразие. Пока что клиенту рано показывать наш результат работы, иначе придётся оправдываться за качество работы. И начинаем писать классы CSS.
CSS 3 позволяет очень изящно и дёшево сделать страницу красивой и соответствующей дизайну. Плавные смены оттенков текста, сложные градиенты, отступы от краев, тени/свечение, отрицательные значения, прозрачность и многое другое позволяет сделать огромное количество распространенных элементов дизайна с помощью кода. Пара важных моментов. Firefox плохо отрабатывает transparent, используйте RGBa. IE8 прекрасно отрабатывает transparent, но не знает что такое RRGa.
Важно сразу усвоить принцип использования позиционирования: абсолютное используется для наложения одного элемента на другой (картинка в галерее, стрелки для листания контента и т.п.) и для декоративных элементов. Относительное используется редко, помогает внедрить абсолютный элемент в другой элемент (принцип ребенок/родитель) с привязкой координат.
Float: блочные элементы обычно начинаются с новой строки, и хорошим способом изменить тип обтекания является float. Блочные элементы располагаются друг под другом. Например, float: left; выровняет картинку по левому краю, и текст будет её обтекать. Также элементы встанут в один ряд с переносом строки.
И несколько маленьких советов: лучше использовать P, чем BR. Лучше использовать text-transform:uppercase/lowercase, чем писать капсом. Не используйте inline styling, лучше сделайте все через один style.css. Или множество scss. Используйте normalize.css, хотя его актуальность уже под сомнением. Ранее normalize.css был популярен, но сейчас используется больше по привычке. Сейчас браузеры достаточно близки друг к другу по дефолтным значениям. Элементы, которые встречаются в документы только один раз внутри документа, делайте через идентификаторы, в противном случае используйте классы. Вот CSS код:
В итоге мы получаем фиксированную верстку, которая не разъезжается и смотрится симпатично. Конечно, демонстрация некоторых возможностей CSS не прошла бесследно. Такое количество эффектов не годится для высоконагруженных сервисов, но для большинства задач пойдёт.
Далее, можно улучить код и применить универсальный селектор * , чтобы применить стили сразу на всю страницу.
Обратите внимание, что так мы обращаемся по тегу только к body , так как он на странице всегда один. Ко всему остальному — через классы.
Во второй части серии мы изучим четыре модели шаблонов меню, в которых навигация размещена в « подвале ». За счет этого сохраняется пространство в верхней части страницы.
В предыдущем руководстве мы разработали три шаблона, в которых навигационная панель остается в верхней части веб-страницы независимости от размеров экрана. Целью этих шаблонов была минимизация вертикального пространства на экранах с маленьким разрешением.
Сейчас мы займемся разработкой четырех шаблонов, в которых меню навигации будет расположена в подвале. Переместив навигацию вниз страницы, мы освободим ее верхнюю часть.
Шаблоны
При реализации шаблонов из первой статьи главной нашей задачей было освобождение вертикального пространства и его рациональное использование. Вы хотите предоставить вашим посетителям возможность просматривать как можно больше контента на экране, но чтобы навигация не занимала слишком много полезного пространства. Для этого есть еще одно решение – вынести навигацию в подвал.
Это решение вызывает ряд проблем. В то время как посетители будут более легко и быстро получать доступ к содержимому сайта, им придется «скролить» страницу, чтобы добраться до навигации.
Ниже я перечислил шаблоны, которые мы разработаем в этой статье:
- Только в подвале (Footer only) — меню навигации постоянно находится в подвале;
- Вариации на тему «Только в подвале» — навигация в подвале будет отображаться на экранах с маленьким разрешением, но при появлении свободного пространства будет перемещаться вверх страницы;
- Якорь подвала (Footer anchor) — будет отображать навигацию в подвале на экранах с маленьким разрешением. Для доступа к меню вверху страницы будет выводиться специальная кнопка;
- Фиксированный подвал (Footer fixed) — отображение навигации в подвале даже на маленьких экранах. При этом меню всегда остается доступным, постоянно оставляя навигацию в поле зрения пользователя.
Каждая из этих моделей будет построена по образцу предыдущего шаблона. Сначала мы переместим навигацию в подвал, а затем всячески будем усовершенствовать первоначальный вариант, облегчая доступ к меню.
Как и в предыдущей статье, код меню и связанных с ними элементов будет отображен в соответствующем разделе статьи. Полная версия кода доступна здесь , и его также можно увидеть, посетив демонстрационный режим и включив просмотр исходного кода.
Шаблон «только в подвале»
Этот шаблон помещает навигационную панель в футер. Но, скорее всего, вы не станете использовать его, как есть. Потому что этот шаблон освобождает вертикальное пространство в верхней части страницы, но скрывает навигацию в нижней части. Такой вариант будет прекрасно работать на экранах смартфонов, но его применение на широких экранах теряет всякий смысл:
Но этот шаблон станет основанием для последующих вариаций.
Введение: На самых маленьких экранах мы создаем меню, чтобы вывести в нижней части страницы ссылки вертикальным списком.
Далее мы поработаем с их стилевым оформлением. С помощью медиа-запросов реализуем переходы от вертикального к горизонтальному расположению меню, чтобы при любом разрешении экрана оно оставалось внизу страницы.
Шаг 1: HTML
Давайте взглянем на общую структуру страницы. Ранее навигация была расположена внутри заголовка вместе с логотипом. Теперь же она располагается внутри футера.
Сейчас это тот же самый список ссылок, который мы видели в первой части. Все, что я сделал – скопировал и вставил код, чтобы переместить панель навигации из верха страницы вниз:
Шаг 2: CSS - стили
Список отображает элементы уровней блока один над другим. С помощью стилей мы зададим поля и отступы равные нулю и уберем указатели.
Далее мы зададим верхнюю границу для списка и установим цвет для текущей ссылки:
Так же остальным ссылкам мы присвоим цвет и отступ. Удалим подчеркивание ссылок и сделаем элементы списка блочными для увеличения активной области ссылок. На маленьких сенсорных экранах большая ссылка нажимается легче.
Чтобы немного разнообразить наше меню визуально, я решил в качестве фонового изображения установить ссылкам градиент и сделать фон немного светлее при наведении курсора мыши:
Я применяю стили лишь из эстетических соображений. По умолчанию меню отображается как вертикальный список со ссылками, что нам и нужно:
Шаг 3: Медиа-запросы
Вертикальный список со ссылками, к которому мы применили несколько стилей, выглядит прекрасно до тех пор, пока окно браузера не достигнет значения 42.5em ( 680px ). После этого горизонтальное пространство становится слишком пустым. Поэтому мы усовершенствуем наш пример, сделав для меню переход из вертикального положения в горизонтальное.
Реализация такого перехода основана на свойстве float для ссылок внутри списка. Остальное сделано для эстетики. Сначала я задал для списка фон, который визуально разделит панель навигации и остальные элементы футера. Я так же установил отступ и нижнюю границу. Так как ссылки стали плавающими, я добавил списку свойство overflow: hidden .
У ссылок появился отступ: 5% по левую сторону. Такой же, как и у всех элементов страницы. Также у ссылок я убрал границы и фон. Так как ранее я использовал градиент для фона, мне нужно « очистить » свойство background-image у ссылок, включая состояние hover :
Следующий медиа-запрос просто увеличивает пространство вокруг ссылок, когда окно браузера становится шире:
Мы могли бы оставить все как есть и просто увеличивать пространство между ссылками по мере необходимости. Но я решил сместить ссылки к правому нижнему углу, поскольку там образуется свободное место.
Прежде всего, я установил свойству float значение right . После настройки отступов ссылки становятся в нужное мне место. Также полностью убираем фон у панели, чтобы на его месте оказался общий фон:
И снова применяем медиа-запрос, чтобы настроить пространство между ссылками. На этом мы остановимся, а вы самостоятельно можете добавить столько разрешений экрана, сколько потребуется:
Чтобы реализовать этот шаблон, не нужно прилагать много усилий. Нужно только переместить HTML – разметку для панели навигации в нижнюю часть страницы. Большая часть CSS – стилей применяется для дизайна, и вы можете настраивать меню, как вам нравится. Возможно, вам захочется переместить вертикальное меню в горизонтальное положение.
Основное достоинство меню, расположенного в футере - это то, что оно может содержать сколько угодно ссылок. При маленьком разрешении экрана вы можете использовать вертикальное пространство, а когда образуется лишнее место, расположить ссылки горизонтально. Главное убедится в том, что будет достаточно места для нажатия всех пунктов меню.
Возможно, вы не захотите использовать этот шаблон в его текущем виде, потому далее мы рассмотрим несколько вариаций на эту тему.
Вариация шаблона «Только в подвале»
Этот шаблон – вариация предыдущего. Вплоть до разрешения 64em ( 1024px ) в коде ничего не меняется и, на странице, будет выглядеть абсолютно также. Но вместо того, чтобы перемещать меню в правую часть футера, когда там появляется место, мы поместим его в правую часть заголовка:
На маленьком экране пользователю придется пролистывать страницу в самый низ, чтобы найти меню, но при большом разрешении меню будет доступно вверху страницы. Так как код идентичен предыдущему примеру, я опишу только различия.
Вступление: Для маленьких экранов оставим все как есть. Начнем с вертикально расположенного меню, и как только места станет достаточно, превратим его в горизонтальное. Новый код начнет действовать, когда ширины экрана окажется достаточно для модификации меню. Вместо того чтобы поместить меню в футере справа, мы перенесем его на самый верх страницы.
Шаг 1: HTML
Единственное отличие в html – разметке между этим шаблоном и предыдущим заключается в том, что навигационная панель находится не в футере, а просто помещена в самый низ страницы. На малых экранах различий в отображении не будет, но намного легче поместить панель в заголовок:
Шаг 2: CSS - стиль
В CSS стилях шаблонов лишь одно отличие. Так как меню теперь находится вне футера, нам нужно каким – то образом выделить его и обозначить границы:
Шаг 3: медиа - запросы
Первая пара запросов ( для 42.5em и 56em ) такая же, как и в предыдущем шаблоне. Различия начинаются с ширины в 64em. Ранее мы перемещали меню в правую часть футера. Здесь же мы поместим его в правую часть заголовка страницы.
Главное, на что нужно обратить внимание – позиционирование элемента nav, который содержит меню. На этот раз мы не можем воспользоваться свойством float , так как панель навигации находится вверху страницы. Вместо этого мы используем позиционирование.
Тег body позиционирован относительно ( position: relative ). Благодаря этому, элемент nav мы можем позиционировать абсолютно, установив значения top и right .
Все остальное почти идентично первому шаблону из этой статьи. Изменены лишь отступы, убран фон и границы:
Как только мы переместили панель в верхнюю часть страницы, то остальные медиа-запросы становятся нужны лишь для настройки расстояний между ссылками. Я остановился на ширине в 90em, а вы можете продолжить изменять значение до необходимой вам ширины:
Подсказки
Этот шаблон имеет все те же преимущества, что и предыдущий. В нем можно отобразить большое количество ссылок. Он лучше первого тем, что перемещает меню вверх страницы, когда появляется достаточно места. Когда именно – зависит от вашего дизайна. И не забывайте оставлять достаточно места для нажатия пальцем на ссылку.
Этот шаблон не лишен того недостатка, что на маленьких экранах придется листать в самый низ страницы, чтобы добраться до меню.
Якорь в футере
Шаблон якорь в футере должен решить проблему скроллинга путем помещения в меню якоря, а на верх страницы – ссылки на этот якорь.
Введение: На маленьких экранах мы применим схему с вертикальным меню. Но включим в нее CSS – кнопку, при клике по которой мы переместимся в футер - меню. Когда ширины экрана станет достаточно для размещения навигации, то кнопку мы будем скрывать.
Шаг 1: HTML
Шаг 2: CSS - стили
Единственная разница CSS – стилей в том, что в этом шаблоне мы оформим ссылку в виде кнопки и позиционируем ее в правой стороне заголовка с помощью свойства float: right и отступов от краев страницы.
Чтобы задать ссылке вид кнопки, ее свойство display установим в значение block и добавим отступы. После того, как уберем подчеркивание и сменим цвет на белый, добавим границу небольшого радиуса и фон.
И снова мы используем градиент, чтобы сделать кнопку более кликабельной. В некоторых браузерах этот прием не сработает, но в остальных кнопка будет выглядеть более объемной. Для состояния hover сделаем цвет более светлым:
Шаг 3: Медиа - запросы
При разрешении экрана в 64em ( при котором меню перемещается в заголовок ) мы убираем кнопку, задав свойству display значение none . Все остальное остается без изменений:
Этот шаблон имеет такой же функционал, как и предыдущий. Вертикальное пространство вверху страницы используется по минимуму. Как и в случае с остальными шаблонами убедитесь, что ссылки имеют достаточное для нажатия пальцем пространство. Якорь обеспечивает быстрый доступ к меню, несмотря на то, что оно расположено в футере.
Недостатком является резкий переход сверху страницы в ее низ. Это может озадачить посетителей, которые сразу не поймут, куда они переместились. Один из способов избежать этого – добавить в футер ссылку " Наверх ". Я не стал этого делать, но она поможет решить две проблемы: быстрый доступ к заголовку страницы и сориентировать потерявшегося пользователя.
Еще один способ решения этой проблемы я опишу в следующем шаблоне:
Фиксированный футер
Шаблон с якорем в футере решает проблему быстрого доступа к панели навигации, а этот сохраняет меню постоянно видимым, поэтому никаких перемещений не требуется. Мы используем для этого фиксированное позиционирование и закрепим панель внизу страницы. Располагая меню внизу, мы экономим много пространства на маленьких экранах.
Введение: Из-за большого количества ссылок в меню мы начнем использовать шаблон с якорем для самых маленьких разрешений. Как только пространство позволит, мы удалим кнопку перехода в меню, сделаем меню горизонтальным и перенесем его в нижнюю часть страницы. И будем « держать » его там до тех пор, пока не станет достаточно места, чтобы переместить меню в верхнюю часть страницы.
Шаг 1: HTML
Разметка html идентична предыдущему шаблону.
Шаг 2: CSS - стили
И здесь все остается без изменений. Переходим к шагу 3:
Шаг 3: Медиа - запросы
Здесь будет новый код. Как только ширина окна браузера достигает 37.5em ( 600px ), мы размещаем меню вертикально. Сначала мы добавим отступы к нижней части футера, иначе он опустится ниже фиксированного меню. Кнопка со ссылкой на якорь теперь не нужна, поэтому отключим ее.
Чтобы зафиксировать панель навигации, применим стили к элементу nav. Позиционирование сделаем фиксированным ( fixed ) и значение свойства bottom установим в 0. Свойство z-index предотвратит « наезд » информации о сайте на меню. Подойдет любое положительное значение. Я выбрал 10. Мы также зададим фон элементу nav . Значение свойства width установим 100%, потому что ширина у навигационной панели по умолчанию не равна ширине страницы:
Все остальное без изменений. Внутри навигационной панели ссылки выравнены слева с помощью float и имеют отступы. Цвет фона и градиент удаляем.
Повторюсь, что эта модель использует минимум вертикального пространства в верхней части страницы. Шаблон решает проблему скрытой навигации и перехода к меню, постоянно сохраняя ее на видном месте.
В нашем примере было много ссылок, чтобы сразу задать фиксированное позиционирование внизу страницы, поэтому я оставил якорь для футера и кнопку перехода к нему на том же месте и в том же размере. Отличным вариантом стало бы уменьшение количества пунктов меню до 4 или 5. Также вместо текста можно использовать иконки.
Этот шаблон на текущий момент нельзя назвать распространенным. Большинство из нас использует пальцы для навигации на мобильных устройствах, поэтому в скором будущем мы увидим больше рабочих примеров и вариаций этого шаблона.
В заключении
Все описанные здесь шаблоны – вариации одной схемы. Вместо того чтобы занимать ценное вертикальное пространство в топе страницы, мы переместили навигацию в подвал. Самый главный плюс этого решения – свободное пространство при маленьком размере экрана. Минус – панель навигации всегда находится внизу.
В первой схеме мы перемещаем меню вверх страницы сразу же, как только там появляется достаточно места. Это помогает, но на маленьких экранах приходится прокручивать страницу, чтобы добраться до меню. Поместив якорь в футере и кнопку наверху страницы, мы частично решили эту проблему. Но осталась проблема дезориентации пользователя.
Перемещение к меню происходит моментально, посетитель оказывается в самом низу страницы и, скорее всего, не может понять, что же произошло.
Фиксированный футер исправляет эту проблему. Меню постоянно отображается внизу страницы. А если заменить текст пунктов меню на иконки, то мы сможем удерживать панель в футере независимо от ширины страницы.
У меня в запасе есть еще несколько шаблонов с навигационными панелями. В следующей статье мы вернемся к вариантам в топе страницы. Мы адаптируем шаблон с использованием якоря таким образом, чтобы не прыгать к навигации, а раскрывать ее на месте.
Это кошмар какой-то! Почему подвал вашего сайта опять « всплывает » и сдвигает дизайн? Неужели нельзя нормально прижать футер к низу страницы чем-нибудь? Контентом или кирпичами хотя-бы! Кирпич в монитор не пролазит?
Понятно, тогда сидите и ничего не делайте, пока не прочитаете нашу статью до конца.
Делаем правильный футер для своего сайта
Многие владельцы сайтов встречаются с этой проблемой, когда footer страницы просто всплывает « кверху ». И тогда непонятно, что делать. Чаще всего таким недостатком грешат дизайны сайтов, сверстанные на скорую руку, самостоятельно ( кружок «очумелые ручки» ) или начинающими веб-мастерами.
При этом на первых порах жизни сайта ничего ужасающего не происходит. И такая идиллия продолжается до тех пор, пока контент давит « своим весом » на подвал, не давая ему подняться вверх. Но стоит разместить на странице материал меньшего объема, и недавно « спокойный » футер моментально поднимается вверх, приводя весь дизайн сайта в неподобающий вид.
Для устранения этого « дефекта » сверстанного шаблона не обязательно тратиться на услуги веб-мастера. Чаще всего футер сайта можно поставить на место самостоятельно. Рассмотрим все возможные варианты устранения подобной проблемы:
Первый способ
Первый способ « привязать » подвал « к дну » страницы построен на основе CSS . Для начала приведем код примера, а затем более подробно рассмотрим его реализацию:
Для того чтобы приклеить подвал к низу страницы тег мы вынесли за пределы контейнера ( слоя wrapper ). Растягиваем всю страницу и содержимое « тела » до границ экрана. Для этого в коде CSS мы задали высоту тегов и в 100%:
Минимальную высоту слоя-контейнера устанавливаем тоже в 100%. Для случая, если ширина контента будет больше, чем высота контейнера, задаем свойству значение auto . Благодаря этому wrapper будет автоматически подстраиваться под ширину размещенного на странице контента:
Строчка кода « height: 100% » предназначена для старых версий IE , которые не воспринимают свойство min-height .
Чтобы в дизайне страницы отделить место под подвал, мы устанавливаем отступ для тега в 100 пикселей:
На данном этапе мы получили веб-страницу шириной во весь экран и дополнительно 100 пикселей, которые « нейтрализуются » отрицательным значением отступа для футера ( margin: -100px ) при установленном для него относительном позиционировании ( position: relative ). Таким образом, с помощью отрицательного значения отступа мы « сдвигаем » подвал в область контейнера, для которого установлена высота в 100%.
В данном примере разметка веб-документа задана с помощью сравнительно новых тегов HTML 5 , которые могут быть неправильно интерпретированы устаревшими версиями браузеров. Из-за этого весь дизайн страницы может быть отображен некорректно. Чтобы избежать этого, нужно новые теги из арсенала 5 версии языка гипертекста заменить на обычные :
Усовершенствованный вариант
Рассмотренный выше способ того, как сделать футер внизу страницы « незыблемым » не всем подходит. Если в будущем вы собираетесь модифицировать и совершенствовать дизайн своего сайта с помощью всплывающих окон, тогда лучше отказаться от использования предыдущей реализации.
Чаще всего в реализации pop-up окон используется свойство CSS z-index . С помощью его значений задается порядок наложения слоев друг на друга.
Чем больше значение z-index элемента, тем выше он будет находиться в общем стеке « наслоения ».
Но из-за того, что в предыдущем примере мы использовали отрицательное значение отступа для футера, нижняя часть всплывающего окна будет перекрываться верхней областью подвала. Даже несмотря на то, что оно будет иметь большее значение z-index . Потому что у родителя всплывающего окна ( wrapper ) значение этого свойства все равно меньше.
Читайте также: