—»     —»   Разработка шаблона с колонками одинаковой высоты посредством границ и отрицательных полей в CSS
  Раздел: CSS/Style Sheets   Комментариев: 1  

Разработка шаблона с колонками одинаковой высоты посредством границ и отрицательных полей в CSS



Если вам уже поднадоели статьи о разработке шаблонов подобного типа, то советуем вам всё же ознакомиться с содержанием, так как этот метод отличается. Он основан совсем не на обыденных трюках. Здесь не нужно использовать изображения, не нужно писать лишний код верстки и CSS3, здесь нет псевдо-классов и javascript, более того, здесь нет даже абсолютного позиционирования. Всё, что здесь используется – это границы и отрицательные поля. Пожалуйста, учтите, что данная статья также продемонстрирует вам еще один новый способ, и не даст забыть прошлые варианты реализации.

01. Центрируем колонки без div-обёртки

Этот шаблон будет устроен без обёртывающего div’а:

Разработка шаблона с колонками одинаковой высоты посредством границ и отрицательных полей в CSS

Основа

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

Вёрстка

<div id="header">
    <h2><a href="#">Header</a></h2>
    <p>Lorem ipsum...</p>
</div>

<div id="sidebar">
    <h2><a href="#">Sidebar</a></h2>
    <p>Lorem ipsum...</p>
</div>

<div id="main">
    <h2><a href="#">Main</a></h2>
    <p>Lorem ipsum...</p>
</div>

<div id="footer">
    <h2><a href="#">Footer</a></h2>
    <p>Lorem ipsum...</p>
</div>

Подсказка: всегда включайте ссылки в ваш текст-наполнитель, чтобы видеть возможные нестыковки.

Немного об использовании тела в качестве обёртки:

* всегда оформляйте HTML фоном во избежание того, что фон тела окажется большим по размеру, и выйдет на свободное пространство окна просмотра.
* никогда не оформляйте HTML параметром height: 100%, в противном случе фон тела будет закрашен не более, чем доступно в окне просмотра.

CSS-код

html {
  background: #9c9965;
}

body {
  width: 80%;
  margin: 20px auto;
  background: #ffe3a6;
}

#header {
  background: #9c9965;
}

#sidebar {
  float: left;
  width: 200px;
  background: #d4c37b;
}

#main {
  border-left: 200px solid #d4c37b;
}

#footer {
  clear: left;
  background: #9c9965;
}

Что конкретно делают эти правила?

* мы оформляем HTML фоном во избежание закрашивания видимой области документа за пределами шаблона.
* мы оформляем тело документа автоматическими полями для центрирования шаблона; ширина установлена в процентном соотношении. Объявление фона обозначено для #main.
* мы оформляем фон для #header для того, чтобы замаскировать цвет фона тела документа (то же самое касается #footer).
* цвет фона для #sidebar совпадает с цветом границ у #main. Мы применяем это для того, чтобы колонки выглядели одной высоты.
* подвал обнуляет все предыдущие параметры парящих элементов, и появляется всегда под колонками, в самом низу шаблона.

Если вы взглянете на первый этап, вы заметите, что заголовок в #sidebar не выровнен по верхней стороне вместе с заголовком в #main, и поэтому у нас имеется небольшой пробел в верхней и нижней частях #sidebar. Это происходит потому, что из двух контейнеров лишь у одного контекст форматирован в блочном стиле. Таким образом, поля в #sidebar не преломляются, как это можно наблюдать в #main. Это также означает, что #main не будет содержать парящих элементов, и это означает, что если задать любому разветвленному элементу параметр clear:left, то и #sidebar так будет очищен.

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

#header,
#footer {
  overflow: hidden;
  zoom: 1;
}

#main {
  float: left;
}

#sidebar {
  margin-right: -200px;
}

Заметка: если вы заметите, что все выглядит несколько иначе в браузерах IE версий 6 и 7, то это потому, что в этих браузерах поля по умолчанию преломляются даже внутри блочного контекста. Также следует обратить внимание на следующее:

* overflow и zoom в #header и #footer делает эти элементы новыми блочными элементами
* для #main мы используем параметр парения вместо overflow. Это нужно дабы избежать потенциальных проблем, когда нам придётся сместить какой-нибудь разветвленный контент.
* отрицательное поле сохраняет #main на своем месте, так как на данный момент к элементу применен параметр float, его блок с границами идет следом за блоком полей в #sidebar (отрицательное значение должно совпадать с размерами блока).

