Боковое меню

[gvay]

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

Помогите разобраться, как сделать пункты меню разного цвета?

вот код блока с менюшкой

<div id="nav">
	  <ul>
		<li><a href="">Главная</a></li>
		<li><a href="">Вторая</a></li>
		<li><a href="">Третья</a></li>
		<li><a href="">Четвертая</a></li>
	  </ul>
	</div>

это все что относится к меню из css файла

#nav {
  background: url(images/nav_left.jpg) no-repeat;
}
#nav ul {
  margin-left: 9px;
  padding-left: 1px;
  padding-bottom: 29px;
  background: #2A2A2A  bottom left url(images/nav_bot.jpg) no-repeat;
}
#nav li {
  list-style: none;
  font: 14px "arial narrow", arial, sans-serif;
  border-top: 1px solid #959595;
  background: 188px 10px url(images/arr_white.gif) no-repeat;
  padding: 7px 0 0 31px;  
}
#nav a {
  color: #fff;
  text-decoration: none;
  border-left: 1px solid #959595;
  padding-left: 10px;
  display: block;
  width: 90%;
  padding: 2px 0 6px 8px;
}
#nav a:hover {
  text-decoration: underline;
}
#nav .important {
  border: none;
  border-top: 1px solid #959595;
  background: 188px 10px url(images/arr_orange.gif) no-repeat;
}
#nav .important a {
  color: #E9C379;

Заранее благодарен.

[Justnewone]

.important - ?

а вообще, кроссбраузерно, надо давать классы и через них прописывать нужный цвет.

Можно не кроссбраузерно,

LI A {color: ...}

LI A + A {color: ...}

LI A + A + A {color: ...}

LI A + A + A + A {color: ...}

....

[gvay]

.important - ?

а вообще, кроссбраузерно, надо давать классы и через них прописывать нужный цвет.

Можно не кроссбраузерно,

LI A {color: ...}

LI A + A {color: ...}

LI A + A + A {color: ...}

LI A + A + A + A {color: ...}

....

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

ммм... а можно подробнее как это будет выглядеть в html файле?

Заранее благодарен

[Justnewone]

ммм... а можно подробнее как это будет выглядеть в html файле?

Что именно, классы???

<div id="nav">
	  <ul>
		<li class="color1"><a href="">Главная</a></li>
		<li class="color2"><a href="">Вторая</a></li>
		<li class="color3 important"><a href="">Третья</a></li><!-- тут "когда находишся в этом разделе" -->
		<li class="color4"><a href="">Четвертая</a></li>
	  </ul>
	</div>

И в css:

#nav .color1 a {
  color: ...;
}

#nav .color2 a {
  color: ...;
}

...

Если не кроссбраузерныцй вариант, то ничего в HTML не меняется, только CSS

Edited April 2, 2009 by Justnewone

[gvay]

LI A {color: ...}

LI A + A {color: ...}

LI A + A + A {color: ...}

LI A + A + A + A {color: ...}

получается что первая строка это первый пункт меню вторая второй и т.д. ??

[Justnewone]

LI A {color: ...}

LI A + A {color: ...}

LI A + A + A {color: ...}

LI A + A + A + A {color: ...}

получается что первая строка это первый пункт меню вторая второй и т.д. ??

А разве не очевидно? Можно например пробовать и все видеть в режиме онлайн.

[gvay]

получается так в css ?

#nav li {
  list-style: none;
  font: 14px "arial narrow", arial, sans-serif;
  border-top: 1px solid #959595;
  background: 188px 10px url(images/arr_white.gif) no-repeat;
  padding: 7px 0 0 31px;  
}
#nav a {
  color: #fff;
  text-decoration: none;
  border-left: 1px solid #959595;
  padding-left: 10px;
  display: block;
  width: 90%;
  padding: 2px 0 6px 8px;
}
#nav li a+a {
  color: #000000;
  text-decoration: none;
  border-left: 1px solid #959595;
  padding-left: 10px;
  display: block;
  width: 90%;
  padding: 2px 0 6px 8px;
}

цвет моего пункта меню указывается в <ul>

#nav ul {
  margin-left: 9px;
  padding-left: 1px;
  padding-bottom: 29px;
  background: #2A2A2A  bottom left url(images/nav_bot.jpg) no-repeat;
}

а li у меня внутри ul и цвет не меняется.

Edited April 2, 2009 by gvay

[Justnewone]

Бред какой-то )))

Наверное, я сейчас за плечом у Вас сижу, и Вы при рассказе вдобавок все мышкой иллюстрируете.

Цвет - это цвет текста. задается через color. Не знаю что Вы там имели ввиду, на самом деле сам принцип я Вам рассказал. Вот прям полностью...

[gvay]

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

#nav ul {
  margin-left: 9px;
  padding-left: 1px;
  padding-bottom: 29px;
  background: #2A2A2A  bottom left url(images/nav_bot.jpg) no-repeat;

}

background: #2A2A2A вот он

но так как у меня все li стоят внутри этого ul

<ul>
		<li><a href="">главная</a></li>
		<li><a href="">первая</a></li>
		<li><a href="">вторая</a></li>

	  </ul>

у меня не получается изменить для отдельного пункта цвет заливки бекграунда. сорри за то что ввел в заблуждение

если в этом ul поменять цвет то поменяется везде в li

Edited April 2, 2009 by gvay

[Justnewone]

Тут Вы задаете цвет на весь список ващета...

#nav ul {
  margin-left: 9px;
  padding-left: 1px;
  padding-bottom: 29px;
  background: #2A2A2A  bottom left url(images/nav_bot.jpg) no-repeat;

}

А вот тут:

#nav li {
  list-style: none;
  font: 14px "arial narrow", arial, sans-serif;
  border-top: 1px solid #959595;
  background: 188px 10px url(images/arr_white.gif) no-repeat;
  padding: 7px 0 0 31px;  
}

Для каждого элемента списка.

Напишите

#nav li{...}

#nav li + li {...}

...

[gvay]

ага разобрался , спасибо еще раз

а нельзя ли как нибудь сделать чтобы изменять цвет li в нутри ul?

и вот так можно савместить? background: 188px 10px url(images/arr_white.gif) bottom left url(images/nav_bot.jpg) no-repeat; чтобы из ul боковая штучка перешла в li?

[Justnewone]

боковая штучка... О май гад...

[Searcher]

а нельзя ли как нибудь сделать чтобы изменять цвет li в нутри ul?

Вообще не понятно что вы имеете ввиду! #nav li {...} это задает свойства именно для li. А что значит цвет li в нутри ul ?

и вот так можно савместить? background: 188px 10px url(images/arr_white.gif) bottom left url(images/nav_bot.jpg) no-repeat; чтобы из ul боковая штучка перешла в li?

Включите логику! Чтобы из ul боковая "штучка" перешла в li надо указать её в стилях для li, а не для ul.

[gvay]

все со всем разобрался спасибо большое

[BassEast]

канитель