Верстка div'ами

Нужно было добавить иконки к ссылкам и я попробовал сверстать это дело дивами. Ох и намучился, это действительно так сложно? Таблицами имхо гораздо проще. Может у кого нибуть есть идеи как просто это сделать на дивах?
Вот исходный кусок html:


<p><a href="http://site.ru/online/"><font style="font-size: 14px; color: rgb(108, 108, 255);">Ссылка 1</font><br />
</a>Игры On Line: EverQuest II, Counter-Strike, Quake 3, Lineage II, World of Warcraft и многие другие</p>
<br />
<p><a href="http://site.ru/"><font style="font-size: 14px; color: rgb(108, 108, 255);">Ссылка 2</font><br />
</a>Фильмы, игры, развлечения</p>
<br />
<p><a href="http://site.ru"><font style="font-size: 14px; color: rgb(108, 108, 255);">Ссылка 3</font><br />
</a>Защита от вирусов и спама</p>
<br />
<p><a href="http://site.com"><font style="font-size: 14px; color: rgb(108, 108, 255);">Ссылка 4</font><br />
</a>Поиск, отзывы, форум</p>

У меня получилось вот что:


<div style="position: relative; top: 3px;"><img border="0" align="left" src="images/icons/pic1.gif" alt="Image" /></div>
<div style="padding-left: 40px;">
<p><a href="http://site.ru/online/"><font style="font-size: 14px; color: rgb(108, 108, 255);">Ссылка 1</font><br />
</a>Игры On Line: EverQuest II, Counter-Strike, Quake 3, Lineage II, World of Warcraft и многие другие</p>
</div>
<div style="position: relative; top: 3px;"><img border="0" align="left" src="images/icons/pic2.gif" alt="Image" /></div>
<div style="padding-left: 40px;">
<p><a href="http://site.ru/"><font style="font-size: 14px; color: rgb(108, 108, 255);">Ссылка 2</font><br />
</a>Фильмы, игры, развлечения</p>
</div>
<div style="position: relative; top: 0px;"><img border="0" align="left" src="images/icons/pic3.gif" alt="Image" /></div>
<div style="padding-left: 40px;">
<p><a href="http://site.ru"><font style="font-size: 14px; color: rgb(108, 108, 255);">Ссылка 3</font><br />
</a>Защита от вирусов и спама</p>
</div>
<div style="position: relative; top: 3px;"><img border="0" align="left" src="images/icons/pic4.gif" alt="Image" /></div>
<div style="padding-left: 40px;">
<p><a href="http://site.com"><font style="font-size: 14px; color: rgb(108, 108, 255);">Ссылка 4</font><br />
</a>Поиск, отзывы, форум</p>
</div>

Жесть какая-то. Для того чтобы добавить иконки к ссылкам, не нужны ни div'ы, ни таблицы.
Есть два варианта.
Вариант 1

<p class="with-ico"><a href="http://site.ru/online/">Ссылка 1</a> Игры On Line: EverQuest II, Counter-Strike, Quake 3, Lineage II, World of Warcraft и многие другие</p>

С помощью css-делается отступ (padding) у параграфа (p), с помощью свойства background задаем фоновую картинку - иконку.

Вариант 2

<p class="with-ico"><a href="http://site.ru/online/"><img class="ico" src="/img/ico/link1.gif" alt="" title="Ссылка 1"> Ссылка 1</a> Игры On Line: EverQuest II, Counter-Strike, Quake 3, Lineage II, World of Warcraft и многие другие</p>

Ессли ссылки подчеркнутые, то надо будет сделать две ссылки - в одну завернуть IMG (указав для A свойство text-decoration: none), во вторую - текст.

Что это за ужас? (про код автора)

Если все делать правильно, то должно получиться как-то так:

<ul>

<li class="somelink">

<dl>

<dt><a href="http://site1">Ссылка 1</a></dt>

<dd>Игры On Line: EverQuest II, Counter-Strike, Quake 3, Lineage II, World of Warcraft и многие другие</dd>

</dl>

</li>

<li class="otherlink">

<dl>

<dt><a href="http://site2">Ссылка 2</a></dt>

<dd>Фильмы, игры, развлечения</dd>

</dl>

</li>

</ul>

и соответствующий css (приводить не буду - это домашнее задание)
Неужели так сложно?

Цитата ("Sir_Michael"):

Если все делать правильно, то должно получиться как-то так:

...

А зачем вложенные списки?
Если уж dl/dt/dd использовать, то я бы так сделал:

<dl>

<dt><a href="http://site1">Ссылка 1</a></dt>

<dd>Игры On Line: EverQuest II, Counter-Strike, Quake 3, Lineage II, World of Warcraft и многие другие</dd>


<dt><a href="http://site2">Ссылка 2</a></dt>

<dd>Фильмы, игры, развлечения</dd>

</dl>

