[X] Помощник

[Dengere_Ash Topic Starter]

0. Предисловие
Буквально 3 минуты назад вычитал в какой-то теме про табличную и блочную верстку, точно фразу не передам, но смысл таков:

Пока одни чуваки верстают дивами, другие чуваки сверстали таблицами и играют в кваку.

Да, для начала действительно трудно понять блочную верстку, особенно с флоатами. Поэтому хочу поделиться с вами способом верстки 2-х, 3-х колоночной верстки без флоатов.
Далее речь пойдет о семантически корректном и кроссбраузерном методе верстки.

1. HTML структура
Начнем с обычной разметки (основанной на 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>

2. Использование CSS стилей

Для браузеров, которые воспринимают 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;
}

3. Стили для IE

Но в отличие от нормальных браузеров, детё Microsoft'a не понимает значение display: table(-row, -cell). Поэтому придется созадавать отдельные стили для него. В IE LI имеют значение display равным inline-block, поэтому:

1. Для IE Win используем {display: inline; zoom: 1}. "zoom:1" используется для того чтобы елементы имели hasLayout-свойство.

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">
#s1 {width:11.9em;}
</style>

4. Заключение
Данный метод позволяет обойтись без флоатов, который вызывает множество трудностей и багов. Сдесь присутствуют преимущества табличной и семантической верстки.

PS: Статья не моя, оригинал лежить здесь.

[yury_mw]

Dengere_Ash,
правильно ли я понял суть подхода?
* поскольку использование таблиц при верстке - это семантически неправильно, а div-ы с флоатами - не кроссбраузерно и требуют использования хаков/ сложно для реализации/ сложно разобраться (нужное подчеркнуть), находим такое решение:
* с помощью CSS объясняем элементам списка (li), что теперь они не элементы списка, а ячейки таблицы и далее верстаем так же как при табличной верстке
(тогда это становится "семантически правильно"/ просто реализуется/ легко разобраться (нужное подчеркнуть))
* браузерам, которые считают подход, описанный в предыдущем пункте, не кроссбраузерным, объясняем, что они не правы с помощью хаков
(тогда наша верстка становится кроссбраузерной)
* можно идти резаться в кваку ;)

[Dengere_Ash Topic Starter]

yury, да, правильно поняли

Но хак используется для IE6, который свойство display поддерживает очень не полностью, и свойство display: table(-row, -cell) он не знает
Про IE5 можно вообще забыть, его сейчас уже практически не используют — так, только истинные маньяки-извращенцы.

Насчет хаков — если хотите, чтобы CSS у вас прошла валидацию, то проше будет для IE6 сделать так:

<!--[if lte IE7]><link rel="stylesheet" type="text/css" href="ie6.css" /><![endif]-->

Тогда файл ie6.css будет читаться только IE версией 7 и ниже...

[facetus]

По-моему описанная здесь идея это извращение

[fatery]

facetus, Извращение - ИЕ с его проблемами. А идея вполне .

[facetus]

IE конечно не шуточки )), но говорить списку, что он таблица как-то не разумно...но в верстке наверное и не такое бывает


offtop_____
Я например делаю мир лучше, когда без спроса устанавливаю firefox на чужие компы

Я так понимаю, что выше 6 ie все таки вполне нормальный?
Вроде бы последний ie уже поддерживает html 5 ?

Замечание модератора: Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней. Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой или обратитесь к любому из модераторов.