Верстки делятся по принципу отображения и по типу:

1) Деление по принципу отображения:

а) Фиксированная (статическая) верстка.
б) Резиновая (тянущаяся) верстка.
в) Адаптивная верстка - .

При заказе на выполнение респонсивной верстки сайта оговаривается, под экраны какой ширины нужно сделать адаптив. Например, разрешение смартфона 320х480 при этом экран смартфона работает в двух режимах - портретная ориентация и альбомная ориентация. Для одних сайтов можно сделать адаптив и для альбомной ориентации и для портретной ориентации. Для других сайтов практичнее сделать адаптив только для альбомной ориентации. Иногда нет практического смысла мельчить контент сайта для портретной ориентации, если сайт можно нормально посмотреть на смартфоне в режиме альбомной ориентации. Тем более большинство людей для просмотров сайтов используют не смартфон, а планшет, т.к. планшет имеет большие размеры и на нем удобнее смотреть сайты. Под что делать адаптив, практичнее определять исходя из дизайна и контента сайта.

Проблема масштабирования в мобильных браузерах

Иногда случается так - Вы сделали адаптивную верстку страниц сайта, но мобильные браузеры (Opera, Mozilla, Яндекс и др.) не обращают ни какого внимания на ваш адаптив, как будто и нет никакого адаптива. Мобильный браузер просто уменьшает масштаб всей веб-страницы, чтобы веб-страница целиком поместилась на экране устройства, в котором вы смотрите сайт.

Исправить возникшую ситуацию можно тем , что в контейнере head, в исходном коде веб-страниц, нужно написать мета тег viewport. Например,

Разберем значение атрибута content
1) width=device-width этим мы показываем, что ширина области просмотра равняется ширине экрана устройства, на котором смотрят наш сайт.
2) initial-scale=1.0 этим мы показываем, что масштаб страницы при загрузке 100% При этом пользователь, просматривая сайт, может сам изменить масштаб.

Иногда на сайтах запрещают пользователю изменять масштаб просматриваемой страницы , т.е. пользователь всегда видит веб-страницу такой, какая она есть, и не может ее сделать крупнее или меньше. Это делается тем, что в значении атрибута content указывают maximum-scale=1.0, minimum-scale=1.0, user-scalable=no Например.

Размер шрифта в мобильных браузерах

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

Есть некоторые решения через CSS, но они помогают не везде и не всегда. Например.

html * {
max-height: 1000000px;
text-size-adjust: none;
}

Чтобы уменьшить самоволие мобильных устройств относительно размера шрифта, каждый используемый шрифт можно подключить как файл. Для лучшей кроссбраузерности, шрифт подключается в нескольких форматах: ttf, woff, svg, eot (для IE8 и меньше). Это относится и к безопасным шрифтам. Файлы шрифтов подключаются правилом @font-face

При этом использование файлов шрифтов, может усилить разность шрифта при отображении на ПК в разных браузерах.

Влад Мержевич

Резиновый макет с тремя колонками, пожалуй, самый гибкий и настраиваемый из существующих макетов. Сочетание процентов и пикселов для указания ширины колонок позволяет делать разные макеты, выбирая их под свои задачи. На рис. 5.17 представлены варианты трёхколоночных макетов, для удобства они пронумерованы.

Рис. 5.17. Трёхколоночные макеты

Здесь символ процентов (%) означает, что ширина колонки задана в процентах от ширины макета, px - ширина колонки указана в пикселах, а знак бесконечности (∞), что колонка занимает оставшееся пространство. Несмотря на обилие разных макетов, принципы их построения остаются одинаковыми и включают два основных способа: позиционирование и плавающие элементы. Также можно воспользоваться таблицами для создания колонок одинаковой высоты.

Использование позиционирования

Для управления положением слоёв относительно родительского элемента необходимо для родителя установить свойство position со значением relative , а дочерним элементам, которые формируют колонки, значение absolute . Структура кода для первых четырёх макетов будет одинаковой и представлена в примере 5.13.

Пример 5.13. Две колонки в пикселах или три в процентах

Три колонки Шапка сайта Колонка 1 Колонка 2 Колонка 3

Здесь колонки пронумерованы по порядку, т.е. колонка 1 располагается слева, колонка 2 по центру, а колонка 3 справа.

У позиционирования есть определённый недостаток, который ограничивает применение этого метода - при добавлении подвала он будет скрыт под колонками. Это связано с тем, что у слоя layout нет высоты как таковой, поэтому он не «толкает» слой с подвалом вниз. Если подвал непременно требуется на странице, следует воспользоваться методом построения колонок, основанным на плавающих элементах. Ещё этот метод не работает в IE6 из-за наличия в нём ошибок.

Для макета № 1, в котором ширина первой колонки резиновая, а остальных фиксирована, стиль будет следующим (пример 5.14).

Пример 5.14. Макет № 1

Header { background: #D5BAE4; } .layout { position: relative; /* Относительное позиционирование */ } .layout DIV { position: absolute; /* Абсолютное позиционирование */ } .col1 { background: #C7E3E4; /* Цвет фона */ left: 0; /* Положение левого края */ right: 300px; /* Положение правого края */ } .col2 { background: #E0D2C7; width: 200px; /* Ширина колонки */ right: 100px; /* Сдвигаем влево на ширину колонки 3 */ } .col3 { background: #ECD5DE; width: 100px; right: 0; }

У колонок с заданной шириной стоит свойство width , а их положение слева или справа задаётся соответственно свойством left или right . Резиновая ширина оставшейся колонки строится после одновременного добавления left и right , значения которых совпадают с шириной фиксированных колонок.

Макеты № 2 (пример 5.15) и № 3 (пример 5.16) построены на том же принципе.

Пример 5.15. Макет № 2

Header { background: #D5BAE4; } .layout { position: relative; } .layout DIV { position: absolute; } .col1 { background: #C7E3E4; width: 100px; } .col2 { background: #E0D2C7; left: 100px; right: 200px;} .col3 { background: #ECD5DE; width: 200px; right: 0; }

Пример 5.16. Макет № 3

Header { background: #D5BAE4; } .layout { position: relative;} .layout DIV { position: absolute; } .col1 { background: #C7E3E4; width: 100px; } .col2 { background: #E0D2C7; width: 200px; left: 100px; } .col3 { background: #ECD5DE; left: 300px; right: 0; }

Макет № 4, в котором ширина всех колонок задана в процентах имеет некоторые нюансы. Если требуется одинаковая ширина всех колонок, её можно задать дробно (33.33%), но браузер Opera не умеет работать с дробными значениями процентов, поэтому в нём между колонками появятся «дыры» (рис. 5.18).

Рис. 5.18. Ширина колонок, заданная в дробных процентах

В подобных ситуациях следует перейти на неравные доли, к примеру, 33%, 34%, 33%, как показано в примере 5.17.

Пример 5.17. Макет № 4

Header { background: #D5BAE4; } .layout { position: relative;} .layout DIV { position: absolute; } .col1 { background: #C7E3E4; width: 33%; } .col2 { background: #E0D2C7; left: 33%; width: 34%; } .col3 { background: #ECD5DE; right: 0; width: 33%; }

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

Оставшиеся макеты, в которых две колонки из трёх резиновые, представляют особую группу, потому что их можно трактовать по-разному. Так, ширина одной колонки указывается в пикселах, другой в процентах от ширины макета, а ширина оставшейся вычисляется автоматически. На рис. 5.19 показаны разные подходы к вычислению ширины колонок на примере макета № 5.

Рис. 5.19. Ширина двух резиновых колонок

В первом варианте ширина первой колонки задана в процентах от ширины макета, ширина второй колонки вычисляется автоматически, а третья колонка имеет фиксированную ширину в пикселах. Во втором варианте колонки меняются между собой, и автоматически вычисляется ширина первой колонки. Третий вариант предполагает, что общая ширина резиновых колонок принимается за 100% и ширина первой и второй колонки вычисляется от неё.

Первый и второй вариант легко реализуется аналогично коду с двумя колонками в пикселах. Только вместо ширины в px указываем %. В примере 5.18 приведён стиль макета № 5 с первой колонкой заданной в процентах.

Пример 5.18. Макет № 5. Ширина второй колонки вычисляемая

Header { background: #D5BAE4; } .layout { position: relative;} .layout DIV { position: absolute; } .col1 { background: #C7E3E4; width: 50%; } .col2 { background: #E0D2C7; left: 50%; right: 200px; } .col3 { background: #ECD5DE; right: 0; width: 200px; }

Стиль макета № 5 с вычисляемой первой колонкой показан в примере 5.19.

Пример 5.19. Макет № 5. Ширина первой колонки вычисляемая

Header { background: #D5BAE4; } .layout { position: relative;} .layout DIV { position: absolute; } .col1 { background: #C7E3E4; left: 0; right: 200px; margin-right: 50%; } .col2 { background: #E0D2C7; width: 50%; right: 200px; } .col3 { background: #ECD5DE; width: 200px; right: 0; }

Первой колонке нельзя задать ограничение справа через свойство right , поскольку значение будет равно 50%+200px, в CSS2 таких вычисляемых значений нет. Поэтому применим фокус - ограничим первый слой справа шириной 200px через right и сдвинем его влево на ширину второй колонки 50% с помощью margin-right . Слой у нас абсолютно позиционированный, поэтому такие махинации никак на ширине не скажутся.

Третий вариант с двумя резиновыми колонками требует наличия дополнительного слоя, назовём его rubber , относительно которого будет задаваться ширина колонок (пример 5.20).

Пример 5.20. Макет № 5. Ширина двух колонок в процентах

Три колонки .header { background: #D5BAE4; } .layout { position: relative;} .layout DIV { position: absolute; } .rubber { left: 0; right: 200px; } .col1 { background: #C7E3E4; width: 60%; } .col2 { background: #E0D2C7; width: 40%; left: 60%; } .col3 { background: #ECD5DE; width: 200px; right: 0; } Шапка сайта Колонка 1 Колонка 2 Колонка 3

Построение макета № 6 аналогично макету № 5, поэтому останавливаться на нём не будем. Что касается макета № 7, то для него существует вариант, который может вызвать трудность. Это касается того случая, когда требуется сделать ширину левой и правой колонки вычисляемыми и равными между собой. Для этого ширину первой и третьей колонки следует сделать равной 50% (рис. 5.20).

Рис. 5.20. Макет № 7 с равными по ширине колонками

Чтобы осталось место под вторую колонку, воспользуемся свойством margin-right для первой колонки и margin-left для третьей. Значением этих свойств будет половина ширины второй колонки. Так, если она равна 200px, то получится margin-right : 100px (пример 5.21).

Пример 5.21. Макет № 7. Ширина резиновых колонок одинакова

Header { background: #D5BAE4; } .layout { position: relative;} .layout DIV { position: absolute; } .col1 { background: #C7E3E4; left: 0; right: 50%; margin-right: 100px; } .col2 { background: #E0D2C7; width: 200px; left: 50%; margin-left: -100px; } .col3 { background: #ECD5DE; left: 50%; right: 0; margin-left: 100px; }

Напрямую свойством width пользоваться нельзя, поскольку добавление margin только увеличит ширину, а не уменьшит, как нам требуется. Поэтому ширина формируется одновременно заданными свойствами left и right . С позиционированием второй колонки возникают сложности в указании значения left или right , поскольку оно будет равно 50%-200px. Так что устанавливаем положение левого края на 50% (left : 50% ), а затем колонку целиком сдвигаем влево на половину её ширины через свойство margin-left (margin-left : -100px ).

Поскольку ширина некоторых колонок вычисляется автоматически, рекомендуется сделать ограничение по минимальной ширине макета, добавив свойство min-width для селектора BODY . Тогда ширина колонок не станет уменьшаться при достижении заданного предела.

BODY { min-width: 800px; /* Минимальная ширина макета */ }

Значение min-width зависит от макета и содержимого страницы и обычно подбирается опытным путём.

Использование плавающих элементов

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

Построение колонок происходит с помощью свойства float в сочетании со свойствами margin и width . В зависимости от выбранного макета меняется и порядок колонок в коде, вначале всегда следуют слои, к которым добавляется float .

Макет № 1. Резиновая первая колонка

Ширина второй и третьей колонки указывается в пикселах, а их положение через свойство float со значением right . Для первой колонки также требуется задать свойство margin-right со значением равным суммарной ширине остальных колонок (пример 5.22).

Пример 5.22. Макет № 1

Макет 1 .header, .footer { background: #D5BAE4; } .layout { overflow: hidden; /* Отменяем обтекание */ } .col1 { background: #C7E3E4; /* Цвет фона */ margin-right: 300px; /* Сдвиг влево на ширину колонок 2 и 3 */ } .col2 { background: #E0D2C7; width: 200px; float: right; /* Обтекание слева */ } .col3 { background: #ECD5DE; width: 100px; float: right; /* Обтекание слева */ } Шапка сайта Колонка 3 Колонка 2 Колонка 1 Подвал

Макет № 2. Резиновая средняя колонка

Ширина первой и третьей колонки задана в пикселах, а их положение - через свойство float со значением left для первой колонки и right для третьей. Средняя колонка, чтобы она сохраняла свой вид, содержит универсальное свойство margin , задающее отступ слева и справа (пример 5.23).

Пример 5.23. Макет № 2

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Макет 2 .header, .footer { background: #D5BAE4; } .layout { overflow: hidden; } .col1 { background: #C7E3E4; float: left; width: 200px; } .col2 { background: #E0D2C7; margin: 0 100px 0 200px; /* Отступ справа и слева */ } .col3 { background: #ECD5DE; width: 100px; float: right; } Шапка сайта Колонка 1 Колонка 3 Колонка 2 Подвал

Макет № 3. Резиновая третья колонка

Положение первой и второй колонки указывается через свойство float со значением left , для третьей колонки нужно установить отступ слева (margin-left ) на суммарную ширину остальных колонок (пример 5.24).

Пример 5.24. Макет № 3

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Макет 3 .header, .footer { background: #D5BAE4; } .layout { overflow: hidden; } .col1 { background: #C7E3E4; float: left; width: 100px; } .col2 { background: #E0D2C7; float: left; width: 200px; } .col3 { background: #ECD5DE; margin-left: 300px; /* Отступ слева на ширину колонок 1 и 2 */ } Шапка сайта Колонка 1 Колонка 2 Колонка 3 Подвал

Макет № 4. Ширина всех колонок задана в процентах

Для построения этого макета подойдёт множество вариантов, основанных на предыдущих макетах, только вместо пикселов следует указать проценты. Ещё один способ показан в примере 5.25, где используется только свойство float и width .

Пример 5.25. Макет № 4

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Макет 4 .header, .footer { background: #D5BAE4; } .layout { overflow: hidden; } .layout DIV { float: left; } .col1 { background: #C7E3E4; width: 20%; } .col2 { background: #E0D2C7; width: 60%; } .col3 { background: #ECD5DE; width: 20%; } Шапка сайта Колонка 1 Колонка 2 Колонка 3 Подвал

Макет № 5. Ширина двух колонок резиновая

На рис. 5.19 было продемонстрировано, что макет № 5, у которого две резиновые колонки, можно трактовать по-разному.

Ширина первой колонки указана в процентах от ширины макета, третьей колонки в пикселах, а средняя колонка занимает оставшееся место.

Ширина второй колонки указана в процентах от ширины макета, третьей колонки в пикселах, а первая колонка занимает оставшееся место.

Суммарная ширина двух резиновых колонок принимается за 100%, и ширина колонок указывается в процентах от этой величины.

Ширина средней колонки вычисляемая

Здесь ширина первой колонки указывается в процентах, а её положение через свойство float со значением left , для третьей колонки ширина задана в пикселах, а значение свойства float как right . Для средней колонки остаётся только установить отступы слева и справа на ширину колонок (пример 5.26).

Пример 5.26. Макет 5.1

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Макет 5.1 .header, .footer { background: #D5BAE4; } .layout { overflow: hidden; } .col1 { background: #C7E3E4; width: 40%; float: left; } .col2 { background: #E0D2C7; margin: 0 200px 0 40%; } .col3 { background: #ECD5DE; width: 200px; float: right; } Шапка сайта Колонка 1 Колонка 3 Колонка 2 Подвал

Ширина первой колонки вычисляемая

Это наиболее хитрый макет, поскольку для первой колонки её ширина напрямую не указывается. Но чтобы ограничить контент необходимо для свойства margin-right указать значение совмещающее проценты и пикселы. В CSS2, как уже говорилось, подобное задать нельзя, поэтому добавим внутрь слоя col1 ещё один слой с именем wrap и добавим отступ каждому из этих слоёв. Одному в процентах, другому в пикселах (пример 5.27).

Пример 5.27. Макет 5.2

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Макет 5.2 .header, .footer { background: #D5BAE4; } .layout { overflow: hidden; } .col1 { margin-right: 40%; } .col1 .wrap { margin-right: 200px; background: #C7E3E4; } .col2 { background: #E0D2C7; width: 40%; float: right; } .col3 { background: #ECD5DE; width: 200px; float: right; } Шапка сайта Колонка 3 Колонка 2 Колонка 1 Подвал

Ширина двух колонок в процентах

В этом макете общая ширина резиновых колонок принимается за 100%, поэтому нам потребуется дополнительный слой, относительно которого будет отсчитываться ширина внутренних колонок. Этот слой с именем rubber совместно со слоем col3 работает как двухколоночный макет, а внутренние слои col1 и col2 выстраиваются по горизонтали за счёт применения свойства float (пример 5.28).

Пример 5.28. Макет 5.3

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Макет 5.3 .header, .footer { background: #D5BAE4; } .layout { overflow: hidden; } .rubber { margin-right: 200px; } .col1 { background: #C7E3E4; width: 60%; float: left; } .col2 { background: #E0D2C7; width: 40%; float: left; } .col3 { background: #ECD5DE; width: 200px; float: right; } Шапка сайта Колонка 3 Колонка 2 Колонка 1 Подвал

Макеты 6, 7 и их разновидности строятся по тому же принципу, что и макет № 5, за исключением макета № 7, в котором ширина левой и правой колонки резиновая и равна между собой.

Вначале готовим основу, указываем порядок слоёв в HTML-коде.

Колонка 1 Колонка 3 Колонка 2

Col1 { width: 50%; float: left; } .col2 { width: 200px; float: left; } .col3 { width: 50%; float: right; }

Это ещё не всё, слои пока никаких колонок не формируют и выстраиваются совершенно не подходящим для нас способом. Требуется сместить вторую колонку влево на половину её ширины (margin-left : -100px ) и заставить третью колонку встать на своё место. Для этого надо увеличить её ширину так, чтобы она была равна или больше, чем 50%+100px (половина второй колонки). Лучше всего подойдёт свойство margin-left с отрицательным значением, после этого колонки будут созданы. Есть ещё некоторые нюансы. Крайние колонки состыкованы между собой, что хорошо заметно, когда их высота превышает высоту средней колонки (рис. 5.21).

Рис. 5.21. Состыкованные колонки

К тому же в левой колонке текст справа, а в правой колонке текст слева скрывается под фоном центральной колонки. Это будет не заметно, если высота этой колонки большая, но это не всегда возможно. Чтобы преодолеть указанные недостатки, необходимо вложить внутрь крайних колонок ещё по одному слою (в примере он называется wrap ) и уже для них задать цвет фона колонки, необходимые поля и отступы. Окончательный код приведён в примере 5.29.

Пример 5.29. Макет № 7

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Макет 7 .header, .footer { background: #D5BAE4; } .layout { overflow: hidden; } .col1 { width: 50%; float: left; } .col1 .wrap { background: #C7E3E4; margin-right: 100px; /* Сдвигаем влево на половину ширины колонки 2 */ padding: 10px; /* Поля вокруг текста */ } .col2 { background: #E0D2C7; width: 200px; float: left; margin-left: -100px; } .col3 { width: 50%; float: right; margin-left: -100px; } .col3 .wrap { background: #ECD5DE; margin-left: 100px; /* Сдвигаем вправо на половину ширины колонки 2 */ padding: 10px; } Шапка сайта Колонка 1 Колонка 3 Колонка 2 Подвал

Поля и границы в трёхколоночном макете

В приведённые примеры макетов намеренно не добавлялось свойство padding , поскольку код служит лишь основой макета, и вы сами должны в конкретных случаях решать, нужны поля в колонках или нет. Добавление полей и границ к блочному элементу увеличивает его ширину, что надо учитывать при вёрстке. Однако ширина вырастает, только если для слоя установлено значение width . Рассмотрим несколько примеров, где ширина будет меняться, а где нет.

Div { /* padding влияет на ширину */ width: 200px; padding: 10px; } div { /* padding не влияет на ширину */ position: absolute; left: 20px; right: 20px; padding: 10px; } div { /* padding влияет на ширину */ float: left; width: 50%; padding: 10px; } div { /* padding не влияет на ширину */ margin-right: 50%; padding: 10px; }

В тех колонках, где padding или border требуется, но их добавление приведёт к «ломке» макета, можно воспользоваться вложенным слоем и установить необходимые свойства для него.

Колонка

В этом примере ширина слоя заданная как 200 пикселов меняться не будет, но поля и рамка будут добавлены.

Таблица в качестве колонок

Таблицу удобно использовать для простого и быстрого создания колонок одинаковой высоты. Такая быстрота достигается несколькими вещами. Во-первых, структура кода для любого макета остаётся одинаковой, колонки в коде, как в случае с float , свой порядок никогда не меняют. Во-вторых, ширина ячеек вычисляется автоматически исходя из их содержимого, поэтому достаточно указать ширину нужных колонок, а оставшиеся подстроятся под общую ширину таблицы. В примере 5.30 показан макет № 1 сделанный на таблице.

Пример 5.30. Макет № 1

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Макет 1 .header, .footer { background: #D5BAE4; } .layout { width: 100%; /* Ширина таблицы */ } .layout TD { padding: 5px; /* Поля в ячейках */ vertical-align: top; /* Выравнивание по верхнему краю */ } .col1 { background: #C7E3E4; } .col2 { background: #E0D2C7; width: 200px; } .col3 { background: #ECD5DE; width: 100px; } Шапка сайта

Колонка 1

Колонка 2

Колонка 3

Подвал

Добавление свойства padding к селектору TD отменяет действие атрибута cellpadding тега

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

Макет № 2

Header, .footer { background: #D5BAE4; } .layout { width: 100%;} .layout TD { padding: 5px; vertical-align: top; } .col1 { background: #C7E3E4; width: 100px; } .col2 { background: #E0D2C7; } .col3 { background: #ECD5DE; width: 200px; }

Макет № 3

Header, .footer { background: #D5BAE4; } .layout { width: 100%;} .layout TD { padding: 5px; vertical-align: top; } .col1 { background: #C7E3E4; width: 100px; } .col2 { background: #E0D2C7; width: 200px; } .col3 { background: #ECD5DE; }

Макет № 4

Header, .footer { background: #D5BAE4; } .layout { width: 100%;} .layout TD { padding: 5px; vertical-align: top; } .col1 { background: #C7E3E4; width: 33%; } .col2 { background: #E0D2C7; width: 34%; } .col3 { background: #ECD5DE; width: 33%; }

В макете 6.1 ширина первой колонки установлена в пикселах, третьей в процентах, а средняя колонка занимает оставшееся место.

Макет № 6.1

Header, .footer { background: #D5BAE4; } .layout { width: 100%;} .layout TD { padding: 5px; vertical-align: top; } .col1 { background: #C7E3E4; width: 200px; } .col2 { background: #E0D2C7; } .col3 { background: #ECD5DE; width: 40%; }

Остальные макеты с помощью таблицы строятся аналогично, меняется только значение свойства width . Для макета № 7, в котором ширина крайних колонок резиновая и равна между собой имеются некоторые хитрости, так что на нём остановимся подробнее.

Ширина для крайних колонок устанавливается равной 50%, а для средней колонки она задаётся в пикселах. Чтобы все размеры соблюдались к таблице необходимо добавить свойство table-layout со значением fixed .

Layout { width: 100%; table-layout: fixed; } .col1 { width: 50%; } .col2 { width: 200px; } .col3 { width: 50%; }

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

В примере 5.31 приведён полный код макета № 7.

Пример 5.31. Макет № 7

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Макет 7 BODY { margin: 0; background: #6D775B; } .layout { width: 100%; table-layout: fixed; } .layout TD { padding: 7px; vertical-align: top; } .col1 { background: #6D775B; width: 50%; } .col2 { background: #F5E8D0; width: 300px; } .col3 { background: #6D775B; width: 50%; text-align: right; }

Он встал под дерево и ждет, И вдруг граахнул гром. Летит ужасный бармаглот, И пылкает огнем. Раз-два, раз-два! Горит трава, Взы-взы - стрижает меч, Ува! Ува! И голова Барабардает с плеч. Льюис Кэрролл, перевод Дины Орловой, рисунки Джона Тенниела

Результат примера показан на рис. 5.22.

Рис. 5.22. Колонка по центру макета

Ликбез

Резиновой вёрсткой называется вёрстка, при которой сайт масштабируется в зависимости от ширины браузера.

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

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

Самая распространенная проблема резиновой верстки — неудобные для чтения текстовые блоки, слишком сильно растянувшиеся на больших разрешениях. Якоб Нильсен в книге «Веб-дизайн» подробно описывает эту проблему и ее причины: исследования показали, что пользователям тяжело читать тексты, в которых взгляд не охватывает строку целиком. Известный факт, что в газетах ограничивают ширину столбца текста. Бузусловно, это стоит делать и в интернете.

Есть две причины, почему не хотят делать «резину»: эстетическая и технологическая.

Ответ эстетам

Эстетическое «против» заключается в том, что некоторые разработчики считают фиксированную вёрстку более стабильной и потому кажущейся пользователю «родной», «уютной». Но «эмоциональное восприятие» сайта — это не то, на что должны ориентироваться разработчики интерфейсов, зачастую, оно очень субъективно.

Боремся со страхами технологов

Технологическая причина сводится к набору страхов.

Что делать с возникающими пустотами?

Существует достаточно много хорошо свёрстанных резиновых сайтов, на которых эта проблема решена. Интернет-издание «Время-н » растягивают картинки на больших разрешениях. Гугл-картинки используют блоки, перескакивающие со строки на строку при разной ширине браузера.

Как быть с широкими текстовыми блоками?

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

Большинство резиновых сайтов, которые мы помним были сделаны в начале двухтысячных, когда возможностей было не так много, как сейчас. Сайты того времени были «прилеплены» к границам экрана и тянулись лишь за счет центрального столбца. При этом текст, конечно, ужасно растягивался.

Схема сайта с тянущимся центральным и фиксированными боковыми столбцами.
На больших разрешения центральный столбец непропорционально растянут.

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

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

Что делать с изображениями?

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

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

Схема сайта с обрезающейся графической шапкой .

Исключения из правил

Большинству сайтов резиновость не помешает. Но, всё же, есть варианты, при которых «резина» не нужна. Например, нельзя тянуть таблицы данных — широкие колонки неудобно читать. А если весь сайт состоит из таких таблиц, то имеет смысл сделать его фиксированным.

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

Любая проблема резиновой верстки, о которой когда-либо говорилось — решаема. Мы коснулись этой темы поверхностно, но мы видим перед собой цель создания продукта, максимально-удобного для пользователей. И резиновая верстка — один из инструментов, который мы не хотим бояться использовать.

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

Максим, дело в том, что весь контент сайта (любой страницы) сформирован таким образом, что полностью разъезжается на всю ширину окна браузера, не зависимо от разрешения экрана и абсолютной ширины монитора.

Хотя сам я мало чего понимаю в html-верстке (профиль программера, а не верстальщика), но все же многолетняя совместная работа с верстальщиками не могла не сказаться положительно в плане моих познаний html/css.

Конечно, любой прогер ASP.NET обязан хотя бы владеть основами html/css, иначе ничего путнего с чистого ASP.NET по получиться.

Итак, смотри - вопрос заключается в следущих аспектах:

а) как скомпоновать блоки на сайте так, что б сверху был один горизонтальный header, в центре три вертикальных блока, крайние заданной ширины и прилегающие к краям экрана, средний «резиновый» и размещающийся между крайними блоками. Под всеми этими блоками размещается futer, занимающий, как и header горизонтальное 100% положение.

б) как заставить все блоки находиться в точно заданных позициях не накладываясь друг-на-друга и не съезжая при изменении внутри них контента.

Верстка основана на тегах .

Шапка левый блок правый блок центральная резина Вот имеем 5 блоков div. футер

Скажу, что в табличной верстке такое позиционирование задать проще простого. Одна таблица table, три строки tr и три столбца на каждую td. Верхняя и нижняя строки содержат по одному столбцу, colspan которых установлено в 3. Средняя строка имеет 3 столбца. Ширина таблицы 100%. Вот и имеем резиновую верстку с точно позиционируемыми блоками.

Почему я не использую табличную верстку сейчас объяснять не стану.

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

#header { width: 100%; margin: 0px; text-align: center; background-color:#ff9999; } #right { float: right; width: 200px; margin: 20px 0px 0px 0px; text-align: right; background-color:#99ff99; height: 400px; } #middle { margin: 20px 220px 10px 220px; background-color:#9999ff; height: 400px; text-align: center; } #footer { margin: 0; border: solid 1px Dark; background-color: #dbc1c1; font-size: 10px; text-align: center; clear:both; } #left { background-color:#fdff5e; margin: 20px 0px 0px 0px; width: 200px; float:left; height: 400px; }

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

#header { width: 100%; } #right { float: right; width: 200px; } #middle { margin: 20px 220px 10px 220px; } #footer { clear:both; } #left { width: 200px; float:left; }

Ключевым свойством является float. Благодаря ему мы указываем блоку как позиционировать себя относительно соседнего блока. Соседний считается предыдущий и следующий в html-разметке. Именно в том порядке, в котором мы их указали на странице.

Кстати Макс, попробуй правый и центральный блок поменять местами в разметке. И ты увидишь, что правый блок не приляжет к хедеру, а опустится под центральный.

Я понимаю почему ты не мог так долго совладать с позиционированием – сам долго мучался пока заставил дивы ложиться так, как требуется.

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

А получиться должно следующее.

01.10.2013 01:04 73845

Резиновая верстка сайта (как впрочем и верстка фиксированная) начинается с создания так называемого скелета, или каркаса для дальнейшей разработка. Вообще, html верстка - конструктор. Сначала создается основной контейнер, основа которая в дальнейшем будет отвечать за минимальную и максимальную ширину всего сайта, границ. Если правильно все сделать, то изменив максимальный размер, вы практически без правок кода(а иногда вообще без них) можете увеличить максимальный размер сайта, например, с 1280px на 1360px или 1920px. Не стоит делать бесконечную резину, так как это нечитабельно на больших мониторах. Идеальным вариантом будет html верстка, включающая в себя все основные разрешения экрана, в том числе мобильные, например, резиновая верстка под разрешения экрана от 240px до 1920px.

Есть несколько видов html верстки , которая отличается визуально. Рассмотрим кратко эти виды верстки, прежде чем перейти к практическому построению каркаса:

Визуально отличающиеся виды верстки это: Резиновая верстка, фиксированная верстка, адаптивная верстка. Адаптивная верстка может сочетаться с резиновой версткой.

Особенности каждого вида верстки:
1) Фиксированная верстка - возможность основного контейнера сайта иметь одинаковую ширину независимо от разрешения монитора. Если экран меньше чем фиксированный размер основного контейнера, то появляется боковой скроллинг(прокрутка влево-вправо).

2) Резиновая верстка - возможность основного контейнера сайта растягиваться в ширину от и до указанных минимальных и максимальных размеров. Резиновая верстка может быть без указания минимального (будет не очень прилично смотреться на экранах меньше Npx, статичные объекты могут наплывать друг на друга, если не добавить адаптивности) или максимального размера, тогда она будет расширяться бесконечно (представьте себе, как будет выглядеть статья на разрешении 7000px, практически в одну строчку), поэтому хорошая html верстка всегда имеет разумные пределы. Поэтому, всегда нужно проверять результат верстки на разных разрешениях и в разных браузерах.

3) Адаптивная верстка - возможность как основного контейнера так и любого из элементов сайта подстраиваться под разрешение экрана, позволяя, таким образом, менять размер шрифта, расположение объектов, цвет и все, что только можно пожелать. Причем, делается это динамически, без действия пользователя, например с использованием медиа запросов, позволяющих автоматически определять разрешение монитора, тип устройства (мобильный, смартфон, планшет), и подставлять указанные значения в автоматическом режиме. Это дает большие возможности. Например, при комбинировании резиновой верстки с адаптивной можно настроить отображение сайта, начиная от самых мелких мобильных разрешений, и заканчивая самыми большими мониторами. Адаптивная верстка не затрагивает возможности резиновой или фиксированной, она их дополняет.

Поэтому, оптимальным вариантом на сегодняшний день будет html верстка, изначально построенная как резиновая верстка, например 980px-1920px, модернизированная до 240px с помощью адаптивной верстки. Нужно всегда помнить главное отличие:

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

Также стоит учитывать валидность сайта при верстке . Есть мнение, что уже сегодня валидность влияет на показатели, как минимум, в поисковой системе Google. Поэтому, всегда стоит при создании проекта заглянуть в онлайн валидатор и проверить валидность, и по возможности сделать наличие ошибок минимальным. Обычно проверяется на валидность главная страница сайта. По ней и принято определять валидность сайта. Также стоит сказать о том, что большинство CMS имеют в некоторых местах код, не проходящий валидацию.

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

Теперь перейдем непосредственно к созданию каркаса сайта , в котором используется резиновая верстка:
Сначала нам нужно сделать общий стандарт, как всегда, доктайп, служебные теги, а само содержимое будущего сайта расположить между тегами . Так как цель данного урока не описывать каждый тег и его назначение, а показать на практике метод, вдаваться в описание служебных тегов я не буду, а просто приведу пример стандартного исходного html для любого сайта, в нашем случае html5.

Верстка каркаса

Вот так выглядит начальное тело сайта , даже не имеющее пока каркаса и внутренних блоков. Это просто нужная информация для браузера, онлайн библиотека для восприятия html5, так как он пока еще является лишь рекомендацией, а спецификация пока что html 4.1, хотя вовсю уже идет повсеместное использование html5. Также в служебных тегах присутствуют мета теги, тайтл и подключен файл css стилей для визуального оформления нашего каркаса.

Для того чтобы создать основной каркас , который и будет уменьшаться до 240px и увеличиваться до 1920px , а при разрешении больше чем 1920px выравниваться по центру, нужно разместить контейнер сразу после тега body, и закрыть его перед закрывающим тегом body. Всю остальную начинку уже нужно внедрять внутри него.

Обычно этот контейнер называют похожими именами, типа wrap, wrapper и тд, который обозначает, что это обволакивающий блок, включающий в себя все содержимое основной верстки, блоков, контента. Поэтому не будем изобретать велосипед, а имена классов постараемся использовать общепринятые.
Класс - это своеобразный ник для любого контейнера, который можно один раз прописать, и применять где угодно, неограниченное количество раз.

Например, если вы в стилях css пропишите класс , допустим redblock , и назначите ему фон красного цвета, то любой блок, которому вы присвоите этот класс, будет иметь в качестве фона красный цвет. Присваивается класс очень просто. В кавычках нужному блоку прописывается нужное имя, например redblock или wrapper, или privetvasya. Это абстрактный класс, который вы придумываете сами, как кличку для щенка.
Поэтому, наш обволакивающий контейнер, которому мы решили присвоить класс wrapper, мог бы выглядеть так:

Но, так как мы уверены, что обволакивающий контейнер у нас будет только один на всем сайте, целесообразнее присвоить ему не класс а идентификатор. Отличается идентификатор от класса тем, что класс можно использовать сколько угодно, а идентификатор может быть только один на странице. Идентификатор имеет более приоритетное значение так как он один, к нему можно обратиться конкретно. Это можно сравнить с очередью на вокзале. Все слышали как на жд вокзале объявляют, например, гражданка Кутузова Аделина Матвеевна, пройдите к диспетчеру...

В данном случае обращение к гражданке по ФИО и есть аналог идентификатора в html (еще говорят айди, айдишник, ID). А обращение типа уважаемые пассажиры, отправка поезда..
Будет сравнимо с классом, так как обращение идет ко всем пассажирам, без конкретного обращения.

Наличие идентификатора не запрещает использовать класс, причем одинаковое имя класса и идентификатора(ID) являются разными, и можно к такому блоку обратиться что по классу, что по id.
Например:

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

Каркас готов, теперь согласно правилам html5 , будем использовать семантические теги, облегчающие понимание поисковиками структуры, чтобы главное не осталось незамеченным. Опять же повторюсь, описанием тегов мы в этом уроке не будем загружаться, для этого есть специальный раздел, в котором подробно описаны тэги html , с демонстрацией и возможностью самостоятельно поэкспериментировать.

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

Сайдбары и футер должны находиться в исходном коде ниже чем основная часть, которую нужно выделить тегом article, указывающий поисковику основной контент. Помимо этого будем использовать теги:header, main, article, aside, footer, назначение которых, в первую очередь, показать семантическую значимость и приоритеты в структуре. Поэтому, верстка нашего пока что не резинового макета, после добавления этих тегов будет иметь такой вид:

Html код

Показать код

Верстка каркаса от сайт Шапка Каркас шаблона Для будущего сайта

контент

Левый сайдбар Правый сайдбар Футер

Вот так будет выглядеть наша html заготовка , но для того чтобы визуализировать нашу верстку, нужно применить стили css. Для этого мы подключили наш файл стилей css в head, как и положено. Теперь можем обратиться к каждому блоку.

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

Итак, с html кодом думаю все понятно, это всего лишь будущий безликий каркас, а резиновая верстка достигается путем манипуляции с классами css. Адаптивная верстка имеет те же самые корни, это css. Именно они позволяют сделать верстку живой, реагирующей на размер экрана. Поэтому, дальнейшие действия будут производиться с файлом стилей css.

Мы не будем рассматривать каждую запись, так как это стандарт, присутствующий в каждом файле стилей. Акцентируем внимание только на методе, который позволяет сайдбарам оставаться фиксированными, и при этом центральной части растягиваться от минимальной до максимальной ширины, которую мы установим сами, и она будет в пределах 240px - 1920px.

Теперь прежде чем приступить к обзору css кода (в котором нет ничего лишнего, я оставил только то что нужно для данного урока, плюс для видимости добавил фон для блоков, и минимальную высоту чтобы блоки было видно хорошо), давайте обратим внимание на несколько нюансов:

1) Если внимательно присмотреться, то футер находится за пределами основного контейнера. Это не случайно, так как такое расположение даст возможность прижать футер к низу. Думаю многие видели на сайтах футер который при любом масштабе остается внизу. И многие хотели узнать как это делается. Поэтому я по ходу объясню механизм, после чего все станет ясно.

2) Многие, увидев на сайте растягивающийся на 100% футер и хеадер, и резиновый центр, уже считают это адаптивным дизайном. Это не совсем так, адаптивность - это более широкое понятие и более совершенные трансформации, но в данном уроке это не рассматривается. Тем не менее, резиновая верстка может быть различных видов, в том числе и вышесказанного вида. Поэтому, давайте сразу модернизируем наш шаблон, чтобы в итоге шапка и футер были всегда 100%, но при этом видимая часть содержащегося в них контента была от 240px до 1920px и по центру.
Такой метод я использовал на этом сайте.

3) Поэтому, нужно добавить еще кое-что в нашу верстку, чтобы осуществить задумки, описанные во втором пункте. Итак, для того чтобы наш футер и хеадер были всегда 100% (обычно эти блоки заполняют фоном, изображениями и тд) и при этом их наполнение не выходило дальше 1920px, сделаем следующее:

1) Вынесем над обволакивающим контейнером, прямо перед body
2) Создадим несколько блоков с одинаковым классом, например, я обычно называю его.maxw, поэтому не буду отходить от своих правил. Добавим его в header и footer, и присвоим этот класс нашей основной секции с классом.section. Также добавим условие для старых версий IE, с вызовом набора правил при условии захода с IE < 9 (если такие пользователи еще есть), и специальный метатег meta name =" viewport " для корректного соотношения масштаба на устройствах типа планшет, смартфон, и тд (такие пользователи точно есть).
3) Для того чтобы управлять поведением наших блоков на разрешениях экрана ниже 980px, в самый низ файла стилей добавим правила @media, в которых и пропишем нужные изменения для определенных блоков, в нашем случае для сайдбаров. Заставим их при разрешении экрана ниже 980px перемещаться под контентную часть, и выравниваться по центру.
В результате наша html верстка будет выглядеть так:

Итоговый html код

Показать html код

Верстка каркаса от сайт Шапка Каркас шаблона Для будущего сайта

контент

Левый сайдбар Правый сайдбар Футер

Наш файл стилей будет выглядеть так:

Css код

Показать css код

* { margin: 0; padding: 0; } html { height: 100%; } header, nav, section, main, article, aside, footer { display: block; } body { height: 100%; width: 100%; background: #fefefe; } .maxw { margin: 0 auto; min-width: 240px; max-width: 1920px; } header { min-width: 240px; width: 100%; height: 220px; background: #74C9FF; } #wrapper { position: relative; margin: 0 auto; height: auto !important; height: 100%; /*min-height: 100%; - Нужно для прижатия футера к низу*/ padding: 5px 0; } .section { width: 100%; padding: 0 0 220px; position: relative; } .section:after { content: ""; clear: both; display: table; } .mainwrap { width: 100%; float: left; overflow: hidden; } main { padding: 0 240px 0 240px; min-height: 350px; margin: 0; } article { padding: 0 5px; margin: 0 5px; background: #EAF2F5; min-height: 350px; } #s_left { float: left; width: 240px; margin-left: -100%; left: 0; position: relative; background: #E88139; min-height: 350px; } #s_right { float: left; width: 240px; margin-left: -240px; right: 0; position: relative; background: #E86A3B; min-height: 350px; } footer { margin: -220px auto 0; width: 100%; min-width: 240px; height: 220px; background: #AFBFC6; position: relative; } /* Для отображения на устройствах меньше 980px*/ @media screen and (min-width:240px) and (max-width:479px) { main { padding:10px; } #s_left { padding: 0; margin: 0 auto; float: none; clear: both; left: 0; } #s_right { padding: 0; margin: 0 auto; float: none; clear: both; right: 0; } } @media screen and (min-width:480px) and (max-width:799px) { main { padding:10px; } #s_left { padding: 0; margin: 0 auto; float: none; clear: both; left: 0; } #s_right { padding: 0; margin: 0 auto; float: none; clear: both; right: 0; } } @media screen and (min-width:800px) and (max-width:979px) { main { padding:10px; } #s_left { padding: 0; margin: 0 auto; float: none; clear: both; left: 0; } #s_right { padding: 0; margin: 0 auto; float: none; clear: both; right: 0; } }

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

1) Мы вынесли header за пределы, так как в первом варианте он был внутри обволакивающего контейнера. А обволакивающий контейнер, в свою очередь, был максимум 1920px, как было сказано в самом начале. Это не дало бы возможности сделать header шириной 100%, он бы упирался в родительские 1920px. Поэтому мы убрали у обволакивающего максимальную ширину, и вынесли за его пределы, плюс создали класс.maxw , которому и назначили эти максимум 1920px и выравнивание по центру. Теперь у нас получилось, что 1920px будет у любого блока с классом.maxw. Поэтому, внутрь header и footer мы положили div контейнер с этим классом, благодаря чему все что внутри него будет находится, растянется от 240px до 1920px, и будет выравниваться по центру если разрешение больше чем 1920px. Это можно увидеть, меняя разрешение масштабом, например, ползунком в опере.

2) Футер, прижатый к низу. Это тоже важная особенность верстки. Здесь секрет заключается в следующем:
Сам футер находится за пределами обволакивающего контейнера, а тот, в свою очередь, имеет 100% высоты. Также section, который находится внутри обволакивающего, но сам обволакивает сайдбары и центральную часть, он дает отступ снизу на высоту футера с помощью padding. Это создает пустое место внизу под контентом. Так как высота 100%, а футер находится за пределами блока, он сдвинут за пределы видимости на расстояние равное его высоте. Создавая отступ снизу с помощью padding:0 0 100px мы готовим место для футера, чтобы его сдвинуть на высоту с отрицательным значением. Это даст отступ сверху в обратном порядке, а значит он сдвинется вверх на свою высоту. В итоге мы имеем отступ снизу 100px, футер сдвинутый на 100px ниже экрана, и это постоянная позиция. Когда мы даем футеру команду margin:-100px auto 0 , мы таким образом подымаем его из под низа экрана в созданную полость. В итоге имеем футер прижатый к низу экрана.

3) Резиновая верстка интересует многих, поэтому наш урок посвящен верстке сайта, точнее сказать верстке каркаса сайта, который должен иметь два сайдбара фиксированной ширины, в нашем случае это 240px, но при этом на любом экране от 240px до 1920px наш каркас должен произвольно растягиваться по ширине, причем html верстка должна понимать, что нам нужно только центральную часть растянуть, сайдбар не трогать!

Ну что ж, надо так надо. Верстка готова. Нам осталось разобрать, за счет чего же она себя так ведет?
С обволакивающим контейнером все понятно, но как html верстка удерживает сайдбары, растягивая контентную часть?

Здесь все не так сложно как могло бы показаться на первый взгляд. Верстка css стилей, это тоже верстка, а значит подчиняется определенным правилам верстки стилей сайта.
Важную роль в этом играет отступ слева и справа, который мы прописали для тега article. Если посмотреть html код, то увидим, что есть некий контейнер с id=container, имеющий 100% ширины. Внутри него есть наш article, который имеет внутренние отступы слева и справа, padding:10px 270px. Но ширина для него не указана, а с учетом того, что он имеет display:block(мы указали для html5 элементов, чтобы они перестали быть инлайновыми), он будет на всю ширину, а не имея явной ширины, отступы внутрь будут в пределах контейнера, а не за ними. Благодаря такой комбинации мы имеем id=container, внутри которого article с отступами слева и справа по 270px. Сайдбары у нас по 240px, а по 20 на отступы от центрального article.

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

Закрывается перед левым и правым aside, таким образом они находятся под main, который уже сделал отступы слева и справа по 240px, то есть мы как и в случае с прижатым к низу футером имеем слева и справа пустое место по 240px, а сайдбары сразу под левым сайдбаром, оба. Им просто очень нравится правило по умолчанию находиться в левом верхнем углу. Учитывая что над ними находится , место слева под ним и будет являться следованию правилам. Вот такая она хитрая, эта верстка, а резиновая верстка еще хитрее. Но лекарство от этого есть, и мы как раз его и обсуждаем. Поэтому для нас это просто верстка..

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

Левый блок идет первый, поэтому дадим ему отрицательный отступ на margin-left:-100% , и он обхитрит сам себя, появившись ровно в пустом месте, которое нам приготовил article. Верстка это хорошо, резиновая верстка еще лучше, а готовая верстка, это еще лучше, особенно после долгих сражений. Поэтому контрольный выстрел в нашего оппонента под названием резиновая верстка - это сдвиг правого сайдбара на его же ширину влево. Почему влево?
Да потому что он был справа, не влез на 240px, и его сместило вниз, в левый угол, все по правилам, html тут не виноват, а css тоже с характером. Поэтому margin-left:-240px решит оставшуюся проблемку, сдвинув правый блок ровно в приготовленное пустое место справа от aside.

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

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

Резиновая верстка