sukebe
Семантика (dl список чаще используют для одиночных определений) и экстраразметка (те же иконки) - вариант "bulletproof" переживет возможный редизайн.
Можно также представить элементы как заголовки типа <h2> и <p> (<div...><h2>...</h2><p>...</p></div> или выделять в списке заголовок с <em> или <strong>, но я предпочитаю в таком варианте чуть более сложный, но развернутый <li> -> <dl>

Поправил пост немного.

Sir_Michael, позволю себе не согласиться - на то он и Definition List, чтобы определений было несколько. А для иконок будет достаточно добавить классы к dt.

А вообще, я сторонник того, чтобы иконки вставлять с помощью img. Особенно в тех случаях, когда рядом идет текст. Если делать иконки с помощью background'а, то приходится задавать для A display: block, это вызывает в свою очередь необходимость в использовании float: left, а тут начинаются проблемы с выравниванием текста (можно решить с помощью тюнинга line-height). В общем, овчинка выделки не стоит (на мой взгляд). Да и семантика от использования IMG в данном случае не страдает, скорее даже наоборот.

Насчет использования комбинации H2/P в данном случае - категорически не согласен. Совсем не увязывается с контентом.

sukebe, в вашем коде №2 вы задаете класс тегу img... ИЕ этого не понимает, так что display:block; в таком варианте предпочтительный, т.к. будет кроссбраузерно
grunger, не надо пытаться верстать дивами так, как таблицами Посмотрите работы профессиональных верстальщиков. Дивы значительно укорачивают код, а у вас - только удлиняют...

Цитата:

на то он и Definition List, чтобы определений было несколько.

Я основываюсь на спецификации xoxo с microformats.org

Цитата:

чтобы иконки вставлять с помощью img

Я предполагаю так - если это лишь оформление, иконки, то соответственно в background.
Если это как превью новости, то img. То есть в разместке с dl было бы так:

<li><a href="#"><img ... /></a>

<dl>

<dt><a href="#">Title</a></dt>

<dd><a href="#">Description</a></dd>

</dl>

</li>

Цитата:

Насчет использования комбинации H2/P в данном случае - категорически не согласен. Совсем не увязывается с контентом.

В списке ссылок - да, не увязывается.

Komarova
Цитата:

в вашем коде №2 вы задаете класс тегу img... ИЕ этого не понимает

Как это


А с версткой горизонтальных списков как-то особых проблем нет, сотню раз все разжевано...

Спасибо всем

Цитата ("Komarova"):

sukebe, в вашем коде №2 вы задаете класс тегу img... ИЕ этого не понимает, так что display:block; в таком варианте предпочтительный, т.к. будет кроссбраузерно

Да нет, IE прекрасно понимает классы для любых элементов. Тут другая проблема есть.

<a href="/dfd/"><img src="/img/ico_1.gif" alt=""> Нажми на кнопку, получишь результат</a>

css:

a {text-decoration: underline;}

a img {text-decoration: none;}

То ли в IE, то ли в FF (все время забываю, но это и не важно ) картинка будет подчеркнутой. Из-за этого (если хочется подчеркнуть ссылку), придется делать два элемента A.

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

Должно пригодиться ссылка

Html

<ul>

   <li>

<a href="#">Links</a>

text text text text text

  </li>

   <li>

<a href="#">Links</a>

text text text text text

  </li>

   <li>

<a href="#">Links</a>

text text text text text

  </li>

</ul>

CSS

ul li{

   padding:10px 0;

  width:130px;

}

ul li a{

   display:block;

   padding-left:15px;

   background:url(../images/icon.gif) no-repeat 0 3px;

   height:30px;

}

Будут вопросы задавай.
И скинь диз...

Если картинка вставляется как IMG, то в стилях поиграйся со свойством vertical-align. С большой вероятностью подойдет вот такой вариант:

img {vertical-align: middle;}

. И вставляй ее как инлайн-элемент (т.е. без float и без display: block).

Цитата ("Duck_kun"):

Должно пригодиться ]http://htmlbook.ru/css/list-style-image.html

Спасибо. Очень помогло. Интересно, а положением маркера-картинки как то можно управлять? К примеру выровнять ее по вертикали. Как я понял по умолчанию центр картинки выравнивается по верхней границе строки. В свойствах list такого не нашел

Цитата:

положением маркера-картинки как то можно управлять?

Использовать вместо list-style-image - background, о чем написали выше и sukebe и ITeshnik.
ul {list-style:none} разумеется.

Цитата ("Sir_Michael"):

ul {list-style:none} разумеется.

Ну да, немного забыл...

Это самый оптимальный вариант т.к. в этой строчке

background:url(../images/icon.gif) no-repeat 0 3px;

Можно регулировать положение бг координатами X и Y

background:url(../images/icon.gif) no-repeat Х  Y;

Цитата ("ITeshnik"):

Цитата ("Sir_Michael"):

ul {list-style:none} разумеется.

Ну да, немного забыл...

Это самый оптимальный вариант т.к. в этой строчке

background:url(../images/icon.gif) no-repeat 0 3px;

Можно регулировать положение бг координатами X и Y

background:url(../images/icon.gif) no-repeat Х  Y;

А вы сами проверяли свой вариант?) Там картинка налазит на ссылку. А насчет координат, как раз таки при попытке поднять картинку повыше, чтобы выровнять по ссылке, она обрезается границей блока Пробовал поиграться vertical-align - безуспешно.

Цитата ("grunger"):

А вы сами проверяли свой вариант?) Там картинка налазит на ссылку. А насчет координат, как раз таки при попытке поднять картинку повыше, чтобы выровнять по ссылке, она обрезается границей блока Пробовал поиграться vertical-align - безуспешно.

А самому не судьба подумать? Если картинка перекрывается текстом, то нужно задать padding или text-indent, если картинка обрезается, то нужно работать со свойствами height или line-height. С vertical-align надо играться, если картинка вставляется как img, а не как маркер или фоновое изображение.