Вёрстка списками

Есть список:
<ul>
<li><a href="javascript: void(0)">111</a></li>
<li><a href="javascript: void(0)">222</a></li>
<li><a href="javascript: void(0)">333</a></li>
</ul>

Как в CSS прописать, чтообы номера элементов отображались над строкой? Тоесть
I
111

II
222

III
333

Только для Opera и FF:

<style type="text/css">

ol{list-style:upper-roman inside}

li{white-space:pre}

li a:before{content:'\0A'}

</style>

<ol>

<li><a href="#">111</a></li>

<li><a href="#">222</a></li>

<li><a href="#">333</a></li>

</ol>

Для MSIE придётся шаманить что-то или через MS "css behavior" или через скрипты... Впрочем, может есть и попроще решение — это первое, что на сонный ум пришло

Проще и грамотней:

<style>
ol {
list-style: upper-roman inside;
}
</style>
<ol>
<li><br /><a href="javascript: void(0)">111</a></li>
<li><br /><a href="javascript: void(0)">222</a></li>
<li><br /><a href="javascript: void(0)">333</a></li>
</ol>

Отображаться будет везде. И вообще "content" лучше не использовать, он противоречит всем трезвым принципам CSS. И хорошо, что он не работает в IE, уменьшая тем самым соблазн использовать его.

andrej, огромное спасибо. То, что надо

andrej, речь шла именно о CSS, а не об HTML. Так, разумеется, проще.

yurisvg, ага. Но человеку, как я понял, нужно было ехать, а не шашечки.

andrej, один косяк - в Опере 8.5 не пашет

SolNikolay,

<style>

ol { list-style: upper-roman inside; }

</style>

<ol>

<li>&nbsp;<br /><a href="javascript: void(0)">111</a></li>

<li>&nbsp;<br /><a href="javascript: void(0)">222</a></li>

<li>&nbsp;<br /><a href="javascript: void(0)">333</a></li>

</ol>

andrej, тогда уж такой

<style>

ul {

text-align: center;

}

li {

list-style: upper-roman inside;

}

ol {

padding: 0;

margin: 0;

}

</style>

<ul>

<li>&nbsp;<ol><a href="javascript: void(0)">111</a></ol></li>

<li>&nbsp;<ol><a href="javascript: void(0)">222</a></ol></li>

<li>&nbsp;<ol><a href="javascript: void(0)">333</a></ol></li>

</ul>

SolNikolay, зачем ul (неупорядоченный список), когда у нас самый что ни на есть упорядоченный (ol)?

Зачем указывается нулевой пэддинг и поля для элемента ol, если у нас его вообще нет, а есть только ul (неправильный)?

andrej, извините. Совсем забыл сразу написать - необходимо центрирование всего списка. Тоесть и номер должен быть отцентрирован, и текст под ним. Надо получить следующее:

SolNikolay, а, понял. Тогда надо вообще без списка обходиться... Ещё можно сдвинуть вправо заголовки списка, напр.:

<style>

ol { list-style: upper-roman inside; }

li { text-align: center; }

.shift { margin-left: -1em; }

</style>

<ol>

<li><span class="shift">&nbsp;</span><br /><a href="javascript: void(0)">111</a></li>

<li><span class="shift">&nbsp;</span><br /><a href="javascript: void(0)">222</a></li>

<li><span class="shift">&nbsp;</span><br /><a href="javascript: void(0)">333</a></li>

</ol>

Но римские цифры уедут в IE6. Лучше вообще без списка:

<style>

.list { text-align: center; }

.list a { display: block; }

</style>

<div class="list">

	<div>I.<a href="javascript: void(0)">111</a></div>

	<div>II.<a href="javascript: void(0)">222</a></div>

	<div>III.<a href="javascript: void(0)">333</a></div>

</div>

Т.е. все пункты меню выстраиваются в строчку, а их автоматически генерируемые номера размещаются над ними?

Не получится скорее всего. Я немного побаловался и смог добиться такого эффекта в Мозилле, но в IE это не работает: ссылка
И в Мозилле, кстати, не должно работать. По одной простой причине - для li надо прописывать float: left. Свойство display плавающего (float) блок в соответствии со спецификацией устанавливается в block, а макеры генерируются только для list-item.
Т.е. вот что получается:
Делаем li {float: left} - получаем li {display: block}, т.к. li больше не является list-item'ом, то у него исчезает маркер (номер).

Выход из ситуации - прописать для li фоновые картинки с номерами и раскидывать их через классы <li class="roman-1">, "<li class="roman-2"> и т.п.