Блочная верстка — Часть 3 — Создаем двухколоночный, трехколоночный и резиновый макеты для сайта

22 Май, 2010

Здравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru. Тут мы начали рассматривать поэтапное создание двухколоночного макета на основе блоков. Мне кажется, что начинать изучать верстку сайта, которая основывается на использовании каскадных стилей (CSS), лучше всего именно на конкретном примере, а не со скучного рассмотрения теории.

Нет, конечно же, база знаний по стилевому оформлению тоже нужна, но эти знания будут лучше усваиваться и пониматься после того, как вы на простейшем примере увидите, как можно привязать к HTML коду CSS свойства и как с помощью них можно управлять внешним видом элементов сайта.

Верстание двухколоночного макета для сайта


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

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

Поэтому, если для вас еще не все встало на свои места в вопросах верстки, то пробегите по диагонали первую статью из этой серии. Во второй мы уже непосредственно приступили к верстанию, хотя в начале я опять же сделал отступление на тему, что такое корневая папка и как ее отыскать на своем хостинге (см. по приведенной чуть вше ссылке).

Итак, мы прописали в нашем еще пустом файле Index.html базовые элементы (body, мета теги и т.п.), а так же код всех нужных нам блоков, которые будут формировать макет сайта.

Затем мы прописали в наш еще пустой файл таблиц каскадных стилей Style.css первые CSS свойства, в том числе мы задали фиксированную ширину нашему макету и выровняли его по центру относительно краев экрана.

Мы так же учли возможность использования старых версий браузеров, например, в Internet Explorer 5. Затем мы раскрасили для наглядности в разные цвета все v блоки, из которых состоит наш двухколоночный макет, а так же ограничили ширину левой колонки (в ней обычно располагается меню).

Ну, и в конце предыдущей статьи мы задали в файле CSS обтекание блока левой колонки другими контейнерами, расположенными ниже в HTML коде файла Index.html (в нашем случае это «Содержимое страниц (контент)» и «Подвал (футер)»).

После всех этих действий мы получили:

При этом файл Index.html содержал:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Заголовок</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="maket">
<div id="header">Шапка </div>
<div id="left">Левая колонка</div>
<div id="content">Содержимое страницы</div>
<div id="footer">Подвал</div>
</div>
 </body>
</html>

А в файл Style.css было прописано:

body, html {
margin:0px;
padding:0px;
}
#maket {
width:800px;
margin:0 auto;
}
#header{
background-color:#C0C000;
}
#left{
background-color:#00C0C0;
width:200px;
float:left;
}
#content{
background-color:#8080FF;
}
#footer{
background-color:#FFC0FF;
}

Давайте сравним полученный результат с тем, что должно было получиться:

Некоторые доработки

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

Но кроме этого существует и другая проблема. Если мы добавим текста в Div Content (содержимое статьи):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Заголовок</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="maket">
<div id="header">Шапка </div>
<div id="left">Левая колонка</div>
<div id="content">Содержимое страницы Содержимое страницы Содержимое страницы Содержимое страницы </div>
<div id="footer">Подвал</div>
</div>
 </body>
</html>

То может возникнуть такая ситуация с макетом:

Т.е. содержимое контейнера Content занимает все свободное место под закончившимся Left. Это происходит из-за того, что включено обтекание Div Left всеми другими блоками, расположенными ниже его в HTML коде, но после того, как Left заканчивается, все последующие контейнеры начинают уже прижиматься к левому краю.

Нас такая ситуация с Content не устраивает, поэтому во избежании этого мы зададим для этого контейнера фиксированный отступ слева (от края макета) равный ширине блока Left (левой колонки).

Таким образом мы сможем добиться желаемого взаимного расположения блоков Left и Content в не зависимости от соотношения высот этих контейнеров. Для этого нам нужно будет дописать для Content (в нашем файле Style.css) еще одно CSS свойство, задающее отступ слева (margin-left — тут про отступы и рамки в CSS читайте подробнее):

