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

 

В этой статье я хочу рассказать о преимуществе блочной HTML или XHTML верстки над версткой таблицами и привести конкретные примеры блочной верстки самых распространенных моделей web-страниц.

Недостатки табличной верстки

1. Web-стандарты. Используя табличную верстку невозможно сверстать более или менее серьезный макет, который бы не содержал синтаксических ошибок в коде.
2. Семантика. Таблицы были введены в HTML исключительно для облегчения представления табличной информации (прайс лист и т. д.), но поскольку в спецификации HTML 3.2 не было каких-либо других способов позиционирования элементов на странице, тогдашние web-мастера использовали таблицы для разметки страницы на блоки (меню, шапка, подвал и т. д.).
3. Нелогичность поведения таблиц. Если вы верстали или верстаете таблицами, то наверняка сталкивались с нелогичностью поведения таблиц в сложных макетах и разных браузерах. Это связано с тем, что таблицы не предназначены для верстки и с тем, что большинство браузеров отрисовывают страницы с табличной версткой в кварк режиме, а этот режим у всех браузеров разный.
4. Читабельность кода и редизайн. Вы когда-нибудь пробовали разобраться в коде чужого сайта, сверстанного таблицами — наверное это было нелегко. А внести какие-либо серьезные изменения в дизайн иногда вообще невозможно, легче сверстать все заново.
5. Размер кода. В подавляющем большинстве случаев верстка таблицами значительно увеличивает код страницы по сравнению с блочной версткой.

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

Примеры резиновых блочных версток

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

Сразу отмечу, что для соответствия стандартам и избежания проблем с браузерами семейства Internet Explorer, обязательно использовать правильный DOCTYPE (тег, объявляющий версию и тип языка разметки). Вот несколько примеров:

1. — HTML версии 4.01 переходный.
2. — HTML версии 4.01 строгий.
3. — XHTML версии 1.0 строгий.

Вы можете использовать тот стандарт, который вам подходит. Это не повлияет на качество верстки, а я в своих примерах буду использовать XHTML 1.0.
Буква «Г»

Одна из стандартных схем расположения элементов на странице и самая простая в верстке.

Сразу договоримся, как должны вести себя блоки в этой верстке:

1. Header (шапка). Тянется по горизонтали, но не менее 600 px, высота 150 px.
2. Menu (меню). Тянется по вертикали и всегда такой же высоты, как блок info, ширина 250 px.
3. Info (информация). Тянется по вертикали и горизонтали, но не уже 350 px.

Подготовим XHTML код нашей страницы:

Теперь напишем стили для блоков:

Вот в принципе и все. Но мы столкнулись с несколькими проблемами. Будем решать их последовательно:

1. Браузеры семейства Internet Explorer 6 не понимают свойство CSS min-width, которое задает минимальный размер блочного элемента. Решается это следующим CSS хаком — следует создать еще один контейнер, в который поместить все содержимое тега body, и написать для него следующие стили
— {width: expression(((document.documentElement.clientWidth || document.body.clientWidth) < 600)? "600px" : "100%")}.

2. Блок MENU не тянется по вертикали, занимая все оставшееся пространство, а растягивается контентом. Решить в лоб эту проблему нельзя, но можно создать видимость решения. Для этого следует создать изображение такого же цвета, что и цвет фона меню, и такого же размера по горизонтали. Задать его в качестве фона тега body и заставить размножаться фоновое изображение только по вертикали
— html,body{margin:0; padding:0; background:url(bg-menu.gif); background-repeat:repeat-y}.

Для избежания появления нежелательных отступов между блоками MENU и INFO в браузерах семейства Internet Explorer не задавайте вертикальные размеры этим блокам.
О прелестях CSS