К вопросу о div’ной верстке. Продолжение.
November 20th, 2007 by Yuriy DrozdovПрошлая статья имела небольшой резонанс, который заключается в ссылке на нее от LifeStyle, а также в нескольких комментариях. Хотел выразить Владимиру благодарность за замечания в комментариях.
Пример 2.
-
.style24 {
-
color: #70c221;
-
font-weight: bold;
-
}
-
-
.style26 {
-
color: #A4A4A4;
-
font-weight: bold;
-
}
В результате выполнения этого куска кода получим сдедующее:
Для одного слова и картинки очень много html кода. Неправда ли? Будем это исправлять.
Картинку сделаем фоновой и вынесем этот код в css, а table поменяем на div. Нужно отметить, что данные блоки не представляют из себя список и они не обязательно будут идти один за другим. Если бы они представляли из себя список, то следуя семантике html необходимо использовать для их представления ненумерованный список ul, а изображение задавать с помощью свойства list-style-image.
-
.online {
-
/* color и font-weight, свойства взятые из .style24 */
-
color: #70c221;
-
background: #fff url('../img/online.gif') no-repeat 0 2px; /* зададим отступ фонового изображения от верхнего края */
-
}
-
-
.offline {
-
/* color и font-weight, свойства взятые из .style26 */
-
color: #A4A4A4;
-
background: #fff url('../img/offline.gif') no-repeat 0 2px; /* зададим отступ фонового изображения от верхнего края */
-
}
-
-
.offline, .online {
-
font-weight: bold;
-
padding-left: 14px; /* делаем отступ, чтобы текст не был поверх изображения, 10 - ширина изображения и 2+2 от cellspacing="2" */
-
margin: 2px; /* компенсируем cellspacing="2" */
-
font: 11px/11px; /* зададим высоту шрифта и высоту строкового блока*/
-
}
Использую объявленные выше css классы, html код будет выглядеть следующим образом:
Если таких блоков на странице будет несколько, то уменьшение веса страницы сразу будет заметно.
Пример 3
-
<table border="1" cellpadding="10">
-
<caption>New Vectra Sedan</caption>
-
<th rowspan="2">Наименование</th>
-
<th colspan="3">Двигатель</th>
-
</tr>
-
<th>Z1,6 XEP</th>
-
<th>Z1,8 XER</th>
-
<th>Z 2,2 SE</th>
-
</tr>
-
<th>Мощность двигателя, л.с.</th>
-
<td>105</td>
-
<td>140</td>
-
<td>147</td>
-
</tr>
-
<th>Уровень комплектации</th>
-
<td>Essentia</td>
-
<td>Essentia</td>
-
<td>Elegance II </td>
-
</tr>
-
<th>Коробка передач </th>
-
<td colspan="3">механическая / автоматическая</td>
-
</tr>
-
<th>ABS</th>
-
<td>+</td>
-
<td>+</td>
-
<td>+</td>
-
</tr>
-
</table>
Данный код выведет следующее:
Что хотелось бы поменять в данном коде? Ничего. Все сверстано в соответствии со спецификацией. Нет никаких причин верстать табличные данные не таблицой.
Вы не согласны?
:) Эта статья уже посерьезнее будет предыдущей, но все какие-то у тебя примеры элементарные… Ну мож оно так и лучше, от простого к сложному… Мож и в правду кому такое пригодится.
2 пример, как на меня расходится с семантикой. Такие вещи надо верстать через с указанием list-style для того, чтобы вместо точки отображалась нужная картинка.
Блог повырезал хтмл теги. Суть в том, что нужно верстать списками, а не блоками. Я бы верстал такую картинку списком, особенно, если внизу были бы еще другие пункты.
это не список, чтобы его верстать списком.
Тогда, ИМХО, это следовало явно указать. Или, например, прокомментировать, что делать с этим, в случае, если это список.
сейчас поправим, спасибо
Спасибо за исправление.
Будем поправлять спасибо!!!
Хочу заметить еще такой факт, что если ты сделаешь фоновые буллеты покрупнее, то ты тут же столкнешся с проблемой вертикального выравнивания. Потому, кстати, зачастую такие вещи делают таблицей!
Потому что так проще, и выравнивание поддерживается на уровне табличных тегов без всяких плясок с бубнами в CSS. Так что думаю надо прилепить перекрестную ссылку на твою статью по вертикальному выравниванию, а так же указать о потенциальной проблеме прямо в статье.
Применимо к данному примеру, там особых танцев не будет
Хорошая идея, так и сделаю.