#content{
background-color:#8080FF;
margin-left:202px;
}

Т.к. ширину левой колонки (Left) мы ранее задали в 200px, то и отступ слева для Content мы зададим таким же, даже можно сделать его на несколько пикселей больше, чтобы между блоками появилось небольшое расстояние.

Весь код файла Style.css теперь будет выглядеть так:

body, html {
margin:0px;
padding:0px;
}
#maket {
width:800px;
margin:0 auto;
}
#header{
background-color:#C0C000;
}
#left{
background-color:#00C0C0;
width:200px;
float:left;
}
#content{
background-color:#8080FF;
margin-left:202px;
}
#footer{
background-color:#FFC0FF;
}

А наш макет на Div верстке примет вид:

Теперь давайте смоделируем ситуацию с существенным увеличением высоты блока Left (левой колонки):

Из рисунка видно, что при увеличении высоты левой колонки, подвал (Footer) начинает ее обтекать, т.к. в Style.css для блока Left задано обтекание с помощью свойства float:left.

В следствии этого все Div контейнеры, расположенные в HTML коде ниже Left, начинают его обтекать и наш Footer не является исключением. А это нас совсем не устраивает, ибо он должен всегда располагаться ниже всех других блоков нашего двухколоночного макета. Надо это исправить.

Для этого мы отменим обтекание блоком Footer контейнера Left. Как это сделать? Нужно дописать специальное свойство для Footer в Style.css: clear:both (здесь читайте про обтекание в CSS).

Это свойство позволит расположить Footer ниже всех плавающих блоков, т.е. тех, которым задано свойство Float (обтекание справа или слева). Тем самым мы опустим подвал в самый низ нашего макета.

Style.css теперь будет выглядеть так:

body, html {
margin:0px;
padding:0px;
}
#maket {
width:800px;
margin:0 auto;
}
#header{
background-color:#C0C000;
}
#left{
background-color:#00C0C0;
width:200px;
float:left;
}
#content{
background-color:#8080FF;
margin-left:202px;
}
#footer{
background-color:#FFC0FF;
clear:both;
}

А сам двухколоночный макет на блочной верстке получит футер (подвал), соответствующий всем требованиям:

Если нужно будет расположить Left (колонку с меню) не с левой стороны макета, а с правой, то сделать это можно, внеся лишь несколько изменений в Style.css. Для Left там нужно заменить свойство float:left; на float:right;, а для блока Content — убрать отступ слева на ширину контейнера Left и добавить точно такой же отступ справа.

Т.е. для Content нужно CSS свойство margin-left:202px; заменить на margin-right:202px;. В результате Style.css примет вид:

body, html {
margin:0px;
padding:0px;
}
#maket {
width:800px;
margin:0 auto;
}
#header{
background-color:#C0C000;
}
#left{
background-color:#00C0C0;
width:200px;
float:right;
}
#content{
background-color:#8080FF;
margin-right:202px;
}
#footer{
background-color:#FFC0FF;
clear:both;
}

А наш макет с колонкой меню, расположенной справа, будет выглядеть так:

Создаем трехколоночный макет на основе 2-х колоночного


Вернем все к виду, когда блок Left расположен с левой стороны. Для создания трехколоночного макета на основе уже созданного двухколоночного, нам нужно лишь добавить один дополнительный Div-контейнер в файл Index.html после кода, описывающего Left.

Назовем его незамысловато — Right. C учетом этого нового Div, код примет вид:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Основы блочной верстки (Div верстки)</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="maket">

<div id="header">Шапка </div>
<div id="left">Левая колонка Меню Меню Меню Меню</div>
<div id="right">Правая колонка Меню Меню Меню Меню</div>
<div id="content">Содержимое страницы Содержимое страницы Содержимое страницы Содержимое страницы </div>
<div id="footer">Подвал</div>
</div>
 </body>
