Специальные предложения

Подключись до конца лета и попробуй безлимитный интернет всего за 300 рублей!
Подробнее >>

Приведи друга и получи 500 рублей на счёт!
Подробнее >>

Разместил: Maggot   Дата: 2008-11-03 19:13   Версия для печати
Существует много разных способов css разметки. Некоторые базируются на абсолютном позиционировании, другие используют float'ы. Первый метод плохо поддерживает "резиновость" макета, тогда как второй это неплохой способ разметки. Но, как и многие мощные инструменты, float'ы имеют свои изъяны. Для начала, верстка на основе float'ов не такая простая к пониманию, а также float'ы есть источником многих багов (в основном в ИЕ), что делает их не идеальным вариантом в погоне за кроссбраузерностью. Итак, речь далее пойдет о семантически корректном методе верстки. Начнем с обычной разметки (основанной на div'ах)
Header
Body
Section 1
Section 2
Section 3
Footer
Но div'ы не могут отобразить структуру документа, для этого семантически более подходят списки, потому как они, в отличие от div'ов передают иерархию и связи, которые присутствуют между элементами.
  1. Header
  2. Body
    1. Section 1
    2. Section 2
    3. Section 3
  3. Footer
Использование 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" По сути на этом все... Далее в статье автор рассказывает как добавить границы, а также указывает на разницу в правилах для фиксированной и резиновой верстки. Метод достаточно интересный, если отбросить поддержку морально устаревших браузеров, таких как IE5.5 и меньше, то правил станет значительно меньше. Этот метод позволяет просто и без забот решить проблему, когда нужно расстянуть float-блок (скорее всего боковой блок), чтобы он был равен главному по высоте (к примеру, если фон нужно расстянуть).

На тему


Нет похожих страниц.

Комментарии: (0)   Рейтинг:

© 2009 ДиасПро