изменение цвета фона активной ссылки

[Sotnya]

Добрый вечер!

Есть меню, в нем 6 кнопок. Цвет меню, предположим черный. Текст кнопок белый. При наведении курсора мыши на кнопку меню, цвет background-color выделяется зеленым цветом.

Вопрос: как сделать так, что бы не только при наведении курсора мыши на кнопку менялся ее цвет, но и активная кнопка была всегда зеленой.

В прикрепленном изображении на кнопку "Главная" наведен курсор мыши. Если я его убираю и перенашу, например, на кнопку "О нас", то кнопка "Главная" стоновится опять черной, даже в том случае, если данный момент активна Главная страница.

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

Вот пример HTML кода:

		    <ul>
			    <a href="index.html"><li>Главная</li></a>
			    <a href="about.html"><li>О нас</li></a>
			    <a href="uslugi.html"><li>Услуги</li></a>
			    <a href="partners.html"><li>Партнеры</li></a>
			    <a href=""><li>Проекты</li></a>
			    <a href="contact.html"><li>Контакты</li></a>
		    </ul>

Вот пример CSS кода:

#gor-menu {
width:881px;
height:42px;
background-image:url(img/gor-menu.gif);
position:relative;
left:12px;
height:42px;
margin: 42px;
}
#gor-menu a li {
display:inline-block;
border:0px solid;
text-align:center;
overflow:hidden;
padding:12px;
width:120px;
color:#FFF;
font-family:Georgia, "Times New Roman", Times, serif;
text-decoration:none;
font-size:16px;
}
#gor-menu a li:hover {
background-color:#7bc706;
}

Помогите, плз!

Спасибо!

[Veseloff]

Для начала надо переделать код. Не «ul > a > li», а «ul > li > a»

[Sotnya]

Для начала надо переделать код. Не «ul > a > li», а «ul > li > a»

У меня изначально было сделано как Вы описали. При этом ссылка становилась активной только при навидении курсора мыши на надпись. Ввиду того, что кнопки достаточно широкие, не очень удобно нажимать кнопку. Поэтому я изменил на «ul > a > li».

А чем мне поможет «ul > li > a»?

Спасибо.

[deadrash]

А чем мне поможет «ul > li > a»?

Внутри ul может быть только li, а тег li может быть только внутри ul. Иначе код невалиден. Невалидный код, каждый браузер может интерпретировать по разному.

ссылка становилась активной только при навидении курсора мыши на надпись.

Ссылка расширяется паддингами.

Edited April 20, 2013 by deadrash

[Sotnya]

А чем мне поможет «ul > li > a»?

Внутри ul может быть только li, а тег li может быть только внутри ul. Иначе код невалиден. Невалидный код, каждый браузер может интерпретировать по разному.

ссылка становилась активной только при навидении курсора мыши на надпись.

Ссылка расширяется паддингами.

Спасибо!

А по первому вопросу подскажите?)

[deadrash]

А по первому вопросу подскажите?)

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

То есть:

<ul>
  <li class="active"><a href="index.html">Главная</a></li>
  <li><a href="about.html">О нас</a></li>
  <li><a href="uslugi.html">Услуги</a></li>
  <li><a href="partners.html">Партнеры</a></li>
  <li><a href="">Проекты</a></li>
  <li><a href="contact.html">Контакты</a></li>
</ul>

#gor-menu {
width:881px;
height:42px;
background-image:url(img/gor-menu.gif);
position:relative;
left:12px;
height:42px;
margin: 42px;
}
#gor-menu a li {
display:inline-block;
border:0px solid;
text-align:center;
overflow:hidden;
padding:12px;
width:120px;
color:#FFF;
font-family:Georgia, "Times New Roman", Times, serif;
text-decoration:none;
font-size:16px;
}
#gor-menu a li:hover, .active {
background-color:#7bc706;
}

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

[m~r.Nemo]

Как в html задать свойства для псевдоклассов без css?

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

например <a style="как тут указать стиль для каждого псевдокласса" href...>

[deadrash]

Как в html задать свойства для псевдоклассов без css?

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

например <a style="как тут указать стиль для каждого псевдокласса" href...>

Поместите куда нибудь на страницу этот скрипт:

<script>
var newStyles = document.createElement('link');
newStyles.href = '/ПУТЬ К СВОЕМУ СТИЛЮ CSS.css';
newStyles.rel = 'stylesheet';
document.body.appendChild(newStyles);
</script>

Только поменяйте путь к своему стилю CSS, и в самом CSS когда переопределяете свойства, используйте больший вес для селекторов, или ставьте !important;

Чуть не забыл.

Не занимайтесь некропостингом, создавайте собственные темы.

Edited May 3, 2013 by deadrash

[m~r.Nemo]

deadrash, но по идее можно на странице задавать больше одного тэга <style>, по вроде должно работать <head>

<link rel="stylesheet" type="text/css" href="http://.../style.css">

<style type="text/css">...</style>

</head>

<body>

или я ошибаюсь?

а что если второй тэг <style> поместить после боди, типа

<head>

<link rel="stylesheet" type="text/css" href="http://.../style.css">

</head>

<body>

<style type="text/css">...</style>

будет ли работать?

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

p.s. не вижу смысла создавать отдельную тему с двумя постами, врядли кому интересна такая дотошность как мне, ведь уже есть тема на эту тематику.

[deadrash]

а что если второй тэг <style> поместить после боди, типа

будет ли работать?

Да, что-то я затупил с этим скриптом, можно сразу стили вставлять. Будет работать даже если после </html> поставить =)

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

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

p.s. type="text/css" не нужно писать, это лишний мусор.