Если вы взглянете на второй этап, вы увидите, что граница #main скрывает #sidebar. Это случается из-за столкновения контента. В потоке (древовидном порядке) #main идёт после #sidebar, и поэтому первый элемент накрывает второй.

Позиционирование #sidebar поможет вернуть все на свои места.

#sidebar {
  position: relative;
}

Заметка: если сделаете #main новым блоком, то вы перевернете изначальный порядок. В этом случае, вам нужно применить z-index для того, чтобы #sidebar находился поверх #main.

Если вы взглянете на третий этап, вы увидите, что мы почти справились с этим. Последнее, что осталось сделать, это добавить немного косметики. Мы внедрили основные каскадные таблицы стилей:

<link rel="stylesheet" type="text/css" href="http://tjkdesign.com/ez-css/css/base.css">

а затем добавили правила:

html {
  height: auto;
}

body {
  border: 1px solid #efefef;
}

#header,
#main,
#sidebar,
#footer {
  padding-bottom: 2em;
}

Зачем нам нужны правила?

* мы можем сбросить высоту в HTML-документе, чтобы фон элемента #main не обрезался (этот формат перенимается из основных таблиц стилей).
* мы можем нарисовать границу вокруг всего шаблона.
* так как основные таблицы стилей устанавливают только верхние поля, мы можем создать промежутки в нижней части основных блоков посредством отступов (padding).

Заметка: Правило, отображенное здесь, для HTML, но лучше будет удалить правило из основных таблиц стилей, нежели переписывать объявление в нашем документе.

Это последний этап разработки первого шаблона. Он основан на простых правилах:

html {
  height: auto;
  background: #45473f;
}

body {
  width: 80%;
  margin: 20px auto;
  background: #ffe3a6;
  border: 1px solid #efefef;
}

#sidebar {
  float: left;
  position: relative;
  width: 200px;
  margin-right: -200px;
  background: #d4c37b; /* color must match #main's left border */
}

#main {
  float: left;
  border-left: 200px solid #d4c37b; /* color must match #sidebar's background */
}

#header,
#footer {
  clear: left;
  overflow: hidden;
  zoom: 1;
  background: #9c9965;
}

#header,
#main,
#sidebar,
#footer {
  padding-bottom:2em;
}

02. Создание шаблона в 2 колонки с двумя границами между ними

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

Разработка шаблона с колонками одинаковой высоты посредством границ и отрицательных полей в CSS

Основа

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

Заметка: если вы используете фиксированные параметры ширины шаблона (а не гибкие, как показано в примере), то обёртка может быть использована для создания двух фоновых цветов, а также вертикальной границы. Это может быть реализовано посредством использования левой границы левой колонки, правой границы правой колонки, а также фона вертикальной границы. Это означает, что блок с контентом будет толщиной лишь в 1 пиксель, а также, что будут использованы отрицательные поля для того, чтобы подтолкнуть колонки до нужной позиции.

Вёрстка

<div id="header">
    <h2><a href="#">Header</a></h2>
    <p>Lorem ipsum...</p>
</div>

<div id="wrapper">
  <div id="sidebar">
      <h2><a href="#">Sidebar</a></h2>
      <p>Lorem ipsum...</p>
  </div>
  <div id="main">
      <h2><a href="#">Main</a></h2>
      <p>Lorem ipsum...</p>
  </div>
</div>

<div id="footer">
    <h2><a href="#">Footer</a></h2>
    <p>Lorem ipsum...</p>
</div>

CSS-код

Начнем разработку правил с предыдущего примера:

html {
  background: #45473f;
}

body {
  width: 80%;
  margin: 20px auto;
  background: #ffe3a6;
}

#header,
#footer {
  overflow: hidden;
  zoom: 1;
  background: #9c9965;
}

#sidebar {
  float: left;
  width: 200px;
}

#main {
  float: left;
}

Куда мы добавляем параметр position: relative:

#wrapper {
  display: inline-block;
  border-left: 200px solid #d4c37b;
  position: relative;
}

#sidebar {
  margin-left: -200px;
  position: relative;
}

Заметка: здесь нам не надо очищать параметры подвала, так как #wrapper содержит все плавающие элементы.

