Делаем простой 3-х колоночный шаблон
На одном из предыдущих уроков мы разобрали процесс создания простого 2-х колоночного шаблона CSS. А сейчас продолжим тему создания шаблонов CSS и построим 3-х колоночную структуру страницы.
Структура разметки HTML
Разметка, которую мы будем использовать, выглядит следующим образом:
<div id="body"> <div id="header"></div> <div id="main"> <div id="content-1"></div> <div id="content-2"> <div id="content-2-1"></div> <div id="content-2-2"></div> </div> </div> <div id="footer"></div> </div>
Вот как используются элементы разметки:
#body
: контейнер, который устанавливает общую ширину шаблона и центрирует содержание по горизонтали в окне браузера.#header
: место для размещения заголовка. Включив данный элемент в шаблон, мы делаем "завершенную" страницу.#main
: элемент, в котором размещается содержание колонок. В нашем уроке для него не будут использоваться правила CSS, но при решении реальных задач такой элемент является очень практичным для определения дополнительных стилей.#content-1
: элемент, который содержит левую колонку.#content-2
: контейнер для средней и правой колонок.#content-2-1
: элемент, который содержит среднюю колонку.#content-2-2
: элемент, который содержит правую колонку.#footer
: нижний колонтитул страницы размещается здесь.
Конечно, некоторые из вас скажут, что контейнеры #main
и #content-2
являются не семантическими и лишними. Однако, несмотря на то, что существуют методы построения 3-х колоночного шаблона без элементов #main
и #content-2
, на практике их использование позволяет создавать более понятный для понимания и надежный код CSS. Также контейнеры становятся полезными при разработке визуального дизайна шаблона. Недостатками использования таких элементов является увеличение на несколько байт кода HTML и сложность перестроения шаблона.
Теперь перейдем к разработке CSS.
Шаг 1. HTML без стилей.
Наполним нашу структуру HTML некоторым содержанием и описанием элементов.
Шаг 2. Устанавливаем общую ширину и задаем некоторые цвета.
Сделаем наш шаблон шириной 960 px и центрируем его по горизонтали. Также установим фоновые цвета для элементов:
html, body { margin:0; padding:0; color:#000; background:#fff; } #body { width:960px; margin:0 auto; background:#ddd; } #header { background:#fdd; } #content-1 { background:#bfb; } #content-2-1 { background:#ddf; } #content-2-2 { background:#dff; } #footer { background:#ff9; }
Шаг 3. Создаем первые две колонки.
При построении колонок для первых двух мы будем использовать технику, использованную при создании 2-х колоночного шаблона. Устанавливаем для элементов #content-1
и #content-2
ширину и делаем их плавающими блоками со смещением в разные стороны:
#content-1 { float:left; width:240px; background:#bfb; } #content-2 { float:right; width:720px; }
Теперь элемент #content-1
стал левой колонкой, а элементы #content-2-1
и #content-2-2
располагаются вертикально в правой части страницы.
Элемент #footer
на данном этапе выглядит несуразно, но мы исправим ситуацию позже.
Шаг 4. Завершаем построение структуры колонок полностью.
Разместим элементы #content-2-1
и #content-2-2
в колонки. Для этого повторим действия шага 3 для них - зададим ширину и сделаем плавающими блоками со смещением в разные стороны.
#content-2-1 { float:left; width:480px; background:#ddf; } #content-2-2 { float:right; width:240px; background:#dff; }
Теперь у нас есть три колонки: элемент #content-1
- левая колонка, элемент #content-2-1
- центральная колонка, элемент #content-2-2
- правая колонка.
Шаг 5. Сдвигаем нижний колонтитул вниз.
В данный момент элемент #footer
выводится ниже элемента #content-1
, что не соответствует нашим желаниям. Существует несколько методов для того, чтобы сдвинуть его вниз. Мы воспользуемся правилом clear:both
:
#footer { clear:both; background:#ff9; }
Шаг 6. Завершающие штрихи
Наш шаблон почти готов. Нужно лишь установить отступы для контейнеров, чтобы улучшить внешний вид:
#header { padding:10px; background:#fdd; } #content-1 { float:left; width:220px; padding:10px; background:#bfb; } #content-2-1 { float:left; width:460px; padding:10px; background:#ddf; } #content-2-2 { float:right; width:220px; padding:10px; background:#dff; } #footer { clear:both; padding:10px; background:#ff9; }
Обратите внимание, что отступы по горизонтали увеличивают общую ширину элемента, поэтому нужно вычитать их - элемент #content-1
стал шириной 220px вместо 240px, чтобы учесть отступ в 20px.
Также для элементов #header
, #main
, и #footer
добавлен класс cf
. В нем используются несколько правил, реализующих технику отмены обтекания элементов без структурной разметки. Шаблон становится более надежным в случае добавления плавающих блоков в дальнейшей работе. Также фиксируются несколько ошибок отображения в IE 6 и IE 7. Теперь не нужно использовать правило clear:both
для элемента #footer
и его можно удалить.
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/plBEE53Lek4/lessons.php
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-11-26 » Капитан грузового судна, или Как начать использовать Docker в своих проектах
- 2024-11-26 » Обеспечение безопасности ваших веб-приложений с помощью PHP OOP и PDO
- 2024-11-22 » Ошибки в Яндекс Вебмастере: как найти и исправить
- 2024-11-22 » Ошибки в Яндекс Вебмастере: как найти и исправить
- 2024-11-15 » Перенос сайта на WordPress с одного домена на другой
- 2024-11-08 » OSPanel 6: быстрый старт
- 2024-11-08 » Как установить PhpMyAdmin в Open Server Panel
- 2024-09-30 » Как быстро запустить Laravel на Windows
- 2024-09-25 » Next.js
- 2024-09-05 » OpenAI рассказал, как запретить ChatGPT использовать содержимое сайта для обучения
- 2024-08-28 » Чек-лист: как увеличить конверсию интернет-магазина на примере спортпита
- 2024-08-01 » WebSocket
- 2024-07-26 » Интеграция с Яндекс Еда
- 2024-07-26 » Интеграция с Эквайринг
- 2024-07-26 » Интеграция с СДЕК
- 2024-07-26 » Интеграция с Битрикс-24
- 2024-07-26 » Интеграция с Travelline
- 2024-07-26 » Интеграция с Iiko
- 2024-07-26 » Интеграция с Delivery Club
- 2024-07-26 » Интеграция с CRM
- 2024-07-26 » Интеграция с 1C-Бухгалтерия
- 2024-07-24 » Что такое сторителлинг: техники и примеры
- 2024-07-17 » Ошибка 404: что это такое и как ее использовать для бизнеса
- 2024-07-03 » Размещайте прайс-листы на FarPost.ru и продавайте товары быстро и выгодно
- 2024-07-01 » Профилирование кода в PHP
- 2024-06-28 » Изучаем ABC/XYZ-анализ: что это такое и какие решения с помощью него принимают
- 2024-06-17 » Зачем вам знать потребности клиента
- 2024-06-11 » Что нового в работе Яндекс Метрики: полный обзор обновления
- 2024-06-11 » Поведенческие факторы ранжирования в Яндексе
- 2024-06-11 » Скорость загрузки сайта: почему это важно и как влияет на ранжирование
Все мы сидим в сточной канаве, но некоторые при этом смотрят на звезды Уайльд Оскар - (1854-1900) - английский писатель |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.