Иконки с текстом

[vesta2v]

Прошу помочь, я начинаю учить верстку div, скажите как правильно реализовать одну вещь:

необходимо сделать ссылкой

изображение текст изображение текст

#toplist li

{

display: inline;

list-style-type: none;

padding-right: 50px;

}

————————————--

<ul id="toplist">

<li><a href="#"><img src="images/home.jpg"> Домой</a></li>

<li><a href="#"><img src="images/cont.jpg"> Контакты</a></li>

</ul>

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

Зараннее спасибо.

[s0rr0w]

Прошу помочь, я начинаю учить верстку div, скажите как правильно реализовать одну вещь:

Картинку приведите с тем, что надо получить.

[SelenIT]

Имхо, лучше так:

#toplist li
{
float: left; /* вместо этого можно использовать display: inline-block или display: table, но менее кроссбраузерно */
list-style-type: none;
padding-right: 50px;
}
#toplist li a {
float: left;
padding-left: 20px; /* ширина иконки с отступом */
}
#toplist li a.home { background: url(images/home.jpg) 0 50% no-repeat; }
#toplist li a.cont { background: url(images/cont.jpg) 0 50% no-repeat; }
————————————--
<ul id="toplist">
<li><a href="#" class="home">Домой</a></li>
<li><a href="#" class="cont">Контакты</a></li>
</ul>

Это ж не иллюстрация, а элемент оформления ссылки — ему место в CSS...

[Justnewone]

"три веселых картинки" домик, конвертик и загагулинка - вполне себе самодостаточны, надо ли дублировать текстом? Не круче ли будет убрать текст в альты картинок, а то масло-масленное, на мой взгляд.

[s0rr0w]

"три веселых картинки" домик, конвертик и загагулинка - вполне себе самодостаточны, надо ли дублировать текстом? Не круче ли будет убрать текст в альты картинок, а то масло-масленное, на мой взгляд.

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