* вместо использования overflow/zoom, мы используем inline-block для создания нового контента с блочным форматированием (это объявление также запускает hasLayout). Левая граница закрасит фон за элементом #sidebar.
* отрицательное поле используется для вынесения #sidebar за пределы блока контента родительского контейнера (для того, чтобы перекрыть им границу от элемента #wrapper).

Что касается IE6: если вышеприведенные правила используют параметр position: relative (дважды), то это лишь из-за особенностей версии браузера. Параметры применены к элементу #wrapper во избежание того, что #sidebar будет вытеснен за пределы собственного блока контента. Этот параметр таке применен к элементу #sidebar, чтобы удостовериться, что элементы «всегда» будут закрашены правильным отступом.

Если вы взглянете на этот первый этап, то увидите, что всё полностью работает, кроме вертикальной границы между колонками. Вы также должны заметить, что в браузерах версиями ниже IE 6 или 7 в нижней части #sidebar появляется небольшое пространство (точнее в нижней части элемента #wrapper). Это случается потому, что к #wrapper мы применили форматирование inline-block, и поэтому его расположение основано на линии блока. Промежуток, который вы видите, это место, зарезервированное под подстрочные элементы текста.

Итак, ознакомьтесь с правилами, которые помогут нам избавиться от этого промежутка, и создать вертикальную границу:

#wrapper {
  vertical-align: bottom;
}

#sidebar {
  margin-right: -1px;
  border-right: 1px solid #888;
}

#main {
  border-left:1px solid #888;
}

Что делают эти правила?

* vertical-align: bottom выравнивает #wrapper по нижнему краю линии блока, вместо основной.
* две границы (для #sidebar и #main) перекрываются из-за отрицательного правого поля, установленного на #sidebar. Это наложение гарантирует, что эта «общая» граница будет такой же высоты, как и самая высокая колонка.

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

<link rel="stylesheet" type="text/css" href="http://tjkdesign.com/ez-css/css/base.css">

А затем добавить правила:

html {
  height: auto;
}

body {
  border: 1px solid #efefef;
}

#header,
#main,
#sidebar,
#footer {
  padding-bottom: 2em;
}

Это последнее демо для данного шаблона, которое включает вышеприведенные правила.

03. Создание шаблона в три колонки с границей между ними

Сейчас мы будем разрабатывать шаблон с единственным #main-wrapper, содержащим все div’ы. Такой подход слегка усложняет процесс, но также позволяет получить хороший опыт.
Пожалуйста, учтите, что в этом шаблоне границы не будут отображаться в браузерах IE версий 6 и 7.

Разработка шаблона с колонками одинаковой высоты посредством границ и отрицательных полей в CSS

Основа

Мы используем обёртку для создания фона трёх колонок. Правая и левая границы обёртки будут использоваться для двусторонних панелей, а их фон будет использован для основного контента.

Вёрстка

<div id="wrapper">
  <div id="header"><h2><a href="#">Header</a></h2><p>Lorem ipsum...</p></div>
  <div id="sidebar"><h2><a href="#">Sidebar</a></h2><p>Lorem ipsum...</p></div>
  <div id="aside"><h2><a href="#">Aside</a></h2><p>Lorem ipsum...</p></div>
  <div id="main"><h2><a href="#">Main</a></h2><p>Lorem ipsum...</p></div>
  <div id="footer"><h2><a href="#">Footer </a></h2><p>Lorem ipsum...</p></div>
</div>

CSS-код

Начнем с основных правил из предыдущих демо:

html {
  background: #45473f;
}

body {
  width: 80%;
  margin: 20px auto;
  background: #ffe3a6;
}

#header,
#footer {
  overflow: hidden;
  zoom: 1;
  background: #9c9965;
}

#sidebar {
  float: left;
  width: 200px;
}

#main {
  float: left;
}

Куда мы добавляем:

#wrapper {
  border-left: 200px solid #D4C37B;
  background-color: #ffe3a6;
  border-right: 200px solid #D4C37B;
}

Этот код устанавливает цвет фона для трёх колонок. В том же порядке, как и объявления, приведенные выше.

Если вы взглянете на этот первый этап, то увидите, что мы реализовали эффект фона, которым нам нужен был, но все выглядит как-то «разбито». Всё отображается внутри контент-бокса обёртки.

Следующие правила должны все исправить (zoom: 1 для #wrapper и postion: relative для #sidebar и #aside):

#wrapper {
  zoom: 1;
}

#sidebar {
  margin-left:-200px;
  position: relative;
}

