стиль нумерованного списка

dangler · October 22, 2008

Здравствуйте!

У меня вопрос по стилям списка, по статье http://www.htmlbook.ru/content/?id=58

А можно ли задать цвет и шрифт только для цифр списка (1. 2. ...)

а сам текст чтобы оставался таким же, как и вне списка?

Конкретно, я хочу, чтобы цифры были шрифтом Тахома серого цвета, а пункты списка - это ссылки, шрифт такой же, но цвет другой, заданный стилем. При этом еще над списком ссылок название, оно таким же шрифтом, того же размера и цвета, но жирное.

сейчас я сделал так:

Заголовок

<ul>

<li><a class="mail" href="http://www.free-lance.ru/users/atahanov/viewproj.php?prjid=975147">Rolsen - спонсор "Атланта"</a></li>

</ul>

при этом цсс:

a.mail {

font-family: Verdana, Tahoma, Arial, sans-serif;

font-weight: 500;

font-size: 0.72em;

color: #000000;

text-decoration: none;

}

a.mail:hover {

font-family: Verdana, Tahoma, Arial, sans-serif;

font-weight: 500;

font-size: 0.72em;

color: #000000;

text-decoration: underline;

}

.simpletext {

font-family: Verdana, Tahoma, Arial, sans-serif;

font-weight: 500;

font-size: 0.72em;

color: #000000;

}

UL {

list-style: decimal;

font-family: Verdana, Tahoma, Arial, sans-serif;

font-weight: 500;

font-size: 0.72em;

color: #666666;

}

но получалась хрень полнейшая, как я понимаю, стиль накладывается по 3 раза на ссылки и в итоге они совсем плохие..

Edited October 22, 2008 by dangler

rus · October 22, 2008

видимо плохо читал статью, ибо то что ты хочешь в принципе - невозможно, по крайней мере средствами css и html.

Это можно сделать на картинках, то есть рисуешь картинку с цифрами и делаешь так:

LI { 
 list-style-image: url('images/check.gif'); /* Путь к файлу с маркером */
}

Иван Шумов · October 22, 2008

rus не гони пургу

автору - вот это надо?

вообще такими списками ОЧЕНЬ трудно управлять

user · October 22, 2008

http://www.htmlbook.ru/faq/?a=34

rus · October 22, 2008

Извиняюсь за свою неосведомленность - не занл, теперь буду знать.

хм... очень занятно.

<style>
ol.main {
	font-size: 18px;
	color: #ff8f00;
	display: block;
	padding:0;
	margin:0;
}
ol.main li {
	font-size: 18px;
	color: #ff8f00;
	padding:0;
	margin:0 0 10px 22px;
	_margin:0 0 10px 25px;
}
ol.main li span {
	font-size: 11px;
	color: #55585d;
	display: block;
	margin: 0;
}
</style>

<ol class="main">
  <li><span>Test1</span></li>
  <li><span>Test2</span></li>
  <li><span>Test3</span></li>
  <li><span>Test4</span></li>
  <li><span>Test5</span></li>
</ol>

dangler · October 23, 2008

О, спасибо!

а то я уже расстроился, что это нельзя сделать, сделал так:

<span class="simpletext">
 <br>
<strong>Наружная реклама</strong><p>
</span>

<span class="number">1.</span>   <a class="portf" href="http://www.free-lance.ru/users/atahanov/viewproj.php?prjid=975147">Rolsen - спонсор «Атланта»</a><br>

<span class="number">2.</span>   <a class="portf" href="http://www.free-lance.ru/users/atahanov/viewproj.php?prjid=852006">Автомотоклуб ФСО</a><br>

<span class="number">3.</span>   <a class="portf" href="http://www.free-lance.ru/users/atahanov/viewproj.php?prjid=300570">Щиты для ресторанов «Тануки»</a><br>

<span class="number">4.</span>   <a class="portf" href="http://www.free-lance.ru/users/atahanov/viewproj.php?prjid=845755">Истра Кантри Клаб</a><p>

