»Статьи - Веб-Дизайн - Вёрстка на div'ах. Как обойтись без float »https://artwedis.com/page.php?id=245 |
Автор: Отправлено: 03.11.2008 21:13 |
Существует много разных способов css разметки. Некоторые базируются на абсолютном позиционировании, другие используют float'ы. Первый метод плохо поддерживает "резиновость" макета, тогда как второй это неплохой способ разметки. Но, как и многие мощные инструменты, float'ы имеют свои изъяны. Для начала, верстка на основе float'ов не такая простая к пониманию, а также float'ы есть источником многих багов (в основном в ИЕ), что делает их не идеальным вариантом в погоне за кроссбраузерностью. Итак, речь далее пойдет о семантически корректном методе верстки. Начнем с обычной разметки (основанной на div'ах) <div id="wp"> <div id="hd">Header</div> <div id="bd">Body <div id="doc"> <div id="s1">Section 1</div> <div id="s2">Section 2</div> <div id="s3">Section 3</div> </div> </div> <div id="ft">Footer</div> </div> Но div'ы не могут отобразить структуру документа, для этого семантически более подходят списки, потому как они, в отличие от div'ов передают иерархию и связи, которые присутствуют между элементами. <ol id="wp"> <li id="hd">Header</li> <li id="bd">Body <ol id="doc"> <li id="s1">Section 1</li> <li id="s2">Section 2</li> <li id="s3">Section 3</li> </ol> </li> <li id="ft">Footer</li> </ol> Использование CSS стилей Для "хороших" браузеров, все достаточно прозрачно. * {margin:0;padding:0;} #wp {width:55em;margin:0 auto;list-style-type:none;} #bd {display:table;} #doc {display:table-row;} #s1,#s2,#s3 {display:table-cell;} Стили для IE В IE LI имеют значение display равным inline-block, поэтому: 1. Для IE Win используем {display: inline; zoom: 1}. "zoom:1" используется для того чтобы елементы имели hasLayout-свойство. (читайте наличие layout или на хабре Изучаем наличие layout) 2. Для IE Mac - {display:inline-block;float:left;} Так же нам понадобятся еще несколько дополнительных правил: vertical-align чтобы контент в LI прижимался к верху, а не к низу width для каждого из LI #s1,#s2,#s3,{display:inline;zoom:1;vertical-align:top;} #s1 {width:12em;} #s2 {width:29em;} #s3 {width:14em;} /*\*//*/ #s1,#s2,#s3 {display:inline-block;float:left;} #ft {clear:left;} /**/ Css-правила выше используют некоторые хаки, а именно: IE (IE 7 и IE Mac включительно) не игнорирует правила, в которых запятая предшествует блоку объявлений IE5 Mac фильтр используется, чтобы только IE Mac видел эти правила Так как IE 5.1 имеет баги с математическими рассчетами, то нужно уменьшить ширину первого столбца, поэтому используем условные комментарии с условием "if lt IE 5.5000" <style type="text/css"> /* to avoid columns #3 dropping in IE lt 5.5 */ #s1 {width:11.9em;} </style> По сути на этом все... Далее в статье автор рассказывает как добавить границы, а также указывает на разницу в правилах для фиксированной и резиновой верстки. Метод достаточно интересный, если отбросить поддержку морально устаревших браузеров, таких как IE5.5 и меньше, то правил станет значительно меньше. Этот метод позволяет просто и без забот решить проблему, когда нужно расстянуть float-блок (скорее всего боковой блок), чтобы он был равен главному по высоте (к примеру, если фон нужно расстянуть). |