Ссылка не активна - HTML и CSS

kubar · 26.07.2010, 15:14

Нужно сделать что бы ссылка при переходе была активна. То есть что бы человек видел в каком разделе он находится
у меня код

<ul id="nav">
<li class="one"><a href="../index.html">О компании</a></li>
<li class="one"><a href="products.html">Продукция</a></li>
<li class="one"><a href="service.html">Обслуживание </a></li>
<li class="one"><a href="diler.html">Сотрудничество </a></li>
<li class="one"><a href="potrebitel.html">Уголок потребителя</a></li>
<li class="one"><a href="contacts.html">Контакты</a></li>
</ul>

а цеска такая
.one {
width:144px;
height:40px;
background-image:url(../images/potre1.png);
text-align:center;
margin:2px 1px 0px 1px;
background-repeat: no-repeat;
font-family: "Times New Roman", Times, serif;
}
#nav a {
margin:0px 0px 0px 0px;
display: block;
font-size:14px;
font-family: "Times New Roman", Times, serif;
color:#039;
padding: 10px 0px;
text-decoration:none;
font-weight: bold;

}
#nav a:active {
color:#0C3;
background-color:#030;
}
#nav{
margin-top: 7px;
list-style:none;
padding: 0px;
padding-left:23px;
}
#nav li{float:left;}
#nav a:hover {
color: #FFF;
background-color: #3C7FC4;
}

что тут не правильно?

slips · 26.07.2010, 16:29

Цитата:

Сообщение от kubar

Нужно сделать что бы ссылка при переходе была активна. То есть что бы человек видел в каком разделе он находится
у меня код
<li class="one"><a href="service.html">Обслуживание </a></li>

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

kubar · 26.07.2010, 16:36

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

slips · 26.07.2010, 16:46

Цитата:

Сообщение от kubar

может есть примеры?

Вот пример на вашем же коде

Код HTML:

<html>
<head>
<style>
.one {
width:144px;
height:40px;
background-image:url(../images/potre1.png);
text-align:center;
margin:2px 1px 0px 1px;
background-repeat: no-repeat;
font-family: "Times New Roman", Times, serif;
}

#nav li a {
margin:0px 0px 0px 0px;
display: block;
font-size:14px;
font-family: "Times New Roman", Times, serif;
color:#039;
padding: 10px 0px;
text-decoration:none;
font-weight: bold;

}
#nav li a:active {
color:#0C3;
background-color:#030;
}

#nav{
margin-top: 7px;
list-style:none;
padding: 0px;
padding-left:23px;
}

#nav li{float:left;}
#nav li a:hover {
color: #FFF;
background-color: #3C7FC4;
}

#nav li .a_active{
color: #000;
background-color: #333FFF;
}
#nav li .a_active:hover{
color: #FFF745;
background-color: #333FFF;
}
</style>
</head>
<body>
<ul id="nav">
<li class="one"><a href=""><b>О компании</b></a></li>
<li class="one"><a class='a_active' href=""><b>Продукция</b></a></li>
<li class="one"><a href=""><b>Обслуживание </b></a></li>
<li class="one"><a href=""><b>Сотрудничество </b></a></li>
<li class="one"><a href=""><b>Уголок потребителя</b></a></li>
<li class="one"><a href="index.html"><b>Контакты</b></a></li>
</ul>
</body>
</html>

Код:

class='a_active' - это и есть класс активного элемента

kubar · 26.07.2010, 17:37

Не получается!
прописал уже в том окне где нужно что бы горело.
не работает.
<ul id="nav">
<li class="one"><a class='a_active' href="../index.html">О компании</a></li>
<li class="one"><a href="../html/products.html">Продукция</a></li>
<li class="one"><a href="../html/service.html">Обслуживание</a></li>
<li class="one"><a href="../html/diler.html">Сотрудничество</a></li>
<li class="one"><a href="../html/potrebitel.html">Уголок потребителя</a></li>
<li class="one"><a href="../html/contacts.html">Контакты</a></li>
</ul>

#nav a:active {
color:#0C3;
background-color:#030;
}

kubar · 26.07.2010, 17:44

Все - сенкс большое. все получилось)

26.07.2010, 15:14	#1
kubar Регистрация: 26.07.2010 Сообщений: 4	Ссылка не активна Нужно сделать что бы ссылка при переходе была активна. То есть что бы человек видел в каком разделе он находится у меня код <ul id="nav"> <li class="one"><a href="../index.html"><b>О компании</b></a></li> <li class="one"><a href="products.html"><b>Продукция</b></a></li> <li class="one"><a href="service.html"><b>Обслуживание </b></a></li> <li class="one"><a href="diler.html"><b>Сотрудничество </b></a></li> <li class="one"><a href="potrebitel.html"><b>Уголок потребителя</b></a></li> <li class="one"><a href="contacts.html"><b>Контакты</b></a></li> </ul> а цеска такая .one { width:144px; height:40px; background-image:url(../images/potre1.png); text-align:center; margin:2px 1px 0px 1px; background-repeat: no-repeat; font-family: "Times New Roman", Times, serif; } #nav a { margin:0px 0px 0px 0px; display: block; font-size:14px; font-family: "Times New Roman", Times, serif; color:#039; padding: 10px 0px; text-decoration:none; font-weight: bold; } #nav a:active { color:#0C3; background-color:#030; } #nav{ margin-top: 7px; list-style:none; padding: 0px; padding-left:23px; } #nav li{float:left;} #nav a:hover { color: #FFF; background-color: #3C7FC4; } что тут не правильно?

26.07.2010, 17:37	#5
kubar Регистрация: 26.07.2010 Сообщений: 4	Не получается! прописал уже в том окне где нужно что бы горело. не работает. <ul id="nav"> <li class="one"><a class='a_active' href="../index.html"><b>О компании</b></a></li> <li class="one"><a href="../html/products.html"><b>Продукция</b></a></li> <li class="one"><a href="../html/service.html"><b>Обслуживание</b></a></li> <li class="one"><a href="../html/diler.html"><b>Сотрудничество</b></a></li> <li class="one"><a href="../html/potrebitel.html"><b>Уголок потребителя</b></a></li> <li class="one"><a href="../html/contacts.html"><b>Контакты</b></a></li> </ul> #nav a:active { color:#0C3; background-color:#030; } Последний раз редактировалось kubar; 26.07.2010 в 17:44.

26.07.2010, 17:44	#6
kubar Регистрация: 26.07.2010 Сообщений: 4	Все - сенкс большое. все получилось) Последний раз редактировалось kubar; 26.07.2010 в 18:08.

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Заголовок Child формы имеет цвет неактивной формы, хотя форма активна?	PrimaryPro	Общие вопросы Delphi	0	12.03.2010 11:12
Ссылка в VB 6	serega112000	Помощь студентам	2	01.02.2010 21:44
Ссылка	joojle	Microsoft Office Excel	3	26.05.2009 14:25
Ссылка на C++	A-l-e-x	Общие вопросы C/C++	8	11.05.2009 21:28

26.07.2010, 16:36	#3
kubar Регистрация: 26.07.2010 Сообщений: 4	То есть я не силен в верстке. так если честно я не понял что мне сделать нужно.! может есть примеры?