заморочено, но работает.. ) попробую теперь способом, который вы описали

dangler · October 24, 2008

WBBEGINNER, я попробовал твой код.

хотел спросить - зачем нужен этот раздел?

ol.main {

font-size: 18px;

color: #ff8f00;

display: block;

padding:0;

margin:0;

}

Когда я меняю в нем размер шрифта, цвет, оставляя разделы ol.main li и ol.main li span без изменений, то ничего не происходит..

Остальное все хорошо, но для текста.

Возможно, я не очень внятно сформулировал свой вопрос изначально, теперь поврорюсь - у меня более сложная ситуация, мне нужно не так, как сказал Иван Шумов, а мне нужно, чтобы пункты были именно ссылки

Поэтому я и извращаюсь, как я привел код выше.

А с ними почему-то этот способ не работает.. Если заключать их в тег , то они становятся очень маленького шрифта, если не заключать - они такого же размера шрифта, как и цифры, но при этом не становятся оранжевыми, как цифры, а остаются черными, как задано в их стиле..

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

может, нужно для задания размера использовать px, а не em?

rus · October 24, 2008

1) Мой ник rus.

2) Только путем изврата вот так:

<style>
ol.main {
	font-size: 18px;
	color: #ff8f00;
	display: block;
	padding:0;
	margin:0;
	position:relative;
	list-style:none;
}
ol.main div {
	position:absolute;
	top:0px;
	left:0px;
	width:10px;
	height:15px;
	display:block;
}
ol.main div a {
	position:absolute;
	top:0px;
	left:0px;
	font-size: 11px;
	color: #ff8f00;
}
ol.main li {
	font-size: 18px;
	color: #ff8f00;
	padding:0;
	margin:0 0 10px 22px;
	_margin:0 0 10px 25px;
}
ol.main li span {
	font-size: 11px;
	color: #55585d;
	display: block;
	margin: 0;
}
</style>

<ol class="main">
<div><a href="#">1</a></div>
  <li><span>Test1</span></li>
  <li><span>Test2</span></li>
  <li><span>Test3</span></li>
  <li><span>Test4</span></li>
  <li><span>Test5</span></li>
</ol>

Я правильно понял?

Это я имею ввиду чтобы цыфра была ссылкой.

З.Ы. ссылка только первая цыфра для примера.

Edited October 24, 2008 by rus

dangler · October 24, 2008

а, а ну да, rus, сорри, просто так запарился с этими кодами, что уже не отличаю ника от звания..

не, не совсем правильно - цифра пусть будет как обычно, а текст после цифры - ссылка, причем не просто <a>, а именно со своим стилем <a class="xxx">.

я сейчас решил так, без списков:

1. <a class="portf" href="###">Rolsen - спонсор «Атланта»</a>

2. <a class="portf" href="###">Автомотоклуб ФСО</a>

но, просто думал, раз уж это нумерованный список, то логичнее будет использовать специальный тег... но сейчас уже думаю, что, возможно так, как я сделал, будет проще, чем извращаться со стилями <ol>..

rus · October 24, 2008

А кто тебе мешает сделать так:

<style>
ol.main {
	display: block;
	padding:0;
	margin:0;
}
ol.main li {
	font-size: 18px;
	color: #ff8f00;
	padding:0;
	margin:0 0 10px 22px;
	_margin:0 0 10px 25px;
}
ol.main li a {
	font-size: 11px;
	color: #55585d;
	display: block;
	margin: 0;
}
</style>
<ol class="main">
  <li><a href="#">Test1</a></li>
  <li><a href="#">Test2</a></li>
  <li><a href="#">Test3</a></li>
  <li><a href="#">Test4</a></li>
  <li><a href="#">Test5</a></li>
</ol>

???

dangler · October 27, 2008

