вопросы по стилям списков

[sc@r@bey]

1. а можно сделать, чтоб у каждого пункта списка бяла своя картинка (предпологается фиксированное количество пунктов списка)

2. как выровнять по центру картинки содержимое пункта списка?

[psywalker]

sc@r@bey

1) Можно, но тогда тебе придётся каждому пункту списка задавать отдельный класс

2) А делается это следующими двумя способами :

 
						<style type="text/css">
							 ul li.one {background: url(../img/hdr-bg.jpg) 0 5px no-repeat;} - это означает, что картинка будет расположена: 0px от левого края и 5рх от верха пункта списка
							 ul li.two {background: url(../img/hdr-bg.jpg) 0 50% no-repeat;} - это означает, что картинка будет расположена: 0px от левого края и 50% от верха пункта списка, то есть поидее посередине

						</style>
					   <ul>
						  <li class="one">1 Пункт</li>
						  <li class="two">2 Пункт</li>
					  </ul>

Только не забудь задать левый отступ на уровень картинки, чтобы список не налезал на изображение, например: padding-left: 20px;

Edited May 5, 2009 by psywalker

[Great Rash]

А что нельзя засунуть в <li> тупо <img> с нужной картинкой, убрав перед этим буллеты?

[sc@r@bey]

спасибо я примерно так и предполагал

[psywalker]

Great Rash

А что нельзя засунуть в <li> тупо <img> с нужной картинкой, убрав перед этим буллеты?

Можно и так конеш)), но я предпочитаю все картинки вешать фоном

[Great Rash]

2psywalker

Это ж миллион стилей надо написать. Не очень удобно.

[psywalker]

Great Rash

вообще надо смотреть по ситуации, если очень много правда, то всёже Имг удобнее, а если пунктов пять штук, то можно и фоном повесить

[Lincky]

—-CSS—--

li {

list-style: none;

background-position: url(адрес)0 y;

background-repeat: no-repeat

padding-left: 25px

}

class1.li {

background-image: url(адрес);

}

————--

class2.li, class3.li, и т.д.

y-задаешь кол-во пикселей для отступа картинки сверху (выравниваешь по центру)

padding подбираешь сам, эт я для примера задал 25

Edited May 8, 2009 by Lincky

[psywalker]

Lincky

Молодец, только ты ошибся в назначении класса не в том месте, класс надо ставить после li, а не перед , как у тебя))

li.class1 {

background-image: url(адрес);

}

li.class2 {

background-image: url(адрес);

}

.....

[SelenIT]

А что нельзя засунуть в <li> тупо <img> с нужной картинкой, убрав перед этим буллеты?

Можно (хоть и несемантично), но на шаге

выровнять по центру картинки содержимое пункта списка

возникнут новые проблемы. А в варианте с фоном — нет .

[Lincky]

да спасиб!заработался!

[Endybad]

1. а можно сделать, чтоб у каждого пункта списка бяла своя картинка (предпологается фиксированное количество пунктов списка)

Вот здесь по этой теме есть урок:

http://allforlive.com/