Propriété a:active ne fonctionne pas

Bonjour,

J'ai créé un style pour un menu avec le CSS suivant pour l'affichage des menus.

#horizmenu li {
	z-index: 3;
	position: relative;
	float: left;
	left: 0px;
	top: 10px;
	width: auto;
	list-style: none;
	text-align: center;
	font-size: 1em;
	font-weight: bold;
}

#horizmenu li a {
	text-decoration: none;
	color: #fff;
	display: block;
}

#horizmenu ul {
	margin:-10px 0 -7px;
	padding:0;
	text-align:right;
}

#horizmenu ul li a:link,#horizmenu ul li a:visited {
	background:#97a534;
	padding:10px 22px;
	line-height:1.65em;
}

#horizmenu ul li a:hover,#horizmenu ul li a:active,#horizmenu ul li a:focus {
	background:#becd3c;
	border-bottom:solid 4px #fff;
}

Mon problème est que la propriété a:active ne fonctionne pas. Mon site est visible sur http://devt.ove.asso.fr/www.
Si quelqu'un peut m'aider, ce serait top !!

Modifié par nataliedoume (07 Jan 2009 - 13:57)

Bonjour et bienvenue parmi nous, nataliedoume

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle.

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation

Bonjour,

Le style a l'air de bien fonctionner. Tu répètes des styles inutilement vu que la seule différence entre le style pour :active et le style appliqué à :hover, :focus et :active est le changement de couleur de la bordure (il te faudrait une seule ligne de code spécifique au style :active pour apporter cette modification...), mais techniquement ça fonctionne parfaitement.

Ma main à couper que tu n'as pas compris à quoi sert la pseudo-classe :active pour les liens.
Et pour ce que tu cherches à réaliser (que tu n'as pas précisé ici mais je le devine et ça n'a rien à voir avec :active...), la FAQ du forum en parle.

Florent V. a écrit :
Ma main à couper que tu n'as pas compris à quoi sert la pseudo-classe :active pour les liens.

Tu as oublié de lui expliquer à quoi sert cette pseudo-classe !

@nataliedoume : :active permet de modifier la mise en forme d'un lien au moment où il est cliqué.
Modifié par Noix de Coco (07 Jan 2009 - 15:38)

Noix de Coco a écrit :
Tu as oublié de lui expliquer à quoi sert cette pseudo-classe !

Je n'ai pas oublié, je me suis contenté de ne pas le faire.

Noix de Coco a écrit :
@nataliedoume : :active permet de modifier la mise en forme d'un lien au moment où il est cliqué.

Pas seulement d'un lien, même si c'est l'usage principal.

Bonjour,
Ce message est pour Florent V.
Suite à sa réponse : "Le style a l'air de bien fonctionner. Tu répètes des styles inutilement vu que la seule différence entre le style pour :active et le style appliqué à :hover, :focus et :active est le changement de couleur de la bordure (il te faudrait une seule ligne de code spécifique au style :active pour apporter cette modification...), mais techniquement ça fonctionne parfaitement. Ma main à couper que tu n'as pas compris à quoi sert la pseudo-classe :active pour les liens. cligne
Et pour ce que tu cherches à réaliser (que tu n'as pas précisé ici mais je le devine et ça n'a rien à voir avec :active...), la FAQ du forum en parle. "


Voila ce que je cherche à réaliser : je veux que le menu actif s'affiche différemment des menus non actifs quand je suis sur la page concernée. Je pensais que la propriété a:active était la bonne : en fait j'ai toujours fait comme ça... Peux-tu m'éclairer ?
D'avance merci !
Modifié par nataliedoume (12 Jan 2009 - 16:00)

Bonjour nathaliedoume,

Concernant la pseudo-classe active, un peu de lecture

a écrit :
La pseudo-classe :active, qui est appliquée quand l'utilisateur active un élément. Par exemple, entre le moment où l'utilisateur presse le bouton de la souris et le relâche.

Il s'agit donc d'une effet pour le moins fugitif, éphémère, ponctuel...
A priori aux antipodes de ce que tu cherches à faire, ce que Florent tentait de te faire remarquer (et te conseillait en substance de chercher...):

Florent V. a écrit :
Ma main à couper que tu n'as pas compris à quoi sert la pseudo-classe :active pour les liens.

Toujours en subtance Florent t'a indiqué que ce que tu cherches à faire se trouve dans la FAQ...

