Как сделать правильный двухколоночный макет, тянущийся, по вертикали (на div-ах)
Двухколоночный макет, тянущийся, по вертикали (CSS only)
Задача: нужно сделать двухколоночный макет так, чтобы обе колонки имели одинаковую высоту (были растянуты по вертикали).
О чем это он? о_0
Доброго времени суток. Сразу хочу объяснить что же я имею в виду. Вы конечно же верстали двухколоночные шаблоны тянущиеся по вертикали, со статической длинной и так далее. И конечно же Вы сталкивались с проблемой, которую я хочу рассмотреть в этой статье.
Вступление
Мы верстаем двухколоночные макет для маленького блога или даже микроблога, не побоюсь этого слова. Идеальный пример — Twitter.com. Зайдите на этот сервис и посмотрите на макет. Высота колонок одинаковая не зависимо от их содержимого.. они просто всегда равны. Еще и бордер в придачу между ними.. такие возможности дает нам табличная верстка. Просто один рядок и две ячейки. Таблица сделает все за Вас.
К сожалению я не любитель такой верстки — верстки таблицами… это конечно семантически корректно и очень просто, но все же я задался целью сделать это DIV’ами.
Проблема
Главная проблема заключается в том, что при разном содержимом наши колонки будут иметь разную высоту. Смотрите скриншот:
Видите? Я поставил немного переносов строк и получилось вот ЭТО. Никуда не годится.. то же самое получается и с другой колонкой…
Цель
Как Вы уже поняли, цель заключается в том, чтобы сделать колонки тянущимися, или, легче будет сказать, «всегда одинаковыми по высоте вне зависимости от содержимого».
Приступим
Для начала, как я всегда делаю, представлю Вам HTML код:
<div>
<div>
LEFT COLUMN HERE
</div>
<div>
<div>
RIGHT COLUMN HERE
</div>
</div>
</div>
Как Вы можете наблюдать, я создал общий контейнер для моих колоночек :). Они живут в страничке, у них статическая длинна и они разноцветные. Вот кстати нужный нам CSS код:
.page { background:#ffff66; width:500px; overflow:hidden; }
.leftcol {
float:left; background:#ccff66;
width:350px; border-right:1px solid #ff9900;
}
.rightcol { padding-left:350px; background:#ccff66; }
.rightcol .content { background:#ffff66; border-left:1px solid #ff9900; }
Все и без меня ясно, но я вставлю свои пять копеек. Главному контейнеру (page) мы ставим фон желтого цвета, это на тот случай если наша правая колонка будет короче левой.
Левая колонка принимает свойства float со значением left и фон, свой собственный фон — зеленый, длинна — 350 пикселей.
Правой колонке установим значение padding-left равным ширине левой колонке — 350 пикселей и ЗЕЛЕНЫЙ фон. ВАЖНО установить именно padding, а не margin, так как наша колонка не будет страховать левую в том случае если та будет короткой.
Внутри контейнера с правой колонкой я создал еще один блок, который и будет иметь свой правильный ЖЕЛТЫЙ фон.
Не забудьте про overflow:hidden у элемента .page. Это исправляет неправильное вычисление браузером высоты этого блока. В противном случае все будет как на предыдущем скриншоте.
Вот и он!!! Попробуйте подобавлять немного содержимого куда-либо.. все будет отлично! Кстати, я совсем не упомянул о бордере.. На левую колонку ставим border-right, на вложенный блок правой — border-left. Верстка кроссбраузерная (ИЕ6 тоже)!!! Никаких таблиц и javascript’a.
Хух… долго здесь ничего не писал… надеюсь кому-то это будет интересно и может даже пригодится… исправляйте, если есть ошибки… Спасибо…
seodon.ru | Двухколоночные резиновые макеты сайтов
Опубликовано: 12.05.2011 Последняя правка: 16.12.2015
Двухколоночные резиновые макеты используются в тех случаях, когда в одной колонке требуется указать основную контентную часть сайта, а в другой — какую-то дополнительную информацию, например меню навигации. При этом автору необходимо, чтобы страницы сайта подстраивались под окно браузера, занимая всю его доступную ширину.
При работе над версткой макетов помните о том, что если вы решите добавить к колонкам рамки (свойство CSS border), внутренние отступы (свойство CSS padding) или внешние поля (свойство CSS margin), то их размеры увеличатся и может произойти наложение этих колонок друг на друга или макет просто «поедет». В таких случаях следует уменьшить указанную явно ширину (свойство CSS width) или высоту (свойство CSS height) до необходимых размеров.
Две колонки резиновые
Пример HTML и CSS: верстка макета с двумя резиновыми колонками
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>seodon.ru - Две колонки резиновой ширины</title> <style type="text/css"> body { color: #000; /* цвет текста страницы */ background: #fff; /* цвет фона */ margin: 0; /* обнуление полей по краям */ } #header { height: 100px; /* высота шапки */ background: #fc0; /* фоновый цвет */ } #content { width: 80%; /* ширина контента */ background: #eee; /* фон */ height: 300px; /* высота */ float: right; /* всплытие вправо */ } #menu { height: 300px; /* высота меню */ background: #0fc; /* фон */ margin-right: 80%; /* правое поле */ } #footer { height: 50px; /* высота подвала */ color: #fff; /* цвет текста */ background: #000; /* фон */ clear: both; /* прерывание обтекания */ } </style> </head> <body> <div>Шапка</div> <div>Контент</div> <div>Меню</div> <div>Футер</div> </body> </html>
Результат примера
Описание макета
- Для того чтобы колонки двухколоночного макета были резиновыми, их ширина указывается в процентах.
- К колонке с контентом было применено свойство CSS float:right, чтобы она всплыла влево, а колонка с меню поднялась на один с ней уровень.
- Чтобы блок с меню не заходил под всплывший, ему было установлено правое поле с помощью CSS margin-right размер которого равен ширине контента.
- На тот случай, если высота контента будет больше, чем у меню, к футеру было применено свойство CSS clear прерывающее обтекание.
- Получается, что этот макет тоже с контентом впереди, хотя и не пришлось делать никакие «финты ушами».
Одна колонка резиновая, вторая фиксированная
Пример HTML и CSS: верстка макета с одной резиновой и одной фиксированной колонками
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>seodon.ru - Одна резиновая, а вторая фиксированная колонки</title> <style type="text/css"> body { color: #000; /* цвет текста на странице */ background: #fff; /* фон */ margin: 0; /* убираем поля по краям */ } #header { height: 100px; /* высота шапки */ background: #fc0; /* цвет фона */ } #menu { width: 250px; /* ширина меню */ height: 300px; /* высота */ background: #0fc; /* фон */ float: left; /* всплытие влево */ } #content { background: #eee; /* фон контента */ height: 300px; /* высота */ margin-left: 250px; /* поле слева */ } #footer { height: 50px; /* высота шапки */ color: #fff; /* цвет текста */ background: #000; /* цвет фона */ clear: both; /* прерывание обтекания */ } </style> </head> <body> <div>Шапка</div> <div>Меню</div> <div>Контент</div> <div>Футер</div> </body> </html>
Результат примера
Описание макета
- Чтобы колонки в двухколоночном макете были на одном уровне, блоку с меню была задана фиксированная ширина и применено CSS float:left. Вследствие этого колонка с меню всплыла к левому краю страницы, а блок с контентом обтек ее справа.
- Чтобы блока с не заплывал под меню, ему было установлено левое поле (свойство CSS margin-left) с размером равным ширине этого меню.
- Чтобы футер не обтек колонку с меню, для него было сделано прерывание обтекания с помощью свойства clear.
Две колонки с резиновым контентом впереди
Пример HTML и CSS: верстка двухколоночного макета с контентом впереди
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>seodon.ru - Макет в две колонки с контентом впереди</title> <style type="text/css"> body { color: #000; /* цвет текста страницы */ background: #fff; /* фон */ margin: 0; /* обнуление полей */ } #header { height: 100px; /* высота шапки */ background: #fc0; /* фон */ } #cont_wrap{ float: right; /* блок-обертка для контента всплывает вправо */ width: 100%; /* ширна блока */ margin-left: -250px; /* левое отрицательное поле */ } #content { background: #eee; /* фоновый цвет контента */ height: 300px; /* высота */ margin-left: 250px; /* левое поле */ } #menu { width: 250px; /* ширина меню */ height: 300px; /* высота */ background: #0fc; /* фон */ float: left; /* всплытие влево */ } #footer { height: 50px; /* высота футера */ color: #fff; /* цвет текста */ background: #000; /* фон */ clear: both; /* прерывание обтекания */ } </style> </head> <body> <div>Шапка</div> <div> <div>Контент</div> </div> <div>Меню</div> <div>Футер</div> </body> </html>
Результат примера
Описание макета
- Для того чтобы в этом двухколоночном макете колонка с меню смогла обтечь контент был использован дополнительный оберточный блок (id=»cont_wrap»), которому было задано левое отрицательное поле (CSS margin-left). Также у этого блока была указана ширина (CSS width) в 100%, чтобы при всплытии вправо его размер не уменьшился.
- Чтобы колонка с контентом не «подныривала» под меню, ей было задано левое поле размером 250px (ширина меню).
- Колонке с меню было дополнительно задано свойство CSS float:left, так как некоторые (особенно старые) браузеры без этого «пинка» отказываются ее поднимать на один уровень с контентом.
- У футера было установлено прерывание обтекания (CSS clear:both), чтобы он всегда находился под колонками.
Создание двух-колоночного макета на дивах. Блочная верстка DIV.
В самом простом варианте блочный макет состоит всего из двух файлов — index.html и style.css. Эти файлы вы можете размещать, в любой папке на севере вашего хостинга. Допустим, что вы создадите в корневой папке вашего хостинга папку mysite, в которую положите файлы нашего макета index.html и style.css.
Тогда, при обращению через браузер к папке 123 (в случае моего блога нужно будет набрать в адресной строке браузера http://emmell.ru/123), запустится файл index.html. Но браузер так же осуществит загрузку файла style.css, т.к. мы пропишем в index.html путь до файла каскадного стилевого оформления style.css.
Сначала создадим простой двух-колоночный макет страницы, который будет содержать верхнюю часть — «чердак» (шапку или header), нижнюю часть — «подвал» (footer), а так же те самые две колонки, из-за которых такой макет и называется двух-колоночным. Это область для основного содержимого страницы (content) и область левой (или правой) колонки (left), в которой обычно располагаются элементы меню, облегчающие навигацию по сайту, реклама и другое.
Каждый из элементов макета мы помещаем в свой контейнер DIV, присваеваем ему уникальный ID или Class, для которого в файле CSS добавим ряд своих свойств, описывающих внешний вид и положение данного контейнера на странице. Кроме этого, все контейнеры с элементами макета мы поместим в один общий контейнер, который позволит нам регулировать положение всего макета на странице: задать ширину макета, выравнивать макет относительно края страницы и другое.
Итак, вам нужно будет создать и сохранить в текстовом редакторе или же в любом специализированном веб-редакторе (например Dreamweaver) два пустых файла index.html и style.css. Начнем, с написания HTML кода в файле 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″> <link href=»style.css» rel=»stylesheet» type=»text/css»> <title>Cтруктура HTML кода, создание простого двух-колоночного макета на дивах. Блочная верстка DIV.</title> </head> <body> </body> </html> |
Как видно по коду в шляпе (head) присутствует ссылка на загрузку стилей:
<link href=»style.css» rel=»stylesheet» type=»text/css»> |
Эта строка указывает браузеру, где ему искать и как называется файл стилей каскадных таблиц, который нужен браузеру для корректного отображения макета. В моем примере, файл каскадных таблиц стилей — style.css, а искать его нужно в той же папке, где лежит файл index.html.
Почему именно в той же папке? Потому, что если вы не прописываете никакого другого пути до файла, а указываете только его название, то браузер будет искать этот файл в той же папке, где лежит исполняемый сейчас файл, в моем примере это index.html. То есть отсутствие пути до файла CSS будет равносильно тому, как если бы я прописал путь до файла STYLE.CSS в виде:
<link href=»http://emmell.ru/123/style.css» rel=»stylesheet» type=»text/css»> |
Но первый вариант записи универсальный, т.к. там напрямую не указывается путь до папки с файлами, а значит можно будет поместить файлы index.html и style.css в другую папку.
Создадим четыре контейнера для всех частей нашего макета: левой колонки, шапки, области для контента, подвала и заключим их в один большой div-контейнер. Внутрь дивов для частей макетов можно заключить для названия этих блоков макета. Все это нужно писать между открывающим и закрывающим тегами BODY. Получится примерно такой код index.html:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!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>
<div>Шапка</div> <div>Левая колонка</div> <div>Содержимое страницы</div> <div>Подвал</div>
</div> </body> </html> |
Замечу, что индентификаторы ID должны быть уникальными, не повторяющимися. Если понадобится использовать одно и тоже свойство для множества дивов следует использовать классы — class=»имя_класса». ID и Class можно использовать параллельно например:
<div>Содержимое страницы</div> |
Сразу за тегом BODY мы прописали открывающий тег основного контейнера c id:
Потом для этого ID, в style.css, мы пропишем свойства, позволяющие определить размер и выравнивание контейнера. После открывающего тега основного div-контейнера мы прописали код четырех контейнеров, которые станут элементами макета.
<div>Шапка </div> <div>Левая колонка</div> <div>Содержимое страницы</div> <div>Подвал</div> |
Всем этим макетам мы определили свои индивидуальные ID, для которых в файле syle.css мы пропишем свойства, настраивающие размер и взаимное позиционирование контейнеров. Для наглядности, внутри этих контейнеров я прописал их назначение. В конце, перед закрывающим тегом BODY, следует закрыть тег основного контейнера:
Если открыть созданный нами index.html в браузере, мы увидим просто перечисление в столбик названий частей макета. Все получилось именно так, как мы и хотели — четыре контейнера заключены в одном основном контейнере. Для того чтобы все выглядело как структурной схеме
следует перейти к описанию свойств каждого блока-контейнера, их позиционирование относительно друг друга.
Открываем в удобном для вас редакторе файл style.css и прописываем стили для див-контейнеров. Сначала в этом файле стоит прописать правило для тегов BODY и HTML, которое позволит сбросить отступы от внутренних и внешних границ, для соблюдения кроссбраузерности:
body, html {margin:0px;padding:0px;} |
Макеты для сайта могут быть фиксированной ширины, например 950px, а могут быть и резиновым — ширина макета подстраивается под разрешение экрана посетителя вашего сайта. Второй вариант, резиновый макет, часто используется на форумах, а для сайтов чаще всего применяют макет фиксированной ширины. Особенно это актуально сейчас, с появление широкоформатных мониторов с широким разрешением экрана.
Для основного Div-контейнера пропишем ряд свойств в style.css, которые позволят создать макет фиксированной ширины 800px и выровнять макет по центру относительно краев экрана. В index.html для основного контейнера обозначен ID — maket:
#maket {width:800px;margin:0 auto;} |
Обозначения:
#maket — селектор или по-другому — имя стиля, говорит о том, что данная запись в CSS будет применена только к контейнеру, в котором прописан ID=»maket» . В фигурных скобках записываются свойства CSS. Общий синтаксис записи CSS выглядит так:
Селектор { свойство1: значение; свойство2: значение; … } |
Код CSS будет работает вне зависимости от регистра символов, переноса строк, пробелов или табуляции — в общем, условное оформление не принципиально, пишите так, как вам будет удобнее.
width:800px; — задает ширину для основного контейнера
margin:0 auto; — позволяет выровнять основной контейнер посередине относительно левого и правого края экрана.
Свойство margin предназначено для задания отступов от внешних границ контейнера до соседних элементов. В моем примере основной контейнер является самым внешним элементом макета, поэтому свойство margin будет задавать отступ от границ основного контейнера до границ экрана браузера.
Первое значение, прописанное в свойстве margin равно нулю — это означает, что основной контейнер будет вплотную прижат к верхнему и нижнему краю экрана, так как отступы сверху и снизу равны нулю. Второе значение margin прописано как auto — это означает, что отступ от левой и правой границы основного контейнера будет равномерно распределен, в результате чего основной контейнер, в моем примере это фактически сам макет, будет выровнен по центру относительно левого и правого края экрана.
После записи всего вышеперечисленного style.css выглядит так:
body, html { margin:0px; padding:0px; } #maket { width:800px; margin:0 auto; } |
Сохранив изменения и открыв index.html в браузере увидим, что теперь ширина макета стала равна 800px и макет выровнялся по центру относительно правого и левого краев экрана.
Для корректного отображения этих свойств CSS, для выравнивания двух-колоночного макета по центру в старых версиях браузеров следует добавить следующие свойства:
body, html {text-align:center;} #maket {text-align:left;} |
Изменим цвет фона блоков, с помощью специально предназначенного для этого свойства CSS — background-color. Цвета задаются в кодовом выражении, которое начинается со знака решетки. Например:
#header{background-color:#C0C000;} #left{background-color:#00C0C0;} #content{background-color:#8080FF;} #footer{background-color:#FFC0FF;} |
Далее, по структурной схеме, приведенной в начале статьи, header должен у нас занимать всю ширину макета, а блок left должен иметь ограниченную ширину. Чтобы блок content располагался не снизу, а справа от блока left его следует прижать и задать обтекание слева. Пропишем это в css:
#left{background-color:#00C0C0; width:200px;} #left{background-color:#00C0C0;width:200px; float:left;} |
Подвал не должен обтекать левую колонку справа, он должен располагаться в самом низу макета и занимать всю его ширину. Из-за того, что включено обтекание блока left всеми другими блоками все последующие блоки начинают прижиматься к левому краю шаблона. Чтобы это избежать следует указать отступ для блока content от края шаблона равный ширине блока left. При увеличении высоты левой колонки, подвал, блок footer начинает ее обтекать, так как в style.css для блока left задано обтекание с помощью свойства float:left;. Чтобы этого избежать для этого блока следует ввести очистку обтеканий clear:both.
#content{background-color:#8080FF; margin-left:202px;} #footer{background-color:#FFC0FF; clear:both; |
index.html:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!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> <div>Шапка</div> <div>Левая колонка</div> <div>Содержимое страницы</div> <div>Подвал</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;margin-left:202px;} #footer{background-color:#FFC0FF;clear:both;} |
Условная разметка с css:
Рассказать:
Осваиваем CSS: макет страницы
- Главная
- ->
- Материалы
- ->
- Осваиваем CSS: макет страницы
Reg.ru: домены и хостинг
Крупнейший регистратор и хостинг-провайдер в России.
Более 2 миллионов доменных имен на обслуживании.
Продвижение, почта для домена, решения для бизнеса.
Более 700 тыс. клиентов по всему миру уже сделали свой выбор.
Перейти на сайт->
Бесплатный Курс «Практика HTML5 и CSS3»
Освойте бесплатно пошаговый видеокурс
по основам адаптивной верстки
на HTML5 и CSS3 с полного нуля.
Начать->
Фреймворк Bootstrap: быстрая адаптивная вёрстка
Пошаговый видеокурс по основам адаптивной верстки в фреймворке Bootstrap.
Научитесь верстать просто, быстро и качественно, используя мощный и практичный инструмент.
Верстайте на заказ и получайте деньги.
Получить в подарок->
Бесплатный курс «Сайт на WordPress»
Хотите освоить CMS WordPress?
Получите уроки по дизайну и верстке сайта на WordPress.
Научитесь работать с темами и нарезать макет.
Бесплатный видеокурс по рисованию дизайна сайта, его верстке и установке на CMS WordPress!
Получить в подарок->
*Наведите курсор мыши для приостановки прокрутки.
Назад Вперед
Осваиваем CSS: макет страницы
Одно из главных преимуществ CSS — возможность контролировать внешний вид страницы без использования тэгов оформления HTML. Однако, создание CSS-шаблонов незаслуженно получило репутацию чего-то сложного, особенно среди тех разработчиков, кто еще только осваивает данную технологию. Отчасти это связано с тем, что не все браузеры одинаково интерпретируют CSS, но еще больше — с тем фактом, что сейчас существует просто огромное количество разных техник создания макетов средствами таблиц стилей.
Кажется, будто каждый веб-разработчик имеет свои собственные приемы и техники верстки CSS-шаблонов, и начинающие вебмастера зачастую используют какую-то технику даже не понимая, как она работает. Такой подход по типу «черного ящика» к использованию CSS помогает, конечно, получить результат быстро, но, в конечном счете мешает росту понимания языка разработчиком.
Однако все эти различные техники имеют в своей основе три основных концепции: позиционирование, обтекание, манипулирование внешними отступами. Различные техники при ближайшем рассмотрении оказываются не такими уж и различными, и, если вы освоите основным понятия и концепции, то вам будет относительно легко создать ваш собственный CSS-шаблон страницы.
Центрирование дизайна
Длинные строки текста читать очень неудобно или даже трудно. По мере того, как мониторы и их разрешения продолжают расти, проблема удобочитаемости текста с экрана встает все острее. Один из способов справиться с данным вопросом — отцентровать содержание страницы. Вместо того, чтобы растягивать контент на всю ширину экрана, центрированные дизайны занимают только часть экрана, благодаря чему строки приобретает удобную для чтения длину.
Страницы с центрацией контента сейчас широко распространены, поэтому изучение способов создания центрированного дизайна с помощью CSS — одна из первых вещей, которую хотят освоить начинающие веб-разработчики. Существует два основных способа центрации дизайна: в одном случае используются автоматические внешние отступы, в другом — позиционирование и отрицательные отступы.
Центрирование с использованием автоматических внешних отступов
Предположим, перед вами стоит типичная задача отцентровать по горизонтали контейнер div с id wrapper («обертка»).
<body> <div> </div> </body>
Для осуществления этого на практике нужно просто задать ширину div wrapper и установить горизонтальные внешние отступы в значение auto.
#wrapper { width: 720px; margin: 0 auto; }
В данном примере ширина установлена в пикселях. Но, разумеется, с таким же успехом можно указать ее в процентах от ширины тела документа body, либо использовать размер в «em» относительно размера текста.
Такой способ работает во всех современных браузерах, но не в IE 6. К счастью, IE неправильно интерпретирует свойство text-align: center, выравнивая по центру все, а не только текст. Вы можете использовать это себе во благо, центрируя все, что находится в тэге body, включая и div wrapper, переназначая затем выравнивание на left для содержимого блока wrapper.
body { text-align: center; } #wrapper { width: 720px; margin: 0 auto; text-align: left; }
Использование свойства text-align подобным образом является по сути хаком, но он совсем безобиден и не окажет неблагоприятного воздействия на ваш код. Сейчас наш блок wrapper отцентрирован и в IE 6, точно так же, как и в других браузерах, которые лучше дружат со спецификацией.
Центрирование дизайна с использованием позиционирования и отрицательных отступов
Метод с использованием автоматических внешних отступов — наиболее популярный подход, но при его использовании приходится прибегать к хаку. Также он требует стилевого оформления двух элементов вместо одного. Именно по этой причине многие предпочитаю использовать позиционирование и отрицательные отступы.
Начинаем, как и в предыдущем примере — с установки ширины wrapper. Затем устанавливаем свойство position для wrapper в значение relative и свойство left в значение 50%. Это позволяет нам разместить левый край блока wrapper в центре страницы.
#wrapper { width: 720px; position: relative; left: 50%; }
Нам, однако, нужно немного другое — мы хотим видеть в центре страницы центр блока wrapper. Добиться этого можно, применив отрицательный отступ с левой стороны блока wrapper равный половине ширины этого блока. Это сдвинет блок wrapper на половину его ширины влево, перемещая его в центр экрана:
#wrapper { width: 720px; position: relative; left: 50%; margin-left: -360px; }
Ваш выбор способа центрации зависит только от вашего вкуса. Однако, всегда полезно знать несколько способов и техник, так как нельзя угадать, что может вам пригодиться.
Шаблоны на основе обтекания
Существует несколько способов создания шаблонов средствами CSS, включая абсолютное позиционирование и отрицательные отступы. Я считаю наиболее простым в использовании метод, основанный на обтекании одних элементов другими. Как ясно из названия, в такого типа шаблонах вы просто устанавливаете ширину позиционируемых элементов, а затем задаете им обтекание слева или справа.
Поскольку такие «обтекаемые» элементы больше не занимают никакого места в потоке документа, они не оказывают никакого влияния на окружающие их блочные элементы. Чтобы обойти такое поведение, вам нужно будет отменить обтекание на различных опорных точках вашего шаблона. Вместо того, чтобы последовательно применять обтекание и его отмену, удобнее использовать несколько другой подход: применять обтекание практически ко всему а затем отменять его один или два раза в «стратегических» точках документа, вроде футера.
Двухколоночный шаблон с использованием обтекания
Для создания простого двухколоночного шаблона с использованием обтекания, начнем с базовой структуры (X)HTML. В нашем примере (X)HTML-каркас состоит из зон: branding, content, зоны для навигации и футера. Вся данная структура заключена в «обертку» — wrapper, который будет выровнен по горизонтали одним из описанных выше способов.
<div> <div> ... </div> <div> ... </div> <div> ... </div> <div> ... </div> </div>
Главная навигация будет слева, а контент — с правой стороны. Однако в структуре страницы я поместил зону контента выше зоны навигации. Основная причина этого заключается в том, что содержание страницы наиболее важно и должно быть помещено в документе как можно выше, ближе к его началу.
Обычно, когда люди создают шаблоны и использованием обтекания, они придают свойству float значение left для обеих колонок, после чего создают «поле» между колонками, используя свойства margin или padding. При использовании такого подхода колонки плотно прижаты в доступном им пространстве — так, что «не продохнуть». Обычно это не вызывает проблем, но некоторые браузеры разрушают такой «плотный» дизайн, при этом колонки выстраиваются в столбик — одна под другой.
Это может происходить в IE, потому что в IE за основу берется «размер» контента, а не содержащего контент элемента. В браузерах, придерживающихся стандартов, если контент не помещается в блоке, он просто выходит за его пределы. В IE, однако, если контент не помещается в содержащем его элементе, то он «растягивает» элемент, увеличивая его в размере. Если подобная вещь происходит в плотном, зажатом дизайне, то у элементов больше не остается места, чтобы оставаться рядом друг с другом, и один из них как бы «проваливается», опускается ниже другого.
Чтобы избежать подобного развития событий, старайтесь не переполнять блок, содержащий ваш дизайн с обтеканием. Вместо использования горизонтальных внешних и внутренних отступов, (margin, padding) вы можете создать «виртуальные поля» придавая одному блоку float:left, а другому — float:right.
Сейчас, если один из элементов незначительно (в пределах нескольких пикселей) увеличится в размерах, вместо того, чтобы разрушить весь дизайн, вытеснив один из блоков ниже другого, произойдет «наплывание» блока на территорию «виртуального поля».
Код CSS для достижения данной цели самоочевиден. Мы просто устанавливаем желаемую ширину для каждой из колонок, после чего указываем для навигации float:left, а для контента — float:right.
#content { width: 520px; float: right; } #mainNav { width: 180px; float: left; }
Затем, для того, чтобы корректно позиционировать футер под навигацией и контентом, для него нужно отменить обтекание.
#footer { clear: both; }
Базовый вариант готов. Добавим еще пару штрихов. Внутренние отступы сверху и снизу для всего блока навигации и внутренние отступы слева и справа для списка пунктов в навигационном меню.
#mainNav { padding-top: 20px; padding-bottom: 20px; } #mainNav li { padding-left: 20px; padding-right: 20px; }
Проставим также отступ справа в зоне контента:
#content h2, h3, p { padding-right: 20px; }
Вот и все, теперь у нас готов простой двухколоночный макет на CSS.
Трехколоночный шаблон с использованием обтекания
HTML-каркас для построения трехколоночного шаблона очень похож на тот, что мы использовали с двухколоночным с той лишь разницей, что в нем появляются два дополнительных блока div: один для основного контента и еще один — для дополнительного.
<div> <div> … </div> <div> … </div> </div>
Используя те же самые правила CSS, что и в случае двухколоночного шаблона, мы можем придать блоку основного контента float:left, а блоку дополнительного — float:right. Все это будет происходить внутри уже правильно спозиционированного основного блока content. Таким образом мы разделяем вторую колонку content на две, получая трехколоночный макет.
Как и раньше, CSS-код очень прост. Нужно просто указать желаемую ширину для каждого из блоков и задать каждому свое обтекание.
#mainContent { width: 320px; float: left; } #secondaryContent { width: 180px; float: right; }
Можно немного подчистить шаблон, удалив внутренний отступ из блока content, применив его непосредственно к контенту блока secondaryContent:
#secondaryContent h2, h3, p { padding-left: 20px; padding-right: 20px; }
Таким образом, мы получаем с вами вот такой симпатичный трехколоночный макет.
Andy Budd, Cameron Moll и Simon Collison: «CSS Mastery: Advanced Web Standards Solutions»
webreference.com
Перевод — Дмитрий Науменко
P.S. Хотите больше материалов по прикладной верстке? Посмотрите бесплатные курсы ниже. Это серия видео по резиновой верстке сайта и бесплатный курс по основам адаптивной верстки. Они помогут вам быстрее получить необходимые навыки:
Понравился материал и хотите отблагодарить?
Просто поделитесь с друзьями и коллегами!
Смотрите также:
Наверх
Адаптированный под мобильные шаблон 2 колоночного сайта.
После того, как мы рассмотрели как можно сделать простейший одноколоночный макет адаптированный под мобильные устройства, давайте рассмотрим более сложный пример верстки 2 колоночного макета.
Добавим к исходному макету сайта боковую колонку.
HTML:
<div> <h2>Шаблон двухколоночного макета страницы, адаптированного под мобильные устройства.</h2> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque cum enim esse explicabo nihil, exercitationem illo itaque voluptatum rerum ducimus et facere aut, in tempora, error ipsa, aliquam provident doloribus! </p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque cum enim esse explicabo nihil, exercitationem illo itaque voluptatum rerum ducimus et facere aut, in tempora, error ipsa, aliquam provident doloribus! </p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque explicabo quis saepe consequatur quas officiis voluptas excepturi, id et mollitia ipsa eius dignissimos veritatis impedit possimus quo veniam placeat omnis!</p> </div> <div> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque cum enim esse explicabo nihil, exercitationem illo itaque voluptatum rerum ducimus et facere aut, in tempora, error ipsa, aliquam provident doloribus! </p> </div>
Как адаптировать подобный шаблон под мобильные устройства?
Смысл следующий: мобильные устройства имеют очень узкую ширину экрана и размещать по горизонтали несколько блоков не имеет смысла. Все равно они будут располагаться очень криво и будет появляться горизонтальная полоса прокрутки.
Нужно добиться такого эффекта, чтобы на устройствах с небольшим экраном блоки располагались один над другим (по вертикали), но если страница будет просматриваться на устройстве с большой диагональю экрана, блоки должны отображаться по горизонтали в две колонки.
Давайте посмотрим, как этого можно добиться.
Шаг 1. Располагаем элементы по горизонтали для отображения на больших мониторах.
Для решения этой проблемы, добавляем на веб-страницу следующий код.
CSS:
body{ font-size: 16px; font-family: Candara, Trebuchet MS, Arial, Sans-serif; } .container{ width: 64%; float: left; margin: 25px auto; background: #e3e3e3; padding: 15px; } .aside { float: right; padding: 3%; margin-top:25px; width: 24%; background-color: #eee; }
По сути, мы размещаем две колонки рядом друг с другом с помощью свойства float.
Подробнее об этом здесь.
Посмотрите на видео, что будет происходить с этими двумя колонками, при сужении ширины экрана браузера.
При определенном значении ширины окна браузера, правая колонка «выпадает» вниз и смотрится очень не хорошо.
Было бы намного лучше, если бы правая колонка «выпала» вниз и стала занимать большую часть экрана и левая колонка также заняла бы то оставшееся пространство, которое занимала правая колонка.
Давайте посмотрим, как это можно сделать.
Шаг 2. Адаптируем макет под мобильные устройства.
Добиться подобного эффекта позволяет правило CSS @media. Подробнее о нем разбиралось здесь.
@media all and (max-width : 768px) { .container { width: 94%; padding: 3%; } .aside { width: 94%; padding: 3%; } }
Давайте посмотрим, каким образом веб-страница будет отображаться теперь при сужении ширины окна браузера.
Блоки, которые располагались в несколько колонок теперь подстраиваются под новую ширину экрана браузера и выстраиваются в столбик.
Далее. Следующие уроки по CSS.
Верстка сайта с нуля. Трехколоночный макет. Часть 4
Вы здесь: Главная — HTML — HTML 5 — Верстка сайта с нуля. Трехколоночный макет. Часть 4

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

Следуя рекомендациям W3C по использованию HTML5, каждая колонка была сгруппирована в теге: article. Поскольку содержимое каждой из трех колонок можно легко объединить в три похожих по смыслу группы.
Появление новых смысловых блочных тегов, облегчает работу вебмастерам. До появления HTML5, исходник с HTML-кодом был весь «забит» div-ами. Разбираться в таком коде было крайне тяжело, приходилось ставить много комментариев. В современной блочной верстке применять тег div следует только там, где не подходят другие.
Итак, давайте приступим к верстке трехколоночного макета. Для начала создадим секцию section с коричневым фоном, куда поместим три белых блока. В обычном потоке данные блоки встали бы друг под другом. Но мы меняем им данное свойство по умолчанию, прописав в стилях у всех трех блоков float:left; Таким образом, поставив их в один ряд. После этого, не забываем делать отмену обтекания, прописав пустой блок div.
<div></div>
и соответственно в стилях будет:
.clear{clear:both;} /* отмена float */
Кусок кода верстаемого блока на HTML-странице:
<section>
<div>
<h3>Обо мне</h3>
<p>Я умный, милый, обаятельный и в меру упитанный мопс.</p>
<article>
<img src="images/img1.jpg" alt="картинка мопса">
<h4>Мой загадочный друг</h4>
<p>Мы с Каспером лучшие друзья. Он конечно внешне не такой милый как
я, но мне нравиться с ним играть. Он загадочный и похож на инопланетянина.</p>
</article>
<article>
<img src="images/img2.jpg" alt="картинка мопса">
<h4>Мое главное занятие</h4>
<p>Я могу спать везде и всегда - дома на подоконнике, на всех
кроватях и диванах, а особенно в машине у мамы на ручках. Меня дома называют "спящая красавица"</p>
</article>
<article>
<img src="images/img3.jpg" alt="картинка мопса">
<h4>Мои хобби</h4>
<p>Я собака-компаньон. Что это значит на деле? На самом деле долгие
прогулки с хозяином - это не про меня. А вот красиво лежать на диване - здесь нет мне равных.</p>
</article>
<div></div>
</div>
</section>
Обратите внимание на то, что такой лаконичный и легкий для восприятия HTML-код, нравиться не только верстальщикам и программистам, но и поисковым машинам. Индексировать ваш сайт им будет легко и приятно.
Содержимое CSS3 файла стилей предназначено только для браузеров. Оттуда они узнают, как надо отображать дизайн сайта.
.about{
color:#fff;
background-color: #a87a7a; /* коричневый фон секции "Обо мне" */
text-align:center; /* позиционирование текста */
padding: 5em 0em; /* отступы для текста */
}
.wrap_about{
width: 90%; /* занимаемая ширина блоков по отношению к браузеру */
margin: 0 auto; /* расположение секций по центру */
}
.about h3{
font-size:2em;
padding-bottom: 0.5em; /* отступ снизу для заголовка */
}
.about p{
font-size:1em;
padding-bottom: 4em; /* отступ снизу для параграфа */
}
.grid{
width: 30%; /* ширина белого блока */
float: left; /* выстраивание в ряд трех белых блоков */
background-color: #fff; /* цвет блока */
margin: 0 1.5% 0 1.5%; /* отступы для белых блоков */
border: 1px solid black;
min-height: 508px; /* минимальная высота белых блоков */
}
.grid h4{ /* цвет,размер и верхний отступ для заголовка белого блока */
color: #292828;
font-size: 1.4em;
margin-top: 15px;
}
.grid p { /* значения свойств для параграфа белого блока */
color: #444444;
font-size: 1.02em;
text-align: left;
padding: 1em 1em 2em 1em;
line-height: 1.9em;
}
.clear{clear:both;} /* отмена float */
Посмотреть на готовый результат Вы можете на jsfiddle
Дорогие друзья! Вы наверное согласитесь со мной, что верстать сайт с нуля, увлекательный и творческий процесс. Не говоря о том, что такие умения востребованы на рынке труда и хорошо оплачиваются. Однако, работая в одиночку, вы рано или поздно упретесь в потолок, в плане доходности этого бизнеса. Мой новый курс «Своя Web-студия за 55 дней» поможет Вам открыть успешную Web-студию в разы увеличить Ваш доход, просто повторяя за мной все действия.
Продолжение следует..
-
Создано 02.11.2017 11:52:30
-
Михаил Русаков
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
-
Кнопка:
<a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>Она выглядит вот так:
-
Текстовая ссылка:
<a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>Она выглядит вот так: Как создать свой сайт
- BB-код ссылки для форумов (например, можете поставить её в подписи):
[URL=»https://myrusakov.ru»]Как создать свой сайт[/URL]
Фиксированный шаблон с двумя колонками
Создайте новую папку, назовите ее fix2. Скопируйте в эту папку файлы для фиксированного макета с одной колонкой, который мы делали в прошлом уроке.
Чтобы создать шаблон с двумя колонками нам нужно дописать два блока в контейнере <div></div>
– блок для левой колонки <div></div>
, и блок для контентной части <div></div>
:
<div> <!--Левая колонка--> <div> <div><p>Левая колонка</p></div> </div> <!--Контент--> <div> <div><p>Контент</p></div> </div> </div>
Если вы сохраните изменения в шаблоне и откроете его в браузере, то увидите, что контентная часть находится под левой колонкой. Чтобы сделать ее справа, нам понадобится свойство float
со значением left
. Откройте файл со стилями и допишите это свойство для селектора #leftcol
, а также укажите для него ширину, например, 180px
:
#leftcol { width: 180px; float: left; }
Чтобы содержимое левой колонки не выходило за границы блока <div></div>
, добавим для этого блока свойство overflow
со значением hidden
:
#content { padding-bottom: 50px; overflow: hidden; }
Тоже самое нужно сделать для блока <div></div>
:
#main { overflow: hidden; }
Шаблон готов. Результат работы в браузере можно посмотреть здесь, код CSS для данного шаблона представлен здесь.
Колонка справа
Скопируйте папку fix2, и переименуйте копию в fix2-right. Переименуйте в шаблоне index.html идентификатор leftcol
в rightcol
:
<div> <!--Правая колонка--> <div> <div><p>Правая колонка</p></div> </div> <!--Контент--> <div> <div><p>Контент</p></div> </div> </div>
В файле со стилями для этого блока измените значение у свойства float
с left
на right
:
#rightcol { width: 180px; float: right; }
Результат можно посмотреть здесь, код CSS для данного шаблона представлен здесь.