28172 sujets

CSS et mise en forme, CSS3

Problème compatibilité IE/FF : a:visited a:active

Bonjour,

Après avoir lu le tutoriel sur l'ordre de positionnement pour la définitions des styles de liens, je n'arrive toujours pas à réaliser ce que je souhaite.

J'utilise un menu avec rollover qui utilise la méthode des portes coulissantes. Donc le a:hover fonctionne sans problème. Mais ce que je souhaite faire est :

Que quand on clique sur une rubrique du menu celle-ci reste de la couleur du hover jusqu'à ce qu'on clique sur une autre rubrique.

J'ai donc essayé :


a#menu1 {
	background: url(images/jdm-coulissant.png) left top no-repeat;
	color: #333;
	display: block;
	font-size: 1em;
	font-weight: bold;	
	height: 38px;
	text-decoration: none;
	width: 120px;
	padding: 4px 0;
}

a#menu1:hover{
	background: url(images/jdm-coulissant.png) right top no-repeat;
}
	
a#menu1:visited {
	background: url(images/jdm-coulissant.png) right top no-repeat;
	
	

}


D'une part ça ne fonctionne pas exactement comme je le voudrais et surtout sous IE, le lien visité ne reste pas de la couleur voulu. Quelqu'un aurait il une idée pour régler cela ?

Merci pour votre aide.
Les pseudo classes définissent un état passager (survol de la souris) et non permanent.

Pour que l'état modifié subsiste après que l'action de la pseudo class soit terminée (le survol passe sur un autre élément), il faudra utiliser un javascript pour, au survol d'un élément, 1. affecter une class "survol" 2. retirer toutes les class survol qui pourraient déjà avoir été affetée lors d'un précédent survol.


EDIT : OOPS j'ai mal compris ta question.
Ce que tu souhaites c'est pouvoir signaler la page en cours, indépendament du survol. Pour cela il te faudra (au chargement de la page) ajouter une classe "en-cours" à la page en cours. Il y a un tuto sur le site et de nombreux autres topics qui en parlent.
Modifié par Laurie-Anne (12 Mar 2009 - 14:46)
Bon je reviens vers vous après avoir testé ça : 

1. Sur chaque page PHP, déclarer une variable comme ceci:

<php $nav_en_cours = 'rubrique1'; ?>

2. Dans le fichier PHP qui contient votre menu, le code du menu devra ressembler à ceci:

<ul id="navigation">
	<li<?php if ($nav_en_cours == 'rubrique1') {echo ' id="en-cours"';} ?>><a href="/rub1/">Rubrique 1</a></li>
	<li<?php if ($nav_en_cours == 'rubrique2') {echo ' id="en-cours"';} ?>><a href="/rub2/">Rubrique 2</a></li>
</ul>


Même adapté dans mon cas :
- Mon menu pointe vers des ancres dans la page (ex : <li><a id="menu1" href="#primary" rel="primary"></a></li> )
Après avoir ajouté une class #en-cours1 dans mon fichier CSS, j'ai donc tenté de remplacer par :

<li><?php if ($nav_en_cours == 'rubrique1') {echo ' <a id="en-cours1" href="#primary" rel="primary"></a>';} ?><a id="menu1" href="#primary" rel="primary"></a></li>


Il me reste toujours l'état au survol mais pas d'état quand je suis sur la page. La méthode en javascript pourrait être intéressante mais je n'ai rien trouver pour m'aider.

Une idée s'il vous plait ?? Smiley smile
Bonjour,

Alors rapidement:

1. Toi, à vue de nez, t'es une bille en PHP. Là, pas de secret: il faut soit apprendre, soit faire sans, mais pas bidouiller du code en espérant que ça marche (sans comprendre pourquoi ça marche ou pas).

2. Si les liens pointent vers des ancres dans la page, c'est une autre affaire. Le code PHP est exécuté au chargement de la page, et pour une page donnée tu as une seule variable identifiant la «page en cours», donc tu ne peux pas modifier les styles des liens lorsque tu restes sur la même page.

3. Par contre, ça pourra se faire en JavaScript. Même topo que pour PHP: si les bases de JavaScript ne sont pas connues, il faut les apprendre, ou bien faire sans (c'est à dire pas faire du tout).
Merci pour tes lumières, je vais jeter un coup d'oeil coté javascript.

Une réponse donnée sur un ton aussi aimable ne se refuse pas !
Sujet clos
Aller à