ТвойWeb :: Версия для печати :: Головоломка для чайника

1. Malcolm - 13 Сентября, 2006 - 23:14:52 - перейти к сообщению

Стоит следующая задача. Воспроизвести следующее с помощью CSS:

Нажмите для увеличения

Код (менять нельзя):

CODE:

<body>
<ul>
<li>текст1</li>
<li>текст2</li>
<li>текст3 текст3 текст3 текст3 текст3 текст3 текст3 текст3</li>
<li>текст4</li>
</ul>
</body>

Сама стрелочка для желающих попробывать:

Дополнительные условия:

CODE:

li {
padding-left: 10px;
list-style-type: none;
background: url(arrow.gif) no-repeat left;
}

- признан знающими людьми семантически неверным.

CODE:

ul {
list-style: none outside url(arrow.gif);
}
li {
width: 100%;
vertical-align: middle;
}

- работает в IE, не работает во всех остальных. Видимо чего-то не хватает или не верно в принципе.

Никто не желает поразвлечься?

2. Ray Wen - 14 Сентября, 2006 - 02:14:39 - перейти к сообщению

CODE:

ul {
list-style:none;
padding:0;
margin:0;
}
li {
display:block;
padding-left:16px;
background: url(arrow.gif) 0 50% no-repeat;
}

3. Malcolm - 14 Сентября, 2006 - 06:03:17 - перейти к сообщению

Ray Wen
Можно ли тоже самое сделать не используя background? Логичнее вид маркера задать непосредственно в list-style?

4. Ray Wen - 14 Сентября, 2006 - 06:44:44 - перейти к сообщению

Malcolm
Не логичнее... Улыбка

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

5. Malcolm - 14 Сентября, 2006 - 06:57:35 - перейти к сообщению

Ray Wen
Вот и я так думаю. Мне, собственно, это ни к чему, просто в одном из форумов наткнулся на такое "задание для начинающих" без ответа. Вот и проснулся спортивный интерес.