28220 sujets

CSS et mise en forme, CSS3

Couleur restante sur un lien selectionné

Bonjour à tous,

J'ai cherché un peu sur le forum, mais pas vraiment trouvé ce que je veux, et ca doit pas etre trop compliqué, mais bon.


a{color: #FF3300;}
a:visited{background-color: #3300CC;}
a:hover{color: #CCCC00;}



<a href="#">Lien  numéro 1</a><br>
<a href="#">Lien numéro 2</a><br>
<a href="#">Lien  numéro 2</a>


La couleur des liens est rouge.

Quand je clique sur ex: le numéro 1, j'aimerai que celui ci passe par exemple de couleur grise et reste gris et ne soit plus cliquable,

si je clique sur le numéro 2, il passe au gris et le numéro 1 à nouveau au rouge etc....

Merci de votre aide
Smiley confused
Les CSS servent à faire de la mise en forme, et ne sont pas censés avoir une influence sur le comportement des éléments... Du coup, non, désactiver un lien ça n'est pas possible.

Par contre, si tu présentes ta CSS dans l'ordre suivant :
a {color: #FF3300;}
a:hover, a:focus {color: #CCCC00;}
a:visited {background-color: #3300CC;}

Le survol d'un lien déjà visité ne le fera pas repasser en rouge (euh non, en jaune ?), car la propriété appliquée en dernier est celle pour les liens déjà visités, et elle prend le pas sur la propriété pour les liens survolés.

Ça ne désactive pas le lien (intérêt de la chose ???), par contre.
gesualda a écrit :
Voici l'exemple du lien de ce à quoi je fais allusion
dans la partie menu supérieur et que je voudrais bien produire.

Si tu avais jeté un coup d'oeil au code de la page en question, tu aurais eu ta réponse :
C'est ce genre de structure.
Première page :
<ul id="navigation">
	<li>Première page</li>
	<li><a href="page2.html">Deuxième page</a></li>
	<li><a href="page3.html">Troisième page</a></li>
</ul>

Deuxième page :
<ul id="navigation">
	<li><a href="page1.html">Première page</a></li>
	<li>Deuxième page</li>
	<li><a href="page3.html">Troisième page</a></li>
</ul>

Troisième page :
<ul id="navigation">
	<li><a href="page1.html">Première page</a></li>
	<li><a href="page2.html">Deuxième page</a></li>
	<li>Troisième page</li>
</ul>


Et ensuite, en CSS, c'est du :
a {color: red;}
a:hover {color: gray;}
/* pas de a:visited */


Enfin bref, ce comportement n'a rien à voir avec les CSS, vu que tout est dans le code de chaque page. Le lien menant à la page en cours est tout bonnement supprimé (seul le texte reste).
gesualda a écrit :
Salut mpop,

Voici l'exemple du lien de ce à quoi je fais allusion

dans la partie menu supérieur et que je voudrais bien produire.

Smiley cligne

Salut,

ce que tu veux réaliser, je l'ai fait en PHP sur mon site test dans le menu en onglets (voir >>ici<<)

Dans ton cas le principe est le même, le code PHP qui te permet de déterminer le lien actif est le suivant :
<a href="lien1" 
<?php 
if($_SERVER['SCRIPT_NAME'] == "lien1") 
echo ' class="lienActif"'; 
?>
>lien1</a>
<a href="lien2" 
<?php 
if($_SERVER['SCRIPT_NAME'] == "lien2") 
echo ' class="lienActif"'; 
?>
>lien2</a>
<a href="lien3" 
<?php 
if($_SERVER['SCRIPT_NAME'] == "lien3") 
echo ' class="lienActif"'; 
?>>lien3</a>

La variable d'environnement $_SERVER['SCRIPT_NAME'] permet de déterminer si la page appelée par le lien est active.
Si oui, alors la classe "lienActif" est attribué au lien.
Si non le lien garde les propriétés CSS déterminé dans ta feuille de style.

Celle-ci peut se traduire comme çà :
#menu a {
color: red;
text-decoration: none;
}
#menu a:hover, #menu a.lienActif {
color: silver;
text-decoration: none;
}


Voilà pour la solution en PHP.

@+ fafane84
fafane84 a écrit :
Voilà pour la solution en PHP.

Pas fait de PHP depuis longtemps, mais il me semble qu'il doit y avoir moyen d'optimiser ça... surtout lorsqu'on a une quinzaine de liens (auquel cas ça risque de faire un code un peu lourd...).

Par contre ta solution se contente de rajouter une classe. Si on veut "désactiver" le lien, il faut également prévoir de ne produire les balises pour le lien que dans les cas où la page en cours ne correspond pas au lien.
Sujet clos
Aller à