</html>

В содержимое контейнера Right я добавил небольшое количество текста, чтобы этот блок имел сравнимый с Left и Content размер по высоте. Теперь нужно написать отдельное правило в файле каскадных таблиц стилей Style.css для четкого позиционирования Right, относительно других контейнеров нашего трехколоночного макета сайта:

#right{
width:200px;
background-color:#FFFF00;
float:right;
}

Свойством width:200px (тут читайте про задание ширины и высоты в CSS) мы задает ширину блока Right равной 200 пикселей, а свойством background-color:#FFFF00 (читайте про задание фона в CSS, а тут про коды цвета в Html ) подцвечиваем фон контейнера Right для большей наглядности.

Ну, а свойство float:right позволяет прижать Right к правой стороне и при этом все следующие за ним в коде Div будут обтекать его слева (обтекать его будет только Content, т.к. Footer у нас настроен так, что он лежит ниже всех плавающий блоков).

Но этого еще не достаточно. В начале статьи мы решали проблему залезания содержимого Div Content под закончившийся блок Left. Для того, чтобы сразу же избежать подобной проблемы и с Right, мы зададим в CSS для Content не только отступ слева на ширину Left, но и отступ справа на ширину Right:

#content{
background-color:#8080FF;
margin-left:202px;
margin-right:202px;
}

Окончательный вариант нашего Style.css для трехколоночного макета будет такой:

body, html {
margin:0px;
padding:0px;
}
#maket {
width:800px;
margin:0 auto;
}
#header{
background-color:#C0C000;
}
#left{
background-color:#00C0C0;
width:200px;
float:left;
}
#right{
width:200px;
background-color:#FFFF00;
float:right;
}
#content{
background-color:#8080FF;
margin-left:202px;
margin-right:202px;
}
#footer{
background-color:#FFC0FF;
clear:both;
}

А сам макет сайта, сверстанный на Div, будет выглядеть так:

Преобразуем фиксированный макет в резиновый


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

Если разрешение экрана у него будет по ширине 800 пикселей, то и макет резинового сайта будет равен по ширине 800 пикселей, а если разрешение будет 1920 пикселей, то и шаблон растянется на всю ширину такого экрана.

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

Нужно лишь для Div контейнера, в котором заключен весь макет (в нашем случае это MAKET), задать в файле каскадных таблиц стилей не фиксированный размер с помощью свойства width:800px;, а относительный размер по ширине, с помощью свойства width:100%;:

#maket {
width:100%;
margin:0 auto;
}

Резиновый вариант будет выглядеть примерно так:

Решение проблем для старых браузеров

На первый взгляд все вроде бы хорошо, но если попробовать уменьшать окно браузера, то в определенный момент произойдет наезд одних блоков на другие, что приведет к полному развалу дизайна (говорят еще — поехала верстка).

Но эту неприятность тоже довольно легко можно нейтрализовать. Достаточно лишь задать для контейнера, в котором находится резиновый макет (в нашем случае это Maket), с помощью специального CSS свойства минимально возможную ширину, до которой можно уменьшать его размер.

После достижения этой минимальной ширины макет как бы перестанет быть резиновым и не будет изменяться по ширине при дальнейшем уменьшении окна браузера.

Это свойство выглядит так:

min-width:600px; 

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

Теперь ваш задача сводиться к тому, чтобы при ширине в 600 пикселей ваш сайт не перекосило, ну а при больших разрешениях этого уж точно не произойдет. Но опять же имеется одно «но», и опять это «но» связано с всеми нами любимым браузером Internet Explorer 6.

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

Для того, чтобы побороть этот косяк резинового шаблона в Internet Explorer 6, существует целый ряд так называемых хаков, которые позволяют обойти это ограничение.

Я приведу здесь один из самых стабильных хаков, который не вызывает подвисания браузеров и прочих неприятностей. Он заключается в том, что CSS свойство width:100% для блока Maket мы заменим специальным кодом:

width:expression(
(document.compatMode && document.compatMode == 'CSS1Compat')
?
(
document.documentElement.clientWidth < 600
?
"600px"
:
"auto"
)
:
(
document.body.clientWidth < 600
?
"600px"
:
"auto"
)
);

В четырех местах этого кода прописана цифра 600, которая и задает минимальную ширину резинового макета. Вы можете заменить эту цифру на ту, которую считаете оптимальной. Окончательный вид Style.css будет такой:

body, html {
margin:0px;
padding:0px;
}
#maket {
min-width:600px;
width:expression(
(document.compatMode && document.compatMode == 'CSS1Compat')
?
(
document.documentElement.clientWidth < 600
?
"600px"
:
"auto"
)
:
(
document.body.clientWidth < 600
?
"600px"
:
"auto"
)
);
margin:0 auto;
}
#header{
background-color:#C0C000;
}
#left{
background-color:#00C0C0;
width:200px;
float:left;
}
#right{
width:200px;
background-color:#FFFF00;
float:right;
}
#content{
background-color:#8080FF;
margin-left:202px;
margin-right:202px;
}
#footer{
background-color:#FFC0FF;
clear:both;
}

Читайте окончание эпопеи в следующей статье. Можете также посмотреть видео «Верстка резинового сайта на div-ах»:

Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru

Подборки по теме:

Комментарии и отзывы

жабак

Статья хорошая, но, к сожалению, нет ни слова про то, как еще этот макет на блочной верстке растянуть по высоте, чтоб сайт занимал 100% окна браузера, и чтоб футер прижимался к нижней части окна браузера.

Дмитрий

жабак: спасибо, что напомнили. Напишу об этом в четвертой части этой серии статей по блочной верстке.

Relaximus

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

Дмитрий

Relaximus: все будет, но как скоро не знаю, ибо стараюсь писать во все рубрики более менее равномерно, а тему CSS и блочной верстки вообще только только начал.

Георгий

Для меня, как для начинающего веб мастера, этот блог просто находка. Теперь ежедневно часами все читаю и нахожу для себя много нового. Спасибо большое за ваши статьи!

Klerik

Отличный урок! Даже не урок, а мануал, садись и делай)

Сам я блочную div-верстку только начинаю осваивать, ваш урок как-нельзя кстати пришелся. Спасибо большое.

Дмитрий

Георгий: Klerik: пожалуйста.

ZSDG

Подробный видео урок по созданию 100% резинового сайта.

http://letitbit.net/download/29536.2bd5bcab674031552f48e87551f1/videolessons_3.rar.html

Selric

Интересно в каком броузере работает следующая конструкция именно так как описано в этой статье?

#content{

background-color:#8080FF;

margin-left:202px;

margin-right:202px;

}

Отступ-margin являеться частью div и следующий div с неабсолютный!!! позиционированием никак не налезет на margin предыдущего div!

А статья хорошая!

Александр

а как сделать чтобы шапка обтекала правое меню?

Eskay

Если вставить последний код, то весь текст. И в контенте и в хедере и в футере становится «по центру». И, не знаю, как в ИЕ6, но в Хроме дизайн «слетает» при уменьшении окна

Eskay

Selric: Selric: У меня в Хроме работает

Levik

Спасибо... жаль, что некоторое время назад мне не попадались такие статьи... приходилось изобретать велосипеды 🙂

ps. Ну и IE (не только 6), как всегда «на высоте» )))

Дмитрий

Спасибо огромное за предоставленную статью. Прояснили мне многие нонятки в блочной верстке. Все написано ПРЕДЕЛЬНО понятно и доходчиво!

Елена

Добрый день ! Очень хорошая статья, спасибо.

Но у меня такой вопрос. Мне по центру нужно вставить рисунок.

