Синтаксис ul li Как сделать так чтобы и картинка и текст были ссылкой?

Sotnikov · May 14, 2008

Все три картинки и ссылки заключены в синтаксисе ul li ↓

проблема! Как сделать так, чтобы и картинка и текст были ссылкой? Я пробовал абсолютно спозиционировать ссылку тупо по координатам на каждую картинку, но это извращенность. Можно конечно сделать все это дело уже просто ссылками + img, но как правило, чередование более двух связанных между собой слов, является списком.

Можно посмотреть код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
 <head>
<style>
#about { }
 #about ul { height: 7em; margin: 20px 0; }
 #about ul li { list-style: none; float: left; padding-top: 65px; font-size: 14px; width: 32%; _width: 30%; text-align: center; }
 #about ul .item1 { background: url('http://forum.htmlbook.ru/img/avatars/5868.gif') top center no-repeat; }
 #about ul .item2 { background: url('http://forum.htmlbook.ru/img/avatars/5868.gif') top center no-repeat; }
 #about ul .item3 { background: url('http://forum.htmlbook.ru/img/avatars/5868.gif') top center no-repeat; }
</style>
 </head>

 <body>
<div id="about">
 <ul>
 <li class="item1"><a href="">Первая ссылка</a></li>
 <li class="item2">Вторая ссылка</li>
 <li class="item3">Третья ссылка</li>
 </ul>
 </div>
 </body>
</html>

Fu-tai · May 14, 2008

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

Sotnikov · May 14, 2008

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

пробую, видимо что-то не так понял, напишите, как Вы это видите? tha code.

Sotnikov · May 14, 2008

всем спасибо, сделал так, как мне и нужно было! Зря открывал тему, но ответ выложу, если кому интересно.

исходный код теперь такой

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
 <head>
<style>
#about { }
 #about ul { height: 7em; margin: 20px 0; }
 #about ul li { list-style: none; float: left; padding-top: 65px; font-size: 14px; width: 32%; _width: 30%; text-align: center; }
 #about ul a.item1 { background: url('http://forum.htmlbook.ru/img/avatars/5868.gif') top center no-repeat; padding-top: 65px; }
 #about ul .item2 { background: url('http://forum.htmlbook.ru/img/avatars/5868.gif') top center no-repeat; }
 #about ul .item3 { background: url('http://forum.htmlbook.ru/img/avatars/5868.gif') top center no-repeat; }
</style>
 </head>

 <body>
<div id="about">
 <ul>
 <li><a class="item1" href="">Первая ссылка</a></li>
 <li class="item2">Вторая ссылка</li>
 <li class="item3">Третья ссылка</li>
 </ul>
 </div>
 </body>
</html>

Sign In

Синтаксис ul li Как сделать так чтобы и картинка и текст были ссылкой?

Question

Sotnikov

Link to comment

Share on other sites

3 answers to this question

Recommended Posts

Fu-tai

Link to comment

Share on other sites

Sotnikov

Link to comment

Share on other sites

Sotnikov

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information