Список определений. Требуем невозможного.

Рассмотрим примеры использования списка определений в случаях, когда кажется, что <dl> применить невозможно.

Заметка

Кто ищет в работе путей попроще, лучше пропустить этот материал. Тут я как сторонник логически правильной разметки буду себе ставить «странные» задачи и решать их.

Наименование и значение одной строкой

Требования:

• сверстать с помощью dl, где наименование — это dt, a значение dd
• наименование и значение могут иметь любую ширину
• каждая следующая пара наименование-значение начинаются с новой строки

<dl>
	<dt>Год выхода:</dt>
	<dd>1998</dd>
	<dt>Жанр:</dt>
	<dd>ужасы, боевик, триллер, фэнтези</dd>
	<dt>Режиссер:</dt>
	<dd>Джон Карпентер</dd>
	<dt>В ролях:</dt>
	<dd>Джеймс Вудс, Дэниэл Болдуин, Шерил Ли, Томас Йен Гриффит, Максимилиан Шелл, Тим Джини, Марк Бун Джуниор, Грегори Сьерра</dd>
</dl>

Задача ясна, HTML код есть, колдуем в стилях:

dt,
dd {
	display: inline;
}
dd:after { /* вставялем после каждого dd контент со свойтвом block, чтобы сработал перенос строки */
	content: " ";
	display: block;
}
dd { /* для ie6-7 используем expression */
	//z-index: expression(runtimeStyle.zIndex = 1, this.innerHTML = this.innerHTML+"
"); /* для большей наглядности тут можно вставить <br/> */
}

Демо пример. Проверено в:

• IE 6-7
• Firefox 3
• Opera 9.5-10.5
• Safari 4
• Chrome 4

Update 28.05.10 by Павел Сорокин: есть вариант проще — без хаков и expression:

dt {
    float: left;
    margin-right: 5px;
}

Вроде после такого списка даже поток очищать не понадобится. А если понадобится, можно воспользоваться clearfix.

Недостаток

Если dd будут пустыми, тогда dt выстроятся в одну строку. Т.е. при таком решении нужна увернность, что и dt, и dd будут заполнены.

Колонки анонсов новостей

Обыденная задача для верстальщика:

Задача становится не такой скучной, если попробовать ее сверстать семантически — через список определений, где дата будет тегом <dt>, а текст <dd>. Т.е.

<dl>
	<dt>18 мая 2010</dt>
	<dd><a href="#">«Мастера связи» МГТС</a></dd>
	<dt>13 мая 2010</dt>
	<dd><a href="#">МГТС ввела в эксплуатацию новую биллинговую систему FORIS Fix от СИТРОНИКС</a></dd>
	<dt>11 мая 2010</dt>
	<dd><a href="#">ОАО МГТС на Связь-Экспокомм-2010</a></dd>
</dl>

Через некоторое время пришел к такому решению:

dt {
	width: 200px; /* ширина колонки */
	float: left;
}
dd {
	width: 200px; /* ширина колонки */
	float: left;
	margin-top: 20px; /* высота блока с датой + отступ между датой и текстом */
	margin-right: 50px; /* расстояние между колонками */
	margin-left: -200px; /* ширина колонки */
}

Демо пример. Проверено в:

• IE 6-7
• Firefox 3
• Opera 9.5-10.5
• Safari 4
• Chrome 4

Вывод

Еще раз убедился в почти безграничных возможностях CSS.