active link in css werkt niet

[sirkserac]

hallo,

heb een klein probleempje met mijn css, als ik op een pagina ben moet de linkknop van die pagina opgelicht blijven , maar dat gebeurt niet, iemand een idee wat ik fout doe?

hier de css code:

ul.nav {
	list-style: none; 
	border-top: none;
	margin-bottom: 15px;
}
ul.nav li {
	border-bottom: none;
}
ul.nav a, ul.nav a:visited { 
	padding: 5px 5px 5px 10px;
	display: block;
	width: 170px; 
	text-decoration: none;
	background-color: #0069b3;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus { 
	background-color: #c4d7eb;
	color: #333;
}

en de html:

<ul class="nav">
      <li><a href="index.html">Home</a></li>
      <li><a href="kaffee.html">Kaffee</a></li>
      <li><a href="fingerfood.html">Fingerfood</a></li>
      <li><a href="activiteiten.html">Activiteiten</a></li>
      <li><a href="tennis.html">Tennis</a></li>
      <li><a href="squash.html">Squash</a></li>
      <li><a href="live.html">Live sports</a></li>
      <li><a href="bluemoon.html">Blue Moon Belgium</a></li>
      <li><a href="contact.html">Contact</a></li>
</ul>

alvast bedankt

 

[pum]

a:active en a:focus werken alleen als je er op klikt. Als je wilt dat de link waarop je klikt zichtbaar blijft zul je een class mee moeten geven, en deze class stijlen. Per pagina kun je nu de active class meegeven. Wanneer je werkt met een menu en geen page refresh hebt kun je jQuery gebruiken om de class van het huidige element te verwijderen en aan het nieuwe element toe te voegen.

class mee geven aan anchor

<ul class="nav">
      <li><a href="index.html" class="active">Home</a></li>
      <li><a href="kaffee.html">Kaffee</a></li>
      <li><a href="fingerfood.html">Fingerfood</a></li>
      <li><a href="activiteiten.html">Activiteiten</a></li>
      <li><a href="tennis.html">Tennis</a></li>
      <li><a href="squash.html">Squash</a></li>
      <li><a href="live.html">Live sports</a></li>
      <li><a href="bluemoon.html">Blue Moon Belgium</a></li>
      <li><a href="contact.html">Contact</a></li>
</ul>

 

[sirkserac]

hey, bedankt voor je reactie, ik had dat al geprobeert met in de css ook .active toe te voegen en de juiste settings maar zonder resultaat. wat jquery betreft , daar heb ik geen enkele ervaring mee.

 

[csshunter]

Hoi sirkserac,
Ja, de oplossing van pum is correct, maar als je als class-definitie in de css zet:

.active { 
    background-color: #c4d7eb;
    color: #333333;
}

dan doet ie het niet.

Dat komt omdat de gewone menu-links zijn opgegeven met:

ul.nav a {
    ... (andere kleuren)
}

Volgens de voorrangsregels van css (de "specificiteit" van de css bij een bepaald element; de regels zijn wat ingewikkeld) krijgt de inkleuring van de gewone ul.nav a de voorrang boven de .active-kleuren: een ul.nav a is specifieker dan een algemene class.

==========
Maar als je er van maakt:

ul.nav a.active { 
    background-color: #c4d7eb;
    color: #333333;
}

dan is de ul.nav a.active weer specifieker dan de ul.nav a, en doet ie het wel.

• Test: actieve-menuknop.htm.

En in het algemeen is er gelukkig geen jQuery voor nodig: het gaat gewoon met de goede css.

• NB: als je het menu er in zet met een php-include, dan moet het wat anders; dat horen we dan wel.

Met vriendelijke groet,
CSShunter

 

[sirkserac]

yes bedankt, probleem was blijkbaar dat ik de font-weight met <b> in de list had gezet, dit verwijderd en font-weight bij in de css gezet en alles ok.

bedankt alleszins

 

[csshunter]

Ja, een font-weight kan beter in de css (of anders met <strong> in de html ipv <b> voor vet).
Maar dit kan niet de oorzaak van het niet werken van de .active-class zijn geweest; ik denk eerder aan een tikfoutje, dat toevallig of niet toevallig meteen verholpen werd met het plaatsen van de font-weight in de css.
In elk geval: probleem opgelost!

 

[sirkserac]

of een samenloop van een paar dingen he, toch bedankt