Нумерованные списки @ DeForum.ru

3 Сообщения: 203 Зарегистрирован: 26.08.04

Поискал в интернете - не нашел.

А хочу вот чего, что бы простой нумерованный список:

Код:

<ol>
       <li>Делай раз</li>
       <li>Делай два</li>
       <li>Делай три</li>
</ol>

выглядел не как:
1. Делай раз
2. Делай два
3. Делай три

а так:

1 шаг. Делай раз
2 шаг. Делай два
3 шаг. Делай три

То есть, хочу добавлять к индексу слово "шаг". Возможно ли такое средствами CSS? Ну или хоть как?

P.S.: Хоть что бы в IE работало... (-:

1 Сообщения: 1043 Зарегистрирован: 25.02.05

Низзя. Но можно так:

Код:

<p>
   <br>1 шаг. Делай раз 
   <br>2 шаг. Делай два
   <br>3 шаг. Делай три
</p>

3 Сообщения: 203 Зарегистрирован: 26.08.04

pixeldeception,
Так то, это понятно. Хотелось бы именно через списки...

17 Сообщения: 7419 Зарегистрирован: 15.11.04

RusPutin, htth://css.manual.ru/

почему нельзя?
можно, только дико глупо.
Вот вам неграмотный вариант номер раз :laugh:

Стиль:

Код:

.moy_shag1 { list-style-image:url('shag1.gif') }
.moy_shag2 { list-style-image:url('shag2.gif') }

Хтмл

Код:

<li class='moy_shag1'>do 1</li>
<li class='moy_shag2'>do 2</li> 

Привязываем к Li Заместо точки (цифры) картинку в которой написано "шаг 1" и так далее.

1 Сообщения: 1043 Зарегистрирован: 25.02.05

bE(o0L, Угу, а еще можно гланды через сами знаете что удалять

Акела, 404 Edited: http://css.manual.ru/

3 Сообщения: 203 Зарегистрирован: 26.08.04

bE(o0L,
(-: Это конечно выход.

Акела,
К сожалению, там кроме нескольких свойств ничего путного нет. )-:

pixeldeception[/b], ну если нет другого "пути"… :laugh:

RusPutin, просто прикинь сколько тебе нужно будет попарится если этих "булетов" окажется штук 20 :cool:

а если только для дизайна на три-четыре штучки то можно и без <li> обойтись.

3 Сообщения: 203 Зарегистрирован: 26.08.04

bE(o0L,
Естественно это геморрой. Так вряд ли стоило бы делать. Поэтому и ищу способ через CSS или еще как-то...

Ответ на ваш вопрос, по любому, есть здесь: http://www.w3.org/TR/CSS21/

3 Сообщения: 203 Зарегистрирован: 26.08.04

IonDen666,
Есть... Но полурабочий и только для Opera:

Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
 <html>
    <head>
      <title>Content alignment in the marker box</title>
      <style type="text/css">
           LI:before { 
               list-style-type: none;
               display: marker;
               content: "шаг.";
               counter-increment: counter;
               width: 6em;
               text-align: center;
           }
      </style>
   </head>
   <body>
     <ol>
       <li> This is the first item.
       <li> This is the second item.
       <li> This is the third item.
     </ol>
   </body>
 </html>

RusPutin, неужели в последнем Файерфоксе не пашет? (зы мне некогда посмотреть...)

1 Сообщения: 1043 Зарегистрирован: 25.02.05

Windows Xp, IE 6:

Код:

This is the first item. 
This is the second item. 
This is the third item. 

Linux Debian, Mozilla (Epiphani) 1.2.9:

Код:

шаг. This is the first item. 
шаг. This is the second item. 
шаг. This is the third item. 

FireFox под Windows XP здесь нет, проверить не могу...

И обратите внимане на точку не к месту между "1" и "шаг.".

17 Сообщения: 7419 Зарегистрирован: 15.11.04

Простите, но какой вопрос, такой ответ. Имхо это бред. В принципе чиайте спецификацию CSS, там написано. Но хотеть этого нельзя.

3 Сообщения: 203 Зарегистрирован: 26.08.04

Акела,
А чего еще нельзя хотеть? Есть задача, ее надо решить. И хочется ее решить как можно более простыми для конечного пользователя способами.

IonDen666, В 1.0.1 не пашет. )-:

17 Сообщения: 7419 Зарегистрирован: 15.11.04

RusPutin, сорри. Не обращайте внимания на мои слова. Они не для Вас.

1 рисуем картинку step.gif со словом "шаг"
2 пишем

Код:

LI 
{
  background-image: url(step.gif);
  background-repeat: no-repeat;
} 

3 подбираем нужные оступы

3 Сообщения: 203 Зарегистрирован: 26.08.04

y4an,
Не хотел бы связываться с картинками. К тому же, после номера строки идет точка... С ней бы что-нибудь сделать...

<?=$i++;?>шаг.

y4an, вопрос был о решении проблемы с помощью CSS.

DeДверь
Логин:
Пароль:
	Автологин