Problem z menu obrazkowym - a.active

[zecke]

Witam

Mam menu z obrazków w css, oto moje kody:

CSS:

.solidblockmenu {
margin-left: 25px;
height: 40px;
}

li.jeden a { margin: 0px; padding-left: 5px; height: 40px; width: 108px; float: left; background:   url(tlo/ofirmie-b.gif) no-repeat; }
li.jeden a:visited {background:   url(tlo/ofirmie-b.gif)no-repeat; }
li.jeden a:hover { background:   url(tlo/ofirmie-d.gif)no-repeat; }
li.jeden a:active {background:   url(tlo/ofirmie-d.gif) no-repeat; }

li.dwa a{ margin: 0px; padding-left: 5px; height: 40px; width: 108px; float: left; background:   url(tlo/oferta-b.gif) no-repeat; }
li.dwa a:visited {background:   url(tlo/oferta-b.gif) no-repeat; }
li.dwa a:hover { background:   url(tlo/oferta-d.gif) no-repeat; }
li.dwa a:active {background:   url(tlo/oferta-d.gif) no-repeat; }

li.trzy a{ margin: 0px; padding-left: 5px; height: 40px; width: 146px; float: left; background:   url(tlo/inwestycje-b.gif) no-repeat; }
li.trzy a:visited {background:   url(tlo/inwestycje-b.gif) no-repeat; }
li.trzy a:hover { background:   url(tlo/inwestycje-d.gif) no-repeat; }
li.trzy a:active {background:   url(tlo/inwestycje-d.gif) no-repeat; }

li.cztery a{ margin: 0px; padding-left: 5px; height: 40px; width: 104px; float: left; background:   url(tlo/kontakt-b.gif) no-repeat; }
li.cztery a:visited {background:   url(tlo/kontakt-b.gif) no-repeat; }
li.cztery a:hover { background:   url(tlo/kontakt-d.gif) no-repeat; }
li.cztery a:active {background: url(tlo/kontakt-d.gif) no-repeat; }

ul{
margin: 0px;
padding: 0px;
list-style-type: none;
}

li {
display: inline;
}

Oraz html:

<div class="solidblockmenu">
<ul>
<li class="jeden"><a href="index.php" rel="sb1"></a></li>
<li class="dwa"><a href="oferta.php" rel="sb2"></a></li>
<li class="trzy"><a href="inwestycje" rel="sb3"></a></li>
<li class="cztery"><a href="kontakt.php" rel="sb4"></a></li>
</ul>
</div>

Menu działa mi doskonale. Ale w momencie jak np jestem na podstronie oferta.php, chciałbym, aby aktywny był ten przycisk, tzn aby cały czas wyświetlał się "hover". Czy ktoś wie jak to zrobić ?

Szukam, szukam i lipa. Dzięki z góry za pomoc

Rafał

[giker]

Ja to robię zawsze tak, że ustalam klasę np .active

li.jeden a:hover, li.jeden a.active {background: url(tlo/ofirmie-d.gif) no-repeat;}

I później do aktywnego linku dopisuję:

<div class="solidblockmenu">
<ul>
<li class="jeden active"><a href="index.php" rel="sb1"></a></li>
<li class="dwa"><a href="oferta.php" rel="sb2"></a></li>
<li class="trzy"><a href="inwestycje" rel="sb3"></a></li>
<li class="cztery"><a href="kontakt.php" rel="sb4"></a></li>
</ul>
</div>

To co Ty tutaj chcesz osiągnąć nie zadziała, bo a:active oznacza tylko moment kliknięcia

[zecke]

Hej. Dzięki Giker. Ale Twój sposób też mi nie działa, dałem i tak:

<li class="jeden [b]active[/b]"><a href="index.php" rel="sb1"></a></li>

i tak:

<li class="jeden active"><a href="index.php" rel="sb1"></a></li>

Jesteś pewien że tak to ma wyglądać ?

[giker]

A to wkleiłeś?

li.jeden a:hover, li.jeden a.active {background: url(tlo/ofirmie-d.gif) no-repeat;}

drugie jest a.active (a kropka active) - oznacza klasę, a nie pseudoselector (jak :hover)

Dokładnie to znaczy, że elementy z li.jeden a:hover (najechane myszką) mają wyglądać tak jak elementy li.jeden a.active (z klasą class="active").

[zecke]

Dokładnie tak zrobiłem:

li.jeden a:hover, li.jeden a.active {background: url(tlo/ofirmie-d.gif) no-repeat;}

i

<li class="jeden active"><a href="index.php" rel="sb1"></a></li>

Ale nadaj chyba coś jest nie tak, bo po kliknięciu nie wyświetla mi "ofirmie-d", ale "ofirmie-b"...

[giker]

		<style type="text/css" media="screen">
		a:hover, a.active {font-weight: bold;}		
	</style>
	<a href="test.html">TEST</a><br />
	<a href="test.html" class="jeden active">TEST</a>

To działa - czyli pierwszy link tylko po najechaniu jest gruby, a drugi ma clasę "active" i jest gruby cały czas.

Tutaj niema nic co mogłby niedziałać ;/

Wyślij mi na priva linka i sprawdzę co masz nie tak.

[cichy380]

popełniacie BŁĄD, ponieważ definiujecie klasę dla znacznika <a/> a w kodzie HTML klasę wpisujecie w <li/>.

czyli w kodzie powinno być:

<li class="jeden"><a href="index.php" class="active" rel="sb1"></a></li>