А на рисунке сверху надписи — кнопки.Эти надписи должны быть в определенных местах. Если я делаю резиновый макет — то при использовании широких современных мониторов — рисунок растягивается (но при этом надписи на нем ставятся нормально так как все в %). А если я делаю фиксированный макет то рисунок ни надписи пропорционально не размещаются.

Как сделать чтобы в широком мониторе не растягивался рисунок ?

Может можно как-то сделать фиксированный макет а в него вставить рисунок в %?спасибо

crztr

Полностью статью не читал, но пробежался. Большое спасибо. Это лучшее что я нашел в сети 🙂

Павел

Автор, 5 баллов! Только благодаря этой статьей наконец-то смог разобраться как приступать к созданию сайта. А то везде куча информации по тегам или сложным вёрсткам, а как начать если кто и рассказывает, то вскользь и невзначай. Спасибо!

Артур

поставил таблицу в блок по середине и он уехал вниз. Что делать то?

Grafman

У меня IE 6. Но даже после вставки данного хака — верстка летит. Хм. может кто-то подскажет, в чем проблема?

Саня

Текст при просмотре в браузере не остается в рамках блоковбвылазит и наползает на соседний блок вдоль строки,ПОМОГИТЕ СОВЕТОМ!

Slam

если вместо многократного «содержимое страницы» писать многократно Content, то текст идет до края монитора, а не спускается вниз. как решить вопрос с наполнением английским текстом?

Евгений

Для коммента выше — в css пропиши

word-wrap: break-word;

Марина

Отличная статья.Но мне кажется hnml и css надо как то объеденять в одной статье.И не забыть рассказать как их привязать друг к другу.Автору статьи респект!!!!

Марина

Автору Респект!!!!!Тот кто хоть немного знаком с html и css все разжевано и в рот положено.

devilby

Автор отлично расписал! спасибо

Саша

сделал двухколоночный резиновый. min-width 600 пкс для общего дива. но когда начинаеш уменьшать окно броузера меньше 600 пкс, футер начинает отдалятся от правой границы окна. И чем больше уменьшаеш, тем сильнее отдаляется. что-то не то?

гуля

Ваши статьи как всегда супер, многие вопросы решаю с помощью него, спасибо.

archizona.ru

Спасибо за статью. Вы описали все проблемы, с которыми я сталкивалась при «дивной» верстке. Буду изчать дальше.

mihail

пасиб, отличная статья!

Олег

Неплохо, но постоянное повторения ключевых слов для поисковика

теряется мысль чествуешь себя, будто не статью читаешь а в роле

гугло бота.

student

скажите, а здесь обсасывалось выравнивание дива по центру экрана

Дмитрий

Большое спасибо!

anonymous

Спасибо!

.

Хорошая статья.

Дмитрий, а почему в трехколоночном макете при прописывании clear: both; в подвале после удаления распорки фоновые цвета колонок не продолжаются вниз до подвала, а остаются на некотором уровне до окончания текста в колонках?

Юрий

От души, благодарю!

martin

отлично изложено:) спасибо.

Riosun

Прикольно...

Вставил всё как есть, правая колонка ниже среднего блока...

Виталий

Использую такой же макет как у вас в статье: «макет с колонкой меню, расположенной справа»

При выстраивании в одну колонку для просмотра на телефоне получается что правое меню размещается выше, чем основной блок. А мне нужно сделать наоборот, чтобы он был ниже. Не знаете как это сделать?

Alex

в первом примере кода в конце лишний закрывающий

Евгений

При переделывании 2-х колоночного сайта в 3-х колоночный. Все вроде встало на место, но контент располагается ниже правой колонки. Кучу вариантов отступов и ширины перепробовал, ничего не помогает. Может кто знает в чем тут дело?

GigA

Возможно сделать контент без «margin-left»? т.е. если блог слева или справа присутствует он сужается или на оборот расширяется если нет блока слева или справа.

Подписаться не комментируя