Всем привет!
Вопрос такой...
Сделал меню из картинок с эффектом ролловер (наводишь на одну, получается другая) ...
<ul id="main-menu">
<li class="onas"><a href="index.php?id=1"></a></li>
<li class="standart"><a href="index.php?id=2"></a></li>
<li class="vistavki"><a href="index.php?id=3"></a></li>
</ul>
и задал стиль...
<style>
#main-menu ul {
margin: 0px;
padding: 0px;
}
#main-menu li {
list-style-type: none;
}
.onas {
position:relative;
margin-top:0px;
left:0;
display:block;
width:206;
top: 0;
}
.onas a, .onas a:visited {display:block; width:206px; height:35px; background:url(buttons.gif); background-position:left top; background-color:transparent; text-align:center; color:#c00; line-height:0px; text-decoration:none; font-family:arial, sans-serif; font-weight:bold; margin-top:0px;}
.onas a:hover {background-position:left center; line-height:35px; overflow:hidden; color:#800;}
.onas a.selected, .onas a.selected:hover {background-position:left bottom; line-height:30px; cursor:default; color:#000;}
.onas a:focus {
outline: none;
}
.onas a:active {
background-position:left bottom; line-height:70px; cursor:default; color:#000; no-repeat center bottom;
}
.standart {
position:relative;
margin-top:0px;
left:0;
display:block;
width:206;
top: 0;
}
.standart a, .standart a:visited {display:block; width:206px; height:40px; background:url(standart.gif); background-position:left top; background-color:transparent; text-align:center; color:#c00; line-height:0px; text-decoration:none; font-family:arial, sans-serif; font-weight:bold; margin-top:0px; border:0px;}
.standart a:hover {background-position:left center; line-height:40px; overflow:hidden; color:#800;}
.standart a.selected, .standart a.selected:hover {background-position:left bottom; line-height:40px; cursor:default; color:#000;}
.standart a:focus {
outline: none;
}
.standart a:active {
background-position:left bottom; line-height:40px; cursor:default; color:#000;
}
.vistavki {
position:relative;
margin-top:0px;
left:0;
display:block;
width:206;
top: 0;
}
.vistavki a, .vistavki a:visited {display:block; width:206px; height:38px; background:url(vistavki.gif); background-position:left top; background-color:transparent; text-align:center; color:#c00; line-height:0px; text-decoration:none; font-family:arial, sans-serif; font-weight:bold; margin-top:0px; border:0px;}
.vistavki a:hover {background-position:left center; line-height:38px; overflow:hidden; color:#800;}
.vistavki a.selected, .vistavki a.selected:hover {background-position:left bottom; line-height:38px; cursor:default; color:#000;}
.vistavki a:focus {
outline: none;
}
.vistavki a:active {
background-position:left bottom; line-height:40px; cursor:default; color:#000;
}
</style>
вставил всё ето дело в шаблон... НО
тут вроде как класс active присутствует, но после нажатия на кнопку эффект активности у неё пропадает (тобиш кнопка становится в своё первоначалное положение ), скорее всего из за того что страница полностью обновляется, после ссылки index.php?id=....
как надо прописать команды в Wayfinder-e, 4тобы кнопки оставались в активном состоянии...
Надеюсь на вашу помощь...!
Подумайте о различии
a:active
и
.active a
