02.05.2024
Изменения в HTML
Футер находится внизу страницы после зоны контента, его принято прижимать к низу сайта с помощью Flex элементов. И оборачивать футер в тег div с классом wrapper.
Между тегами Body и heder создал <div class="wrapper"></div>
Переименовал семантический тег heder в тег <nav>
Потому что полоса с кнопками: Блог, проекты контент о сайте. Называется навигационная панель сайта. Её размещают в семантическом теге <nav>.
Между дивам wrapper и тегом nav, делаем пустую строку. В неё пишем <header class="header"></header>
Это будет место под логотип с картинкой.
Дальше я запихал все элементы на странице, в див врапера.
И получается, все последующие элементы на странице которые я буду писать должны быть в диве врапера.
Ставим курсор сюда
Нажимаем на клаве Enter, делаем пустую строчку
Туда пишем <main class="main"></main>
И ставим таб, должно быть так
В теге <main> размещают весь основной контент сайта, который читает пользователь.
Код получился такой
Теперь все элементы страницы находятся в главном диве врапер, как это и должно быть. Это я сделал подготовку страницы к добавлению футера
Футер я буду писать отдельно чтобы не на косячить с основной html страницей.
Проверка работоспособности
На досуге чтобы проверить, работает ли правильно, сделал цвета
И ожидаемо браузер всё покрасил.
Чертёж подвала
Нужно придумать дизайн футера
Дизайн такой
Отдельный HTML файл
Создал отдельный Html файл, чтобы не накосячить
И базовую структуру html c css файлом
Вопрос с иконками футера
Раздел соц сети иконки в футере делают с помощью Font Awesome, это библиотека готовых иконок. Чтобы не мучится с рисовкой иконок буду использовать её.
Переходим на официальный сайт https://fontawesome.com/download
Font Awesome бывает 2-х видов платный и бесплатный, бесплатного мне хватит мне нужно всего лишь 6 иконок.
Нюанс: Сайт у меня, пока будет лежать на флешке, а значит чтобы иконки соц сетей отображались даже тогда когда комп не подключен к интернету, иконки надо скачивать. Вместе со всей библиотекой.
Сделал папки src – icons как в основном html файле туда буду складывать иконки
Нажимаем сюда, Архив скачается, Распаковываем его.
Закидываем папку с иконками в папку сайта
И самое важное надо запомнить где лежит этот файл alLmin.css
Теперь в html коде пишем тег <link rel="stylesheet" href="">
И прописываем путь до файла alLmin.css в кавычках
Сначало ставим ./ потом пишем путь
Тем самым я подключил библиотеку иконок, и они будут отображаться без подключения к интернету.
Дальше я прописал семантические теги html как в основном html файле, и добавил семантический тег Footer.
Теперь можно писать код футера
HTML Код футера
04.05.2024
Внутри футера сделал див в нём будут лежать все компоненты футера.
Внутри дива container создал див с классом box-1
Внутри него создаём список с классом link. И помещаем туда все ссылки
Делаем пробел
И пишу туда див с классом box-2
И первый и второй раздел, должны быть в главном диве container
Внутри дива box-2 пишем <p> class="brand">Социальные сети</p>
Создаём Ul c класcом
Внутри тега Ul cтавим тег li
Внутри тега li пишем тег с заглушкой <a href="#"></a>
Пишем эту строчку <i class="fa-brands fa-youtube"></i>
Эту строчку я взял от сюда скапировав
Вставляем остальные иконки
Теперь пишем зону коперайта
За приделами и дива container, но в пределах тега footer ставим пробел
Пишем див с классом копирайт
Внутри дива копирайт делаем див copyright-txt
И пишем текст
Код получился такой
Результат
Осталось написать CSS стили.
CSS код
Залил футер цветом
вот так выглядит
Убрал кружки
Результат
Убрал подчёркивания, залил цветом.
Результат
Изменил размеры цвет текста, задал интервал.
Результат
Задал положение всему диву container
Результат
Нужно footer и div container сделать flex элементами, чтобы ссылки и иконки были в одну линию.
Результат
Делаем небольшое расстояние между ссылками и иконками
Результат
Разносим ссылки по разные стороны
Вот так это всё выглядит
Изменил текст социальные сети
Результат
Делаем иконки в строчку
Результат
Увеличиваем расстояние между иконками справа
Результат
Сделал размеры и рамку вокруг иконок
Результат
Делаем рамку кругом
Результат
Выровнял иконки внутри круга по центру
Результат
Сделал смену цвета иконки при наведении мыши
Результат
Сделал полоску копирайта
Результат
Изменил вид ссылок
Результат
Не ровно расположился текст социальные сети
Это стандартные отступы виноваты
Сбросил стандартные отступы, и задал всему что есть в футере стиль шрифта Arial, Helvetica, sans-serif
Результат
В полностью развёрнутом браузере
В мобильном режиме
Как прибить футер к низу страницы
08.05.2024
Осталось прибить футер к низу, чтобы он был всегда внизу страницы даже в мобильном режиме.
Для начала сделал разметку чтобы было видно.
Пометка от 21.10.2025 года:
Тут есть ошибка: У блока main я сделал фиксированную высоту 50 пикселей. Так лучше не делать. Из-за этого, блок main не будет растягиваться на всю высоту содержимого страницы и будет стоять на месте. А контент в блоке main будет выходить за футер, если его будет много.
Убери в блоке Main строчку height: 50px;
В дальнейшем в статьях ты увидишь косяк, который мне придётся исправлять из-за этого.
Результат
- Красный - Это heder, шапка сайта.
- Зелёный - Это nav, место где у меня навигационная панель.
- Светло-фиолетовый - Это main, там будет зона контента.
- Серый - Это footer.
- Белый - Несуществующее пространство.
У меня все части сайта лежат в диве wrapper он самый главный, ему надо задать минимальную высоту 100%
Но ещё нужно задать высоту 100% всей Html странице и тегу <body> иначе ничего работать не будет.
Потому что див wrapper лежит в теге <body>, значит тег <body> это начальник дива wrapper, а сам тег <body> лежит в теге html, значит тег html старше всех и он начальник их обоих.
У всех троих <Html> <body> и див wrapper должна быть высота 100%, тогда всё будет правильно работать.
Прописывается это так
Ставим все элементы на странице друг за другом через display: flex
Результат будет такой
Это значит что всё примерилось правильно, теперь все элементы страницы ставим в столбик с помощью этой команды.
Всё вернётся обратно
Теперь прибиваем футер к низу страницы, вот этой командой
Результат будет такой
А если контента на странице будет много, будет полоса прокрутки у страницы
Перенёс футер в основной Html файл
Подключил заново библиотеку иконок в основном файле.
Перенёс HTML код который я писал, в основной файл
CSS стили тоже перенёс, и заменил цвет футера на чёрный.
Результат
Прибил футер к низу
Результат
Можно переходить к середине сайта, то есть к main контенту
Если бы я знал, куда я лезу: Коммент из 2025 года.