В розысках святого Грааля
Три колонки. 1, зафиксированной ширины, для частей навигации, иная для гугл Ads либо ваших фото на Flickr, и изменяемой ширины центр для содержания интернет-сайта. таковая метка обширно используется в наш милый век блогинга, а беря во внимание сложность таковой разметки она возымела заглавие непорочный Грааль.
Множество заметок было прописано о Святом Граале, и имеется разные шаблоны таковой разметки. естественно, все имеющиеся решения соединены с потерпевшими: твердый распорядок следования колонок в начальном тексте, футер на всю ширину окошка браузера, и кривые исходники, нередко приходится идти на компромисс в розысках неуловимой разметки.
В крайнем плане я окончил собственные розыски Грааля. Техника, которую я намереваюсь представить, дозволяет вам творить разметку непорочного Грааля в отсутствии компромиссов в коде либо гибкости.
Ее достоинства:
центр переменной ширины, и колонки зафиксированной ширины по краям,
центральная колонка имеет возможность идти 1 в начальном коде,
большей имеет возможность существовать неважно какая колонка,
требует лишь 1 доп div для разметки,
использует совсем обыкновенные стили CSS, с наименьшим внедрением хаков.
На плечах гигантов
Техника, представленная тут, была сотворена перед эмоцией блещущей заметки Алекса Робинсона One True Layot
В данной заметке Алекс еще обратился к дилемме непорочного Грааля, однако его заключение просит 2-ух доп блоков и формирует некие трудности при аппарате отступов в отсутствии доп блоков в всякой колонке.
Также были изготовлены выводы из заметки ерика Майера Adaptation кой употреблял разные разновидности единиц измерения. Его образчик еще охватывает 3 колонки, фиксированные боковые панели и центра переменной ширины.
Достаточно слов — давайте код
Используемый HTML код смотрится подсознательно и элегантно.
(Для ясности, при презентации данной техники, специально употребляются никак не семантические личные номера center, left, и right. Мы советуем применять семантические личные номера при использовании данной техники — Ред.)
<div id="header"></div>
<div id="container">
<div id="center" class="column"></div>
<div id="left" class="column"></div>
<div id="right" class="column"></div>
</div>
<div id="footer"></div>
Один доп div обхватывающий колонки это все, будто нам необходимо и это подходит моим повадкам написания кода.
Стили практически эти ведь обыкновенные. предположим, будто нам необходимо, чтоб широта левой колонки была 200 пикселей, а правой 150 пикселей. чтоб адаптировать комменты, я буду именовать левую, правую и центральную колонки поэтому LC, RC, CC. нужный код CSS смотрится так:
body {
min-width: 550px; /* 2x LC width + RC width */
}
#container {
padding-left: 200px; /* LC width */
padding-right: 150px; /* RC width */
}
#container .column {
position: relative;
float: left;
}
#center {
width: 100%;
}
#left {
width: 200px; /* LC width */
right: 200px; /* LC width */
margin-left: -100%;
}
#right {
width: 150px; /* RC width */
margin-right: -150px; /* RC width */
}
#footer {
clear: both;
}
/*** IE6 Fix ***/
* html #left {
left: 150px; /* RC width */
}
Измените габариты, и Грааль ваш. данная техника действует во всех передовых браузерах: Safari, Opera, FireFox и IE6 (с маленьким хаком). Для работы в IE5.5 нужно прибавить, box-model хак, кой остается как процедура читателям.
Святой Грааль в действии
Как это работает
Стратегия элементарна, div, кой подключает в себя колонки, владеет центр переменной ширины и фиксированные отступы по краям. Вся апрош в том, чтоб расположить левую колонку в левом отступе, а правую в правом, опосля что остается прибавить центральную колонку переменной ширины.
Давайте проследим из-за творением разметки, шаг из-за шагом.
Шаг 1: творение фрейма
Начнем с заголовка, футера и контейнера.
<div id="header"></div>
<div id="container"></div>
<div id="footer"></div>
Добавим контейнеру отступы таковой ширины, коия нам нужна для соответственных колонок.
#container {
padding-left: 200px; /* LC width */
padding-right: 150px; /* RC width */
}
Сейчас метка смотрится так:
Шаг 2: прибавляем колонки
Когда у нас имеется базисный фрейм, мы можем прибавить к нему колонки.
<div id="header"></div>
<div id="container">
<div id="center" class="column"></div>
<div id="left" class="column"></div>
<div id="right" class="column"></div>
</div>
<div id="footer"></div>
Дальше нам необходимо прикарманить им ширину и определить float, чтоб они выстроились в 1 линию. еще нам необходимо определить clear для футера чтоб он оставался перед колонками, у каких известно качество float.
#container.column {
float: left;
}
#center {
width: 100%;
}
#left {
width: 200px; /* LC width */
}
#right {
width: 150px; /* RC width */
}
#footer {
clear: both;
}
Имейте ввиду, будто широта центральной колонки одинакова ширине вещества container в отсутствии учета отступов.
Сейчас колонки готовы выстроиться в линию, однако так как центральная колонка занимает сто процентов легкодоступного места, левая и левая колонки оказываются перед ней.
Шаг 3: Размещаем левую колонку.
Все, будто нам осталось изготовить это сконструировать колонки в 1 линию, переместив их в отступы вещества container. Центральная колонка пребывать конкретно вслед за тем в каком месте нам необходимо, потому сфокусируемся на левой колонке.
Сначала нам необходимо расположить её пред центральной колонкой, для данного мы установим левое поле ?сто процентов. попробуйте вспомнить, будто сто процентов это широта вещества container, коия еще одинакова ширине центральной колонки.
#left {
width: 200px; /* LC width */
margin-left: -100%;
}
Теперь левая колонка закрывает центральную колонку, начиная с её левой рубежа. левая колонка с установленным свойством float: left обязана разместиться возле правого края центральной колонки (но продолжает переноситься).
Сейчас наша метка смотрится так:
Чтобы расположить левую колонку в отступе вещества container, применяем условное размещение со смещением одинаковым ширине левой колонки.
#container.columns {
float: left;
position: relative;
}
#left {
width: 200px; /* LC width */
margin-left: -100%;
right: 200px; /* LC width */
}
Свойство right перемещает колонку на 200 пикселей от правого края, то имеется на лево. в данный момент левая колонка расположилась буквально над левым отступом вещества контейнер.
Шаг 4. Размещаем правую колонку
Последнее будто осталось изготовить это перегнать правую колонку на её пространство. Все будто нам необходимо чтоб изготовить это перенести её из контейнера в его отступ. опять применяем негативные поля.
#right {
width: 150px; /* RC width */
margin-right: -150px; /* RC width */
}
Теперь все составляющие пребывают на собственных местах.
Шаг 5: Надежность
Если окошко браузера миниатюризируется так, будто центральная колонка делаться не в такой мере левой, метка разламывается (в браузерах поддерживающих стандарты). качество min — width для вещества body сбережет размещение колонок. однако к несчастью IE 6 никак не поддерживает качество min — width.
body {
min-width: 550px; /* 2x LC width + RC width */
}
Конечно ни 1 техника разметки никак не имеет возможность сообразовываться совершенной ежели никак не употребляет заплаток и обходных стезей для IE. негативные поля сдвигают левую колонку очень далековато в IE 6 (на совершенную ширину окошка браузера). чтоб вернут её назад нам нужно двинуть её на право на отдаление одинаковое ширине правой колонки. применяем star-html хак чтоб утаить код от остальных браузеров.
* html #left {
left: 150px; /* RC width */
}
Я никак не желаю вклиниваться в подробности, отчего необходимо применять конкретно ширину правой колонки, разъяснение данного прецедента никак не дает трудности, вы сможете вести данные вычисление без помощи других либо элементарно полагать это ещё одним сюрпризом IE.
Отступы
Я никак не художник, однако разряд таковой разметки подавляет мое эмоция красивого. Колонки в отсутствии отступов нехорошо выглядят, и усложняют чтение. Нам необходимо прибавить пространство.
Один из недочетов применения процентов в One True Layout для сотворения резиновой разметки в том, будто творение отступов для колонок делаться некоторое количество мудреным. Процентные отступы нехорошо выглядят на неких разрешениях экрана, а фиксированные отступы разрешено прибавить, лишь применяя доп блок снутри всякой колонки.
В описанной технике, отступы никак не неувязка, их разрешено прибавить напрямик к левой и правой колонкам, при данном нужна только только доборная коррекция ширины. чтоб прибавить отступ в 10 пикселей к левой колонке в приведенном больше образце, однако при данном сберечь её ширину, поменяйте стили как показано ниже.
#left {
width: 180px; /* LC fullwidth - padding */
padding: 0 10px;
right: 200px; /* LC fullwidth */
margin-left: -100%;
}
Создание отступов для центральной колонки просит незначительно более изобретательности, однако никак не необходимо доборной разметки и лишь незначительно CSS.
Отступы совместно со 100%-ной шириной приводят к тому, будто центральная колонка расширяется из-за пределы отступов контейнера. чтоб предупредить это, мы обязаны прирастить справедливый отступ контейнера на суммарную значение отступов центрального вещества. Это ручается, будто центральная колонка станет конкретно такового объема как мы ожидали.
Также так как ныне центральная колонка стала просторнее, левую колонку необходимо переносить на наибольшее отдаление чтоб она оказалась на собственном месте. повышение смещения на суммарную значение отступов центральной колонки никак не дает труда.
Чтобы конкретизировать произнесенное. Я поменял образчик добавив отступ в 10 пикселей для боковых колонок (в сумме 20 пикселей) и 20 пикселей с всякой стороны центральной (в сумме 40 пикселей). свежий код смотрится так:
body {
min-width: 630px; /* 2x (LC fullwidth +
CC padding) + RC fullwidth */
}
#container {
padding-left: 200px; /* LC fullwidth */
padding-right: 190px; /* RC fullwidth + CC padding */
}
#container.column {
position: relative;
float: left;
}
#center {
padding: 10px 20px; /* CC padding */
width: 100%;
}
#left {
width: 180px; /* LC width */
padding: 0 10px; /* LC padding */
right: 240px; /* LC fullwidth + CC padding */
margin-left: -100%;
}
#right {
width: 130px; /* RC width */
padding: 0 10px; /* RC padding */
margin-right: -190px; /* RC fullwidth + CC padding */
}
#footer {
clear: both;
}
/*** IE Fix ***/
* html #left {
left: 150px; /* RC fullwidth */
}
Конечно отступы поверх и исподнизу имеют все шансы существовать добавлены в отсутствии затруднений. абсолютная версия шаблона с отступами.
Эта техника еще отлично действует ежели ориентировать габариты в em. К несчастью вы никак не сможете перемешивать em и пиксели, этак будто избирайте кое-что одно.
Колонки схожей высоты
Эта техника дозволяет просто творить колонки схожей вышины. Я применяю приспособленный способ из One True Layout, никак не желаю вклиниваться в подробности его функционирования, чтоб сотворить колонки схожей вышины элементарно применяйте последующий код:
#container {
overflow: hidden;
}
#container.column {
padding-bottom: 20010px; /* X + padding-bottom */
margin-bottom: -20000px; /* X */
}
#footer {
position: relative;
}
Я еще добавил отступ 10 пикселей внизу колонок.
Хочу вас оповестить. Будьте аккуратны Opera 8 владеет баг при труде с overflow: hidden кой оставляет ваши колонки большими. метод одолевание данной трудности осмотрен в заметке One True Layout, вы сможете применять его либо повременить выхода Opera 9 в которой данный баг исправлен.
Еще 1 неувязка связана с тем будто IE никак не прячет фон колонок ниже контейнера. Он длится ниже футера ежели вышина странички не в такой мере вышины окошка браузера. Это никак не ужасно, ежели вы никак не применяете единичный футер либо, ежели вышина вашей странички такая, будто окошко браузера постоянно употребляется полностью.
Если на вашей страничке таковая неувязка имеет место быть, никак не опасайтесь, это также исправимо, однако будет нужно 1 доп div.
Добавьте footer-wrapper как показано ниже:
<div id="footer-wrapper">
<div id="footer"></div>
</div>
Чтобы footer — wrapper занимал все сохранившееся пространство в окошке браузера, применяйте тот ведь метод, будто и для колонок.
* html body {
overflow: hidden;
}
* html #footer-wrapper {
float: left;
position: relative;
width: 100%;
padding-bottom: 10010px;
margin-bottom: -10000px;
background: #fff; /* Same as body background */
}
Пример с колонками схожей вышины и заключение данной трудности вы сможете узреть здесь.
Да, и ещё 1 вещь
Тем никак не наименее, изображённый мной способ употребляет никак не смысловой контейнер div. естественно, мы никак не можем обладать 1 доп div, погружающий в кавардак нашу идеальную разметку.
Поэтому, как бонус, я даю вам непорочный Грааль в отсутствии доп div`а во всей красоте его миниатюризма. 1 div для всякой секции кода, никак не более никак не не в такой мере. Семантическое счастье практически благородное титула «Святой Грааль».
Принципы заложенные в CSS те ведь наиболее, будто и в разметке представленной больше. Отступы добавленные к составляющей body, совершают всевозможные доп контейнеры лишними. негативные поля растягивают header и footer чтоб обеспечивать будто они занимают все предоставленное пространство.
Эта версия действует во всех вышеупомянутых браузерах, подключая (почти чудо) IE. Колонки схожей вышины, естественно, никак не действуют, и данная метка разламывается в окошке совсем малеханькой ширины. применяйте с осторожностью.
Что дальше?
Пока это использование Сватого Грааля остается специфическим, техника имеет возможность существовать шибко изменена. отчего недостает 2-ух резиновых колонок? отчего невозможно видоизменять распорядок колонок? данные вопросцы лежат из-за пределами данной заметки, однако достижимы в отсутствии значимых конфигураций кода. применяйте Грааль уместно, и он имеет возможность существовать совсем комфортным (и надежным) добавлением вашего комплекта трюков CSS.
Translated with the permission of A List Apart Magazine and the author[s].
Дело пропадающей колонки
В крайней версии разметки, мы разрешили делему в FireFox `е (увеличением малой ширины).
Тем никак не наименее, левая колонка продолжала пропадать, ежели изменялся отвесный величина окошка браузера в IE. в отсутствии решения данной трудности, розыски непорочного Грааля невозможно было полагать завершенными.
Я рад сказать вам, будто неувязка решена.
Решение
Замените данные правила:
#left {
width: 200px; /* LC width */
right: 200px; /* LC width */
margin-left: -100%;
}
* html #left {
left: 150px; /* RC width */
}
на эти:
#left {
width: 200px; /* LC width */
margin-left: -100%;
left: 150px; /* RC width for IE6 */
}
#container > #left {
left: -200px; /* -LC width for others */
}
в случае Грааля с отступами, применяйте последующий код:
#left {
width: 180px; /* LC width */
padding: 0 10px; /* LC padding */
margin-left: -100%;
left: 150px; /* RC fullwidth for IE6 */
}
#container > #left {
left: -240px; /* -(LC fullwidth + CC padding) */
}
Вы сможете созидать данные решения в деянии, базисная метка, версия с отступами, колонки одинаковой вышины и версия в отсутствии контейнера.