хм, даже так можно? - ol.main li a:hover {

не ожидал, этож сколько тегов друг за другом можно писать? только недавно я думал, что вообще только один тег хтмл, а после него его свойство, а тут вереница целая

ну так, кстати, получается наконец. ) правда единственная проблема остается - я до этого везде на сайте размер шрифта задавал в em, поскольку где-то прочитал, что так лучше задавать размер. вот почему-то с ним как раз возникают проблемы, а с пикселями, как у вас - все нормально.

вот, посмотрите, ваш код я чуть переделал так:

ol.main {
display: block;
padding:0;
margin:0;
}
ol.main li {
font-size: 13px;
font-family: Verdana, Tahoma, Arial, sans-serif;
color: #666666;
padding:0;
margin:0 0 10px 22px;
_margin:0 0 10px 25px;
}
ol.main li a {
font-size: 13px;
font-family: Verdana, Tahoma, Arial, sans-serif;
color: #000000;
display: block;
margin: 0;
}
ol.main li a:hover {
font-size: 13px;
font-family: Verdana, Tahoma, Arial, sans-serif;
color: #000000;
text-decoration: none;
display: block;
margin: 0;
}

получается так:

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

однако, как я уже сказал, я везде на сайте до этого использовал размер шрифта в em, конкретно 0.72em, но если я пробую этот же размер вставить в ваш код:

ol.main {
display: block;
padding:0;
margin:0;
}
ol.main li {
font-size: 0.72em;
font-family: Verdana, Tahoma, Arial, sans-serif;
color: #666666;
padding:0;
margin:0 0 10px 22px;
_margin:0 0 10px 25px;
}
ol.main li a {
font-size: 0.72em;
font-family: Verdana, Tahoma, Arial, sans-serif;
color: #000000;
display: block;
margin: 0;
}
ol.main li a:hover {
font-size: 0.72em;
font-family: Verdana, Tahoma, Arial, sans-serif;
color: #000000;
text-decoration: none;
display: block;
margin: 0;
}

то получается вот что:

то есть цифры остаются нормальными, а вот ссылки портятся..

почему так, не подскажите?

Edited November 5, 2008 by dangler

rus · October 27, 2008

Советую почитать вот это.


Единица em отталкивается от размера основного шрифта документа. Предположим, что для всей страницы мы установили шрифт 
размером 14 пунктов (пример 1), тогда единица 1em будет эквивалентна 14pt.

Это то, на что стоит обратить внимание.

Edited October 27, 2008 by rus

Anami · October 27, 2008

Мда, и всё таки нельзя, как и было сказано во втором посте.

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

dangler · November 5, 2008

а какие ситуации, например, когда нельзя вставить span? Ведь он для того и нужен, чтобы при помощи него использовать различные классы, насколько я понимаю.

Я вот создаю кучу разных классов текста, различных по размеру, толщине, гарнитуре и т.д., и потом span'ами вставляю там где нужно, нужное начертание текста .

Еще иногда использую для этого же самого, но еще всякие отступы и переносы строк создает, их только если обнулять сначала, еще неизвестно как разные браузеры эти обнуления воспримут..

А со span'ами все просто, мне кажется.

rash · November 5, 2008

Мда, и всё таки нельзя, как и было сказано во втором посте.

Да можно, можно, если нужно. Правда действительно контролировать списки со сложным оформлением может быть затруднительно.

Еще иногда использую для этого же самого, но еще всякие отступы и переносы строк создает, их только если обнулять сначала, еще неизвестно как разные браузеры эти обнуления воспримут.

p {
	margin: 0;
	padding: 0;
}

браузеры воспримут нормально.

Anami · November 5, 2008

а какие ситуации, например, когда нельзя вставить span? Ведь он для того и нужен, чтобы при помощи него использовать различные классы, насколько я понимаю.

Например редактор данных в CMS, который одной кнопочкой создает список, и в него, увы, не добавляет

Sign In

стиль нумерованного списка

Question

Link to comment

Share on other sites

15 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information