[Résolu] Boutons réactifs, état "visité".

[Zibou]

Bonjour à tous,

Le retour ! Un autre petit problème.

J'ai donc fait pas mal de « boutons réactifs », comme présentés dans l'ouvrage de Jean-Marc Juin. Dans un premier temps, il n'y en avait qu'un seul et unique modèle. Pas de problème.

Puis, dans une autre page, il m'a fallu créer plusieurs règles CSS pour plusieurs boutons de tailles et de couleurs différentes. Tous sont sur la même architecture :

- Pour le bouton à l'état non survolé puis visité : .bouton_a :link, a/visited ....
- Pour le même, à l'état survolé : .bouton_a :hover ....

On a donc les classes a, b, c, ..., f , introduites comme suit :

<a title="XX" class="bouton bouton_a" href="xxxxxx.html" target="_blank"><small>Xxxxxxxxxxxxx</small></a>

Sur Kompozer : tout est OK.

Ouvert sous Firefox :
- tout fonctionne parfaitement pour les boutons de la classe " a ".
- tout est Ok en état " non survolé " ou " survolé ", pour les boutons des autres classes (b, c, d, e, f).
- mais aussitôt actionnés, ceux-ci ne prennent pas la forme " visité " (identique donc à " non survolé ") de leur classe ; mais prennent la forme de la classe " a ", qui semble donc avoir autorité sur les autres !

Que faire, que faire ... ?

[chinon37]

Bonjour,

Peut-on voir la page en ligne ou avoir le code source de la page ainsi que les css?
Parce que comme ça, difficile de s'y retrouver..

[Zibou]

Bon, problème résolu !

À force de ma gratter la tête, de me forcer à essayer de tenter de réfléchir, à chercher à comprendre la logique d'une règle, j'ai donc fini par résoudre ce problème.

Mais comme ceci peut intéresser quelques uns, je ne me contente pas de fermer la discution, j'essaye d'expliquer le problème (en étant le plus clair possible, ce qui n'est pas évident !) :

Il doit y avoir, dans ma page (d'un futur et hypothétique site), des liens sous forme de « boutons réactifs » de tailles et de couleurs diverses. Mais tous les liens de cette page ne sont pas sous forme de boutons.

Pour « habiller » ces liens, j'avais suivi les conseils de Ymai das un post précédent : Bouton-web : un clic, deux pages ouvertes (création de règles CSS pour habiller ces liens, et d'une classe pour désigner les liens devant âtre habillés).

Ce qui donnait donc une règle CSS comme suit (faite avec CaScadeS, bien évidemment) :

- État « non survolé » (autrement dit, état initial) :

.bouton_a:link { border: 0.1em outset #666666;
margin: xxxx ;
text-align: xxxx ;
text-transform: xxxx ;
background-repeat: no-repeat;
background-position: left center;
text-decoration: none;
font-style: normal;
font-family: Arial,Helvetica,sans-serif;
color: xxxx ;
background-color: xxxx ;
line-height: xxxx ;
font-size: xxxx ;
float: none;
position: relative;
display: table-cell;
font-weight: bold;
height: xxxx px;
width: xxxx px;
}

- État « survolé » (lorsque le curseur passe dessus) :

.bouton_a:hover { border: 0.1em outset #666666;
idem, sauf la couleur de fond et la bordure.
}

Et enfin, état « visité » (après avoir cliqué sur le lien):

.bouton_a:visited { border: 0.1em inset #666666;
idem état non « survolé ».
}

Je n'ai pas testé la page à ce moment là (et j'ai eu grandement tort), mais, pour simplifier, l'état « visité » et « non survolé » étant identique, j'ai alors modifié la première règle comme je pensais l'avoir compris à la lecture de l'ouvrage de Jean-Marc JUIN, puis supprimé la dernière règle, devenue sans objet. Ce qui donnait :

.bouton_a:link, _a:visited { border: 0.1em outset #666666;
idem ...

Et comme je voulais 6 modèles de liens-boutons réactifs différents, j'avais donc recopié les règles ci-dessus avec modification de la classe : .bouton_b ; .bouton_c ; etc.

Dans le code source, lorsqu'un lien était concerné par cet habillage, il était désigné ainsi :

<a title="Xxxxxxxxxxx."
class="bouton_a" href="xxxxs_xxxxxx.html"
target="_blank"><small>Xxxxx xxxxxx</small></a>

(habillage ici défini pour les règles « .bouton_a »).

Et c'est là que commencèrent les problèmes !

- Pour les boutons de classe « a », tout fonctionnait sans problème.

- Pour les autres (« b » à « f »), tout allait bien tant que je n'avais pas « cliqué » sur l'un de ces boutons, qui prenait alors la forme et la couleur d'un bouton de classe « a » !

Je me suis demandé longtemps pourquoi l'état « visité » de la classe « a » prenait le dessus sur les autres ? Sans comprendre que c'était sans doute l'état « non survolé » de la classe « a » qui s'imposait, puisque, en fait, toutes les règles « visitée » n'existaient pas, en raison d'une faute dans la rédaction du titre des règles :

Au lieu de :

.bouton_a:link, _a:visited { border: 0.1em outset #666666;
xxxxx...

il fallait écrire :

.bouton_a:link, .bouton_a:visited { border: 0.1em outset #666666;
xxxxx...

et alors, tout rentrait dans l'ordre.

Amical salut à tous,

et longue vie à ce forum.

Zibou.

[Ymai]

Belle synthèse
Merci de la part des futurs visiteurs du forum et qui viendront avec une question similaire.