Дивная верстка 2.0

[homm]

Интересно как это сделано без перечеркнутых элеменов на практике? Читаем теорию. Ключевое слово: inline-block;

[Vlad]

В некоторых случаях это злоупотребление. Календарь, например, в таблицу вписывается, это же явно табличные данные. Так что если это своего рода эксперимент, чтобы показать что без таблиц прожить можно, то похвально. А как пример из жизни - неудачен.

[homm]

Влад, это и экспериментом можно назвать, но пойдет это на рабочий сайт и цель была другая.

Смотри на HTML того же календаря:

<div id='kino-calendar'>
	<div class='header'><ins>Пн</ins><ins>Вт</ins><ins>Ср</ins><ins>Чт</ins><ins>Пт</ins><ins>Сб</ins><ins>Вс</ins></div>
	<div class='body'>
		<del>25</del><del>26</del><del>27</del><del>28</del><del>29</del><ins>1</ins><ins>2</ins><ins>3</ins><ins>4</ins><ins>5</ins><ins>6</ins><ins>7</ins><ins>8</ins><ins>9</ins><ins>10</ins><ins>11</ins><ins>12</ins><ins>13</ins><a href='#'>14</a><a href='#'>15</a><a href='#'>16</a><a href='#'>17</a><a href='#'>18</a><a href='#'>19</a><a href='#' class='current'>20</a><a href='#'>21</a><ins>22</ins><ins>23</ins>	<ins>24</ins><ins>25</ins><ins>26</ins><ins>27</ins><ins>28</ins><ins>29</ins><ins>30</ins><ins>31</ins><del>1</del><del>2</del><del>3</del><del>4</del><del>5</del><del>6</del>
	</div>
</div>

Видишь, части которые не относятся к месяцу являются дэлами, они здесь лишние. Части которые нельзя кликнуть инсами, они просто дают информацию, части которые можно выбрать — ссылками. Это все логическая разметка. И тут появляются какие-то группы в виде <tr></tr>. Зачем? Они не связаны с логикой, это чистое представление, потому оно вынесено в css — по 7 элементов в строке. Если бы это была таблица свойст машинной техники, был бы другой разговор. Там первая ячейка в строке название свойства, вторая — значение. Одна строчка — одно свойства. Логика сохраняется. Здесь уже не так сильно.

На самом деле я бы больше хотел прокомментировать рассписание сеансов внизу. Казалось бы, нужна 100% таблица. Мне так тоже казалось, пока я не попробывал реализовать «Добавить время сеанса ↓» и «Добавить день сеанса →». Одно мучение. Переделка этой таблицы на дивы помогла не только сохранить 30-40% ненужных тегов и кода (это фигня, это же админка), но и перегруппировать так, что теперь уже столцы идет один за другим слева на право, а не строки сверху вниз. как в обычных таблицах. После добавления новых столбцов появляется скролл не на страницы, а внутри одного конкретного зала, чтобы время сеанса вседа было на экране. Короче таблицы иногда сосут даже для прелдоствления табличных данных. И второй фаерфокс сосет, с ним больше всего хлопот от использования inline-block, потому что нужно использовать display: -moz-inline-stack, а он ведет себя, мягко говоря, чуть иначе.

[Vlad]

Этот подход уже ближе к XML со своими собственными тегами и данными. За этим подходом будущее, однозначно. Но не соглашусь, что уже сейчас надо на него переходить с корявым рендером браузеров. Таблицы в качестве представления табличных данных и универсальнее и удобнее.

[SelenIT]

Смело, но спорно.

Насчет табличной/списочной природы календаря я согласен с аргументом, что вертикальная группировка по дням недели в нем значима (не только представление). Хотя, конечно, от ситуации/задачи зависит, для программы киносеансов, пожалуй, это и неважно.

Насчет ins-ов и del-ов... Занятно, что del-ы для "клеток" соседних месяцев мне по первому впечатлению дико понравились, то ins-ы для пустых дней текущего месяца вызвали отторжение: разве мы тут что-то вставляем? Последовательность дней ведь не поддается правке, это объективная данность. Не лучше ли (по семантике) было бы тут, к примеру, использовать консервативные span-ы, обернув дни каждого м-ца в свой спец. контейнер? А если бы все браузеры поддерживали CSS Counters - тогда можно было бы и числа вручную не проставлять...

Вот насчет добавления столбца в HTML-таблицу - это да, морока (если без визуального редактора либо автоматической генерации).

И про FF2 согласен полностью (хорошо, его осталось меньше 3% и он уже официально не поддерживается даже самой Мозиллой). Но у display:inline-block есть и другие подводные камни - значимость пробелов между тегами, например...

[s0rr0w]

Короче таблицы иногда сосут даже для прелдоствления табличных данных. И второй фаерфокс сосет, с ним больше всего хлопот от использования inline-block, потому что нужно использовать display: -moz-inline-stack, а он ведет себя, мягко говоря, чуть иначе.

-moz-inline-box используйте и будет вам счастье.

[homm]

-moz-inline-box используйте и будет вам счастье.

По разному пробовал. Счастья не наступило. Наиболее приемлимый вариант всеже -moz-inline-stack