Студия веб-разработки


Личный кабинет

Имя

Пароль

Запомнить меня


Забыли пароль?
Зарегистрироваться
Существует много разных способов 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-блок (скорее всего боковой блок), чтобы он был равен главному по высоте (к примеру, если фон нужно расстянуть).
Комментарии: (0)   Рейтинг:   Версия для печати
Быстрый переход
  • Услуги
  • Разработка сайтов
  • Дизайн
  • Продвижение
  • Консультация
  • Портфолио
  • Вопросы и ответы
  • Информация
  • Стоимость услуг
  • Сроки выполнения
  • Гарантии
  • Порядок оплаты
  • Порядок работ
  • Разработка сайтов
  • Поддержка и продвижение
  • Дизайн
  • О нас
  • Контакты