Florent V. a écrit :
Et pour ce que tu cherches à réaliser (que tu n'as pas précisé ici mais je le devine et ça n'a rien à voir avec :active...), la FAQ du forum en parle.

Tu n'as pas cherché/trouvé la FAQ ?...

Nombre de sujets sur le forum (et sur le web) traitent également de diverses techniques (statiques ou dynamiques) pour parvenir à ce résultat, une petite recherche devrait te fournir d'excellents résultats

Bon courage,
Cdt,
Sylvain
Modifié par 6l20 (12 Jan 2009 - 17:04)

Bonjour
Et merci beaucoup pour ta réponse !
Je vais creuser de ce côté là

Natalie

Bonjour,
alors, j'ai testé la solution proposée dans la FAQ, mais ça ne fonctionne toujours pas.
Voici le code généré :

<div id="horizmenu" class="chorizmenu">
<ul class="menu">
<li class="item1"><a href="http://devt.ove.asso.fr/www/"><span>Accueil</span></a></li><li class="item81"><a href="/www/index.php?option=com_content&view=section&layout=blog&id=2&Itemid=81"><span>Actualités</span></a></li>
<li class="item82"><a href="/www/index.php?option=com_content&view=article&id=23&Itemid=82"><span>Qui sommes-nous ?</span></a></li>
<li class="item84"><a href="/www/index.php?option=com_wrapper&view=wrapper&Itemid=84"><span>Structures</span></a></li>
<li class="item85"><a href="/www/index.php?option=com_content&view=article&id=8&Itemid=85"><span>Partenaires</span></a></li>
<li id="current" class="active item86"><a href="/www/index.php?option=com_content&view=article&id=9&Itemid=86"><span>Publications</span></a></li>
<li class="item87"><a href="/www/index.php?option=com_content&view=article&id=11&Itemid=87"><span>Emploi</span></a></li>
<li class="item80"><a href="/www/index.php?option=com_contact&view=contact&id=1&Itemid=80"><span>Contact</span></a></li>
<li class="item90"><a href="/www/index.php?option=com_content&view=article&id=32&Itemid=90"><span>Contribuer</span></a></li>
</ul>
</div>

Dans mon exemple, je suis sur la page "Publications" et le menu est bien marqué id ="current"

Je me suis inspirée de la FAQ pour modifier la feuille de styles. Voici ce que ça donne :

/* menu haut */

#horizmenu li {
	z-index: 3;
	position: relative;
	float: left;
	left: 0px;
	top: 10px;
	width: auto;
	list-style: none;
	text-align: center;
	font-size: 1em;
	font-weight: bold;
}

#horizmenu li a {
	text-decoration: none;
	color: #fff;
	display: block;
}

#horizmenu ul {
	margin:-10px 0 -7px;
	padding:0;
	text-align:right;
}

#horizmenu ul li a:link,#horizmenu ul li a:visited {
	background:#97a534;
	padding:10px 22px;
	line-height:1.65em;
}

#horizmenu ul li a:hover,#horizmenu ul li a:active,#horizmenu ul li a:focus {
	background:#becd3c;
	border-bottom:solid 4px #fff;
}

#current ul li a{
	background:#becd3c;
	border-bottom:solid 4px #fff;
}

Seulement voilà, ça ne fonctionne pas. Quelqu'un peut-il me dire où est mon erreur ? Merci !!!

nataliedoume a écrit :
Dans mon exemple, je suis sur la page "Publications" et le menu est bien marqué id ="current"

Et où sont tes styles CSS pour l'identifiant #current? Ce n'est pas parce que tu as placé un identifiant sur un élément qu'il va prendre une mise en forme comme par magie.

Edit: ah ok j'avais pas vu, je cherchais un #current au milieu d'un sélecteur et pas au début, du coup il m'a échappé.

nataliedoume a écrit :
Quelqu'un peut-il me dire où est mon erreur ?

L'erreur est soit un oubli, soit un visionnage trop fréquent de Merlin l'enchanteur.

Edit: voir la bonne réponse de Yasashii ci-dessous.
Modifié par Florent V. (16 Jan 2009 - 14:22)

Tu devrais revoir les notions de cascades, ton problème viens de là.

Tu as écris :

#current ul li a{
	background:#becd3c;
	border-bottom:solid 4px #fff;
}

Le code correct correspondant à ton code HTML est plutôt :

ul li#current a{
	background:#becd3c;
	border-bottom:solid 4px #fff;
}

Merci Yasashii !
En effet les notions de cascades....
En tous cas ça fonctionne, je vais lire un peu de doc là-dessus !