Блочная верстка (DIV верстка) — Часть 3 — Создаем на DIV блоках двухколоночный, трехколоночный и резиновый макеты для сайта
Здравствуйте уважаемые читатели блога KtoNaNovenkogo.ru. В предыдущей статье мы начали рассматривать поэтапное создание двухколоночного макета сайта на основе блочной верстки (Div верстки). Мне кажется, что начинать изучать блочную верстку, которая основывается на использовании каскадных стилей (CSS), лучше всего именно на конкретном примере макета на Div контейнерах (блоках), а не со скучного рассмотрения базовых свойств CSS.
Нет, конечно же, база знаний по CSS свойствам тоже нужна, но эти знания будут лучше усваиваться и пониматься после того, как вы на простейшем примере блочной верстки увидите, как можно привязать к HTML коду CSS свойства и как с помощью CSS можно управлять внешним видом элементов сайта.
Создание двухколоночного макета сайта на основе блочной верстки (Div верстки)
Давайте вернемся к нашему двухколоночному макету сайта на блочной верстке. В самой первой статье мы даже не начали рассматривать верстку двухколоночного макета на блочной верстке, т.к. много времени ушло на обсуждение базовых вопросов верстки. Это было необходимо сделать в особенности для тех читателей, которые только начинают погружаться в вебмастеринг.
По собственному опыту знаю, что труднее всего найти ответы на простые и очевидные для большинства вопросы, но пока еще не понятные для вас. На форумах такие вопросы игнорируют, а в статьях опускаются эти моменты, как само собой разумеющееся.
Поэтому, если для вас еще не все встало на свои места в вопросах верстки, то пробегите по диагонали первую статью этой серии, возможно, что найдете для себя что-то интересное — Как работают сайты, повышение безопасности сайта, структура HTML кода, создание простого двух-колоночного макета на дивах.
Во второй статье мы уже непосредственно приступили к блочной верстке двухколоночного макета сайта, хотя, в начале статьи, я опять сделал отступление на тему, что такое корневая папка сайта и как ее отыскать на своем хостинге и создать в ней каталог.
Уже непосредственно приступив к верстке макета на основе блочной верстки, мы прописали в нашем еще пустом файле Index.html базовые элементы HTML кода, а так же код для всех Div-контейнеров (блоков), которые будут формировать макет сайта. Затем мы прописали в наш еще пустой файл таблиц каскадных стилей Style.css первые CSS свойства, в том числе мы задали фиксированную ширину нашему макету и выровняли его по центру относительно краев экрана.
Мы так же учли возможность открытия создаваемого на основе Div верстки макета в старых версиях браузеров, например, в Internet Explorer 5. Затем мы раскрасили, для наглядности, в разные цвета все Div блоки, из которых состоит наш двухколоночный макет на основе блочной верстки, а так же мы ограничили ширину левой колонки (в ней, обычно, на сайтах располагается меню).
Ну, и в конце предыдущей статьи мы задали в файле CSS обтекание блока левой колонки другими блоками, расположенными ниже в HTML коде файла Index.html (в нашем случае это блоки «Содержимое страниц (контент)» и «Подвал (футер)»).
После всех этих действий, мы получили двухколоночный макет сайта на Div верстке, в таком виде:
При этом файл Index.html содержал следующий 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>Основы блочной верстки (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="content">Содержимое страницы</div> <div id="footer">Подвал</div> </div> </body> </html>
А в файл Style.css были прописаны следующие 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;
}
Давайте сравним полученный результат макета на Div с тем, что должно было получиться:
Блочная верстка — доработка двухколоночного макета сайта на Div блоках
Вроде бы макеты похожи, но есть одна неувязочка. Блок Footer (подвал) не должен обтекать левую колонку справа, он должен располагаться в самом низу макета, созданного нами на основе блочной Div верстки, и занимать всю его ширину. Это одна проблема. Но кроме этого существует и другая проблема. Если мы добавим текста в 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>Основы блочной верстки (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="content">Содержимое страницы Содержимое страницы Содержимое страницы Содержимое страницы </div> <div id="footer">Подвал</div> </div> </body> </html>
То может возникнуть такая ситуация с макетом:
Т.е. содержимое Div контейнера Content занимает все свободное место под закончившимся блоком Left. Это происходит из-за того, что включено обтекание Div блока Left всеми другими блоками, расположенными ниже в HTML коде, но после того, как блок Left заканчивается, все последующие блоки начинают уже прижиматься к левому краю нашего макета на основе блочной верстки.
Нас такая ситуация с Div блоком Content (содержимое страницы) не устраивает, поэтому во избежании этого, мы зададим для Div-контейнера Content фиксированный отступ слева (от края макета) равный ширине блока Left (левой колонки).
Таким образом, мы сможем добиться желаемого взаимного расположения блоков Left и Content в не зависимости от соотношения высот этих Div блоков. Для этого нам нужно будет дописать для Div блока Content (в нашем файле Style.css) еще одно CSS свойство, задающее отступ слева (margin-left):
#content{
background-color:#8080FF;
margin-left:202px;
}
Т.к. ширину левой колонки (блока Left) нашего макета на основе блочной верстки мы ранее задали 200px, то и отступ слева для Div блока Content мы зададим таким же, даже можно сделать его на несколько пикселей больше, чтобы между блоками появилось небольшое расстояние. Весь CSS код файла 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 верстке примет вид:
Теперь давайте смоделируем ситуацию с существенным увеличением высоты Div блока Left (левой колонки):
Из рисунка видно, что при увеличении высоты левой колонки, подвал (блок Footer) начинает ее обтекать, т.к. в CSS файле (Style.css ) для блока Left задано обтекание с помощью CSS свойства float:left;. В следствии этого, все Div блоки, расположенные в HTML коде ниже блока Left, начинают его обтекать и блок Footer не является исключением. А это нас совсем не устраивает, ибо футер должен всегда располагаться ниже всех других блоков нашего двухколоночного макета на блочной верстке. Надо это исправить в макете.
Для этого мы отменим обтекание Div блоком Footer блока Left. Как это сделать? Нужно дописать специальное CSS свойство для Div блока Footer в файл Style.css: clear:both. Это CSS свойство позволит расположить блок Footer ниже всех плавающих блоков, т.е. тех блоков, которым задано CSS свойство Float (обтекание справа или слева). Тем самым, мы опустим подвал в самый низ нашего макета на блочной верстке. CSS код файла 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;
}
А сам ы двухколоночный макет на блочной верстке получит футер (подвал), соответствующий всем требованиям:
Если нужно будет расположить Div блок Left (колонку с меню) не с левой стороны макета на блочной верстке, а с правой, то сделать это можно будет внеся лишь несколько изменений в наш файл Style.css. Для Div блока Left в файле Style.css нужно будет заменить CSS свойство float:left; на float:right;, а для блока Div Content убрать отступ слева на ширину блока Left и добавить точно такой же отступ справа. Т.е. для блока Content нужно CSS свойство margin-left:202px; заменить на margin-right:202px;. В результате CSS код файла 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;
}
А наш двухколоночный макет на блочной верстке с колонкой меню, расположенной справа, будет выглядеть так:
Создаем трехколоночный макет сайта на блочной верстке (Div верстке)
Вернем наш двухколоночный макет на блочной верстке к виду, когда Div блок Left расположен с левой стороны. Для создания трехколоночного макета на основе уже созданного двухколоночного, нам нужно будет лишь добавить один дополнительный Div-контейнер в код файла Index.html после 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>
В содержимое Div контейнера Right я добавил небольшое количество текста, чтобы этот блок имел сравнимый с блоками Left и Content размер по высоте. Теперь нужно будет написать отдельное CSS правило в файле каскадных таблиц стилей Style.css для четкого позиционирования нового Div блока Right, относительно других блоков нашего трехколоночного макета сайта на блочной верстке:
#right{
width:200px;
background-color:#FFFF00;
float:right;
}
CSS свойством width:200px мы задает ширину Div блока Right равной 200 пикселей, а CSS свойством background-color:#FFFF00 подцвечиваем фон этого контейнера Right для большей наглядности. Ну, а CSS свойство float:right, позволяет прижать блок Right к правой стороне и при этом все следующие за ним в HTML коде Div блоки будут обтекать его слева (обтекать его будет только блок Content, т.к. блок Footer у нас настроен так, что он лежит ниже всех плавающий блоков). Такой блок, с прописанным CSS свойством Float, называют еще плавающим Div блоком.
Но этого еще не достаточно. В начале статьи мы решали проблему залезания содержимого Div блока Content под закончившийся блок Left. Для того, чтобы сразу же избежать подобной проблемы и с блоком Right, мы зададим в CSS для Div блока 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 (блочная верстка), будет выглядеть так:
Создание резинового макета для сайта на основе блочной верстки (Div верстки)
Двухколоночный и трехколоночный макеты для сайта, которые мы научились создавать в этой серии статей, относятся к так называемым фиксированным макетам, т.к. их ширина не зависит от разрешения экрана пользователя, просматривающего сайт. Но существует и другой тип, который называется резиновый макет. В этом случае макет сайта на блочной верстке будет занимать всю ширину экрана пользователя, открывшего вебсайт.
Если разрешение экрана пользователя будет по ширине 800 пикселей, то и макет резинового сайта будет равен по ширине 800 пикселей, а если разрешение экрана пользователя будет 1920 пикселей, то и сайт растянется на всю ширину такого экрана.
В некоторых случаях использование резинового макета может быть оправдано и поэтому, стоит остановиться на том, как из обычного макета фиксированной ширины на основе блочной верстки сделать резиновый. Хотя, в принципе, тут все очень просто. Нужно лишь для Div контейнера, в котором заключен весь макет сайта (в нашем случае это Div-контейнер MAKET), задать в файле каскадных таблиц стилей Style.css не фиксированный размер макета с помощью свойства width:800px;, а относительный размер по ширине, с помощью CSS свойства width:100%;:
#maket {
width:100%;
margin:0 auto;
}
Резиновый макет сайта будет выглядеть примерно так:
Решение проблем, возникающих при создании резинового макета сайта на основе блочной верстки (Div верстки)
На первый взгляд в созданном нами резиновом макете сайта на основе блочной верстки все вроде бы хорошо, но если попробовать уменьшать окно браузера, то в определенный момент произойдет наезд одних Div блоков на другие и полный развал дизайна.
Но эту неприятность тоже довольно легко можно нейтрализовать. Достаточно лишь задать для Div контейнера, в котором находится резиновый макет сайта на основе блочной верстки (в нашем случае это Div-контейнер Maket), с помощью специального CSS свойства, минимально возможную ширину, до которой можно уменьшать размер макета. После достижения этой минимальной ширины макет как бы перестанет быть резиновым и не будет изменяться по ширине при дальнейшем уменьшении окна браузера.
Это свойство CSS выглядит так:
min-width:600px;
Цифра 600 пикселей в данном случае задает минимальную ширину резинового макета, после которой его размер перестанет изменяться. При уменьшении окна браузера ниже этой минимальной ширины, часть резинового макета сайта на блочной верстке просто перестанет быть видной:
Теперь ваш задача при создании резинового сайта будет сводиться к тому, что бы при ширине в 600 пикселей ваш сайт не перекосило, ну а при больших разрешениях этого уж точно не произойдет. Но опять же имеет одно «но» и опять это «но» связано с всеми нами любимым браузером Internet Explorer 6.
Еще достаточно много пользователей просматривают сайты через этот браузер, который, несмотря на предпринятые нами меры, все равно не будет замечать ограничения минимальной ширины резинового макета на блочной верстке и упрямо будет уменьшать ширину сайта, вплоть до полного перекоса дизайна.
Для того, чтобы побороть этот косяк резинового сайта на блочной верстке в 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-ах»:
У Евгения Попова имеется видекурс по PHP+MySQL, который стоит того, чтобы с ним ознакомиться.
Можете посмотреть бесплатные видеоуроки по Html и CSS, а так же можете ознакомиться с другими статьями:
- Верстка сайта
- Html для чайников
- Что такое язык Html, валидатор W3C и Html тэги
- Зачем нужен Doctype и комментарии в html
- Спецсимволы (мнемоники) в Html, символ неразрывного пробела
- Как использовать цвета в Html коде
- Как в Html код вставить картинку и html ссылку
- Как сделать в Html список с помощью тегов UL, OL, DL и LI
- Html таблица и теги Tr, Th, Td, Table
- Html формы - теги Form и Input
- Div верстка сайта в Html и CSS ч.1
- Html и CSS верстка сайта на DIV ч.2
- Блочная верстка
Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru
- Блочная верстка (DIV верстка) — Часть 2 — Верстка макета сайта в 2 колонки на дивах, создаем DIV-контейнеры макета в HTML, определяем их размеры и позиционирование в CSS
- Блочная верстка (DIV верстка) — Часть 4 — Как прижать футер (footer, подвал) к низу экрана в макете сайта на основе блочной верстки
- Основы блочной верстки (DIV верстки) — Часть 1 — Как работают сайты, повышение безопасности сайта, структура HTML кода, создание простого макета в 2 колонки на дивах
- Создаем для блога на WordPress кнопки социальных сетей и закладок Twitter, Vkontakte, Google Buzz, Я.ру, Мой Мир, ЛиРу (Liveinternet), Livejournal, Blogger, Facebook и Friendfeed
- Таблицы в Html (Table, Tr, Th, Td ), табличная верстка и теги Col, Tbody, Caption
Статья хорошая, но, к сожалению, нет ни слова про то, как еще этот макет на блочной верстке растянуть по высоте, чтоб сайт занимал 100% окна браузера, и чтоб футер прижимался к нижней части окна браузера.
жабак: спасибо, что напомнили. Напишу об этом в четвертой части этой серии статей по блочной верстке.
Спасибо за статью по блочной верстке. А мне вот еще интересно как делаются сглаженные границы областей и задается сложный фон, чтобы выглядело более профессиональна, а то пока на вид очень «самописный сайт» получается.
Relaximus: все будет, но как скоро не знаю, ибо стараюсь писать во все рубрики более менее равномерно, а тему CSS и блочной верстки вообще только только начал.
Для меня, как для начинающего веб мастера, этот блог просто находка. Теперь ежедневно часами все читаю и нахожу для себя много нового. Спасибо большое за ваши статьи!
Отличный урок! Даже не урок, а мануал, садись и делай)
Сам я блочную div-верстку только начинаю осваивать, ваш урок как-нельзя кстати пришелся. Спасибо большое.
Георгий: Klerik: пожалуйста.
Подробный видео урок по созданию 100% резинового сайта.
letitbit.net/download/295...ssons_3.rar.html
Интересно в каком броузере работает следующая конструкция именно так как описано в этой статье?
#content{
background-color:#8080FF;
margin-left:202px;
margin-right:202px;
}
Отступ-margin являеться частью div и следующий div с неабсолютный!!! позиционированием никак не налезет на margin предыдущего div!
А статья хорошая!
а как сделать чтобы шапка обтекала правое меню?
Если вставить последний код, то весь текст. И в контенте и в хедере и в футере становится «по центру». И, не знаю, как в ИЕ6, но в Хроме дизайн «слетает» при уменьшении окна
Selric: Selric: У меня в Хроме работает
Спасибо... жаль, что некоторое время назад мне не попадались такие статьи... приходилось изобретать велосипеды
ps. Ну и IE (не только 6), как всегда «на высоте» )))
Создаем трехколоночный макет сайта на блочной верстке (Div верстке)
Вернем наш двухколоночный макет на блочной верстке к виду, когда Div блок Left расположен с левой стороны. Для создания трехколоночного макета на основе уже созданного двухколоночного, нам нужно будет лишь добавить один дополнительный Div-контейнер в код файла Index.html после Html кода, описывающего блок Left.
Я вот, никак не могу понять, почему блок right, надо вписывать именно после блока left. В этом случае все работает, но если я к примеру, напишу его после блока content, оно не работает корректно...почему?
Подскажите пожалуйста — что нужно сделать чтобы блоки left и content — автоматчно растягивались к блоку header — сверху и блоку — footer внизу, сразу а не по мере их заполнения.
Ну во первых хочется сказать что просто надоело каждый раз выравнивать их друг к другу — когда добавляю в них новый контент.
Просто хотелось бы чтобы в независимости от количества контента они всегда были плотно прижаты к нижней и верхней блоков ...
Я планирую использовать блоки left и content — как контейнеры для навигации и новостей.
Спасибо огромное за предоставленную статью. Прояснили мне многие нонятки в блочной верстке. Все написано ПРЕДЕЛЬНО понятно и доходчиво!
Добрый день ! Очень хорошая статья, спасибо.
Но у меня такой вопрос. Мне по центру нужно вставить рисунок.
А на рисунке сверху надписи — кнопки.Эти надписи должны быть в определенных местах. Если я делаю резиновый макет — то при использовании широких современных мониторов — рисунок растягивается (но при этом надписи на нем ставятся нормально так как все в %). А если я делаю фиксированный макет то рисунок ни надписи пропорционально не размещаются.
Как сделать чтобы в широком мониторе не растягивался рисунок ?
Может можно как-то сделать фиксированный макет а в него вставить рисунок в %?спасибо
Полностью статью не читал, но пробежался. Большое спасибо. Это лучшее что я нашел в сети
Автор, 5 баллов! Только благодаря этой статьей наконец-то смог разобраться как приступать к созданию сайта. А то везде куча информации по тегам или сложным вёрсткам, а как начать если кто и рассказывает, то вскользь и невзначай. Спасибо!
поставил таблицу в блок по середине и он уехал вниз. Что делать то?
У меня IE 6. Но даже после вставки данного хака — верстка летит. Хм. может кто-то подскажет, в чем проблема?
Текст при просмотре в браузере не остается в рамках блоковбвылазит и наползает на соседний блок вдоль строки,ПОМОГИТЕ СОВЕТОМ!
если вместо многократного «содержимое страницы» писать многократно Content, то текст идет до края монитора, а не спускается вниз. как решить вопрос с наполнением английским текстом?