Николай С.
710 сообщений
#17 лет назад
Есть список:
<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
Л. Юрий
12 сообщений
#17 лет назад
Только для 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" или через скрипты... Впрочем, может есть и попроще решение — это первое, что на сонный ум пришло
С. А.
97 сообщений
#17 лет назад
Проще и грамотней:

<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, уменьшая тем самым соблазн использовать его.
Николай С.
710 сообщений
#17 лет назад
andrej, огромное спасибо. То, что надо
Л. Юрий
12 сообщений
#17 лет назад
andrej, речь шла именно о CSS, а не об HTML. Так, разумеется, проще.
С. А.
97 сообщений
#17 лет назад
yurisvg, ага. Но человеку, как я понял, нужно было ехать, а не шашечки.
Николай С.
710 сообщений
#17 лет назад
andrej, один косяк - в Опере 8.5 не пашет
С. А.
97 сообщений
#17 лет назад
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>
Николай С.
710 сообщений
#17 лет назад
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>
С. А.
97 сообщений
#17 лет назад
SolNikolay, зачем ul (неупорядоченный список), когда у нас самый что ни на есть упорядоченный (ol)?

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


andrej, извините. Совсем забыл сразу написать - необходимо центрирование всего списка. Тоесть и номер должен быть отцентрирован, и текст под ним. Надо получить следующее:
С. А.
97 сообщений
#17 лет назад
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>
Дмитрий П.
441 сообщение
#17 лет назад
Т.е. все пункты меню выстраиваются в строчку, а их автоматически генерируемые номера размещаются над ними?

Не получится скорее всего. Я немного побаловался и смог добиться такого эффекта в Мозилле, но в 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"> и т.п.