#aside {
  float: right;
  width: 200px;
  margin-right: -200px;
  position: relative;
}

Элементу #aside задана ширина и float: right. Отрицательное поле выталкивает каждую сторону панели за пределы обёртки – за контент-бокс.

Заметка: в браузерах IE 6 и 7 требуется, чтобы у #wrapper была разметка, а не zoom. В IE 6 требуется два указания позиционирования по той же причине, что и в прошлом демо.

Если вы взглянете на второй этап разработки, то увидите, что элемент #header не растянут на весь шаблон, а #footer вообще отсутствует.

Эти два правила всё исправят:

#header,
#footer {
    margin-left: -200px;
    margin-right: -200px;
    position: relative;
}

#footer {
  clear: both;
}

Отрицательная марина с обоих сторон #header и #footer растянут эти два блока за пределы контент-бокса обёртки. Clear:both позволит подвалу очистить все колонки. Это уже третий этап.

Повторяемся, объявление позиционирования лишь для IE 6. Просто всегда помните о позиционировании элементов, которые вы смещаете.

Что дальше?

Наверняка вы уже знаете – добавляем основные таблицы стилей:

<link rel="stylesheet" type="text/css" href="http://tjkdesign.com/ez-css/css/base.css">

А затем как обычно:

html {
  height: auto;
}

body {
  border: 1px solid #efefef;
}

#header,
#main,
#sidebar,
#footer {
  padding-bottom: 2em;
}

4-й этап разработки отображает нам, как всё выглядит до того, как мы «оседлали» вертикальные границы.

Добавляем вертикальные границы

Следующий метод появился в голове от вдохновения работами Инго Чао (Ingo Chao) и Николаса Гэллахера (Nicolas Gallagher).

CSS-код

html:before {
    content: ".";
    position: absolute;
    height: 20px;
    background: #45473f;
    left: 0;
    right: 0;
    z-index: 2;
}

body {
  border-top: 0;
}

#header {
  border-top: 1px solid #fff;
}

#wrapper {
  position: relative;
}

#header,
#footer {
  z-index: 1;
}

#wrapper:before,
#wrapper:after {
  content: ".";
  position: absolute;
  width: 1px;
  height: 2000px;
  background: #9c9965;
  bottom: 0;
}

#wrapper:before {
  left: 0;
  border-left: 1px solid #fff;
}

#wrapper:after {
  right: 0;
  border-right: 1px solid #fff;
}

body {
    position: relative9;
    z-index: -1;
}

Итак, что здесь происходит?

* псевдо-границы выходят за пределы контейнера (в верхней части), так что первое правило закрашивает сгенерированный контент вверху. Учтите, что это правило возможно и не понадобится, если цвет искусственных границ будет одинаков с цветом фона страницы (в коде HTML) или если между верхней частью видимой области и шаблоном не будет свободного пространства.
* так как эти границы окрашены поверх границ тела документа, мы перенесём верхнюю границу тела документа в элемент #header.
* для правильного расположения искусственных границ нам надо обернуть блок содержимого для сгенерированного контента.
* мы перемещаем #header и #footer над всем стэком элементов, таким образом, скрывая искусственные границы, которые окрашены внутри обёртки (снизу до верха).
* сгенерированный контент, который мы используем для создания колонок.

В случае с IE 8: Последнее правило относится только к IE 8. Без него IE 8 не закрасит сгенерированный контент поверх границ, которые выходят за рамки обёртки (в верхней части). Если это объявление подкреплено хаком «\9», то это только потому, что браузера семейства Gecko пытаются исключить возможность кликов по элементам, а также их выделения.

Заметка: эти псевдо-классы не будут поддерживаться в браузерах IE 6 и 7, поэтому в этих браузерах между колонками не будет границ.

Стоит помнить о

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

Когда внутри блока содержания с широкими колонками используется абсолютное позиционирование элементов (как это было в последних двух демо), всегда имейте в виду блок отступов, т.е. 0 в качестве левого и правого отступов вряд ли будет тем значением, которое вы захотите использовать.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS
Опубликовал Mysterious Master   Прочитано (раз): 7588   |   Оставлено комментариев: 1
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 15 февраля 2012 @ 18:29
Написал: aleks1309 — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
отличные шаблоны!в своей разработке применю непременно
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц December по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации

















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Июль 2019    »
ПнВтСрЧтПтСбВс
1234567
891011121314
15161718192021
22232425262728
293031