Можно ли построить сайт без использования HTML-таблиц?
15.04.2006
Давайте сначала разберёмся с тем, какой макет сайта мы хотим сделать. Он показан на рис. 1
Рис. 1. Макет сайта.
Эту схему я увидел в одной книге, где говорилось, что такой макет сайта принципиально нельзя корректно сверстать с помощью стилей, причём в центральной части должен быть элемент, который должен соприкасаться и с шапкой, и с подвалом (центральная часть - то, что находится между шапкой и подвалом), например, пунктирная линия или хитрый фон.
Давайте попробуем решить задачу последовательно.
Сразу скажу, что элемент, который соприкасается с шапкой и подвалом сделать достаточно просто. Можно, например, задать для блока контентной части с помощью стилей левую границу в виде пунктирной линии.
Гораздо сложнее создать центральные блоки. Действительно, как установить высоту блока меню по высоте контентной части, если высота контента меняется? В CSS невозможно сделать, чтобы высота одного блока была привязана к высоте другого блока.
В Web очень часто встречаются подобные ситуации, когда невозможно добиться необходимого поведения элементов с помощью имеющихся программных средств. Тогда приходится либо упрощать задачу, искать альтернативные решения или эмулировать необходимое поведение объектов.
Упрощение задачи
Мы видим, что все блоки в исходном макете имеют разный фон. Если попробовать решить задачу, то получится так:
|
|
| Вариант 1 | Вариант 2 |
Код варианта 1
<div style="width:100px;height:20px;background-color:#FFCCFF"></div>
<div style="float:left;width:17px;height:100px;background-color:#EBEBEB;border:0px;"></div>
<div style="padding-left:0px;width:80px;height:100px;background-color:#33CCFF;"></div>
<div style="clear:left;width:100px;height:20px;background-color:#CCCCFF"></div>
Код варианта 2
<div style="width:100px;height:20px;background-color:#FFCCFF"></div>
<div style="float:left;width:17px;height:100px;background-color:#EBEBEB;border:0px;"></div>
<div style="padding-left:0px;width:80px;height:80px;background-color:#33CCFF;"></div>
<div style="clear:left;width:100px;height:20px;background-color:#CCCCFF"></div>
Примечание. Для простоты приведены фотографии разметки в IE и Opera.
В принципе, вариант 1 может в ряде случаев подойти. Однако и здесь есть проблемы. Вид блока меню будет разным для этих двух вариантов. Другая проблема - поскольку высота блока контента меняется, то может получиться ситуация, когда содержание блока меню или блока контента расположится поверх блока подвала. (при практической верстке вложенных блоков это имело место быть).
Второе упрощение - сделать фон меню и контента одинаковым и зафиксировать минимально возможную высоту блока меню.
Эмулирование поведения
Если упрощение верстки недопустимо, то остаётся вариант эмулирования необходимого нам поведения разметки.
После практических изысканий...
После определенных усилий заданная в начале статьи верстка получилась, но только для браузера IE. Вариант сайта работал некоторое время в Интернете, однако возникли значительные трудности по расширению сайта. Дело в том, что добавление элементов в полученную структуру происходило на порядок сложнее, чем при использовании таблиц. Поэтому весь проект пришлось оставить как тестовый для дальнейшего изучения возможностей стилей.
Copyright © 2016