Discussion :

[souviron34]

Bonjour à tous

En train de terminer mon site, il me reste un - petit - probleme :

J'ai des déclarations de style générales et particulières en ce qui concerne des <a> et <a href>, du style :

• a:active { ..}
  
  
• menu > a:active {..}

Ca marche très bien dans les différentes parties de ma page.

Maintenant j'ai une fenêtre modale par dessus à un moment donné. Dans cette fenêtre modale il y a une table, et une colonne de cette table est fabriquée dynamiquement et est elle-même une table de liens.

Or tout ce que j'essaye de faire au niveau général n'a l'air d'avoir aucune influence au niveau de ces liens quant à leur apparence...

Comme un exemple vaut mille mots, voici en gros le principe :

Dans index.php, j'ai , en haut, dans les styles dans le head :

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
.menu > a:visited {color:lightgrey; background-color:transparent; text-decoration:none;font-weight:normal;font-style:italic;}
.menu > a:hover   {color:darkgrey; background-color:transparent; text-decoration:none;font-weight:normal;font-style:italic;}
.menu > a:active  {color:white; background-color:transparent; text-decoration:none;font-weight:bold;font-style:italic;}

Puis la page se construit, et à un moment donné j'ai :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="modalag" class="modal">
    <div class="modal-content">
        <div class="modal-body" class="mybody">
             <table class="mytable">
                 <tr>
                     <td class="td1">
                            <table id="tableag"  class="tabl" >
                            <?php 
                                      for ( $i1 = 0 ; $i1 < 8 ; $i1++ ) {
                                     echo '<tr><td id="c'.$i1.'" class="cl" ></td></tr>' ;
                                     }
                            ?>
                            </table>
                            ...

Puis, sur l'appui d'un bouton, quand on affiche la modale, on va remplir les cellulles de cette table en javascript, avec quelque chose comme : **

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function ShowModal ( abr ) {
  var n, cell ;
 
   for (n = 0 ; n < 8 ; n++ ) {
      var ss = "c" + n ;
 
         cell = document.getElementById(ss) ;
  	 cell.innerHTML = "<a id=\"ln"+n+"\" href=\"javascript:SWk("+E[n]+");\" class=\"a4\" ><b>" + LS[n] + "</b></a><br><i>(s " + E[n] + ")</i>" ;
	 cell.onclick = SWk(E[n]) ; 
   }
 
  Show ( "shade" );
  Show ( "modal" );
}

Or voilà, quand la modale s'affiche je me retrouve avec les caractères des liens en bleu (défaut de html) soulignés, et rien n'indique quand on a cliqué dessus (soit active, soit visited).

Quelqu'un aurait-il une idée de ce qu'il faudrait mettre ou comment, ou si c'est normal qu'une modale n'hérite pas de son "créateur" ??




Merci d'avance






** : les tableaux E et LS sont des globaux dans javascript.

[Invité]

Bonjour,

le code CSS que tu montres (.menu > a:...{...}) ne concerne que les <a> enfants directs d'une classe "menu".

Où as-tu défini des styles génériques ?

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
a { ... }
a:hover { ... }
a:active { ... }
a:focus { ... }

ou spécifiques à la modale (par exemple) ?

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
.modal-content a { ... }
...

[Ecared]

Salut,

Alors tout d'abord ici c'est un forum CSS donc on préféra voir le code directement généré par le navigateur et non le code php.

Pour ton problème le .menu > a:hover{...} correspond a: "prends tous les liens qui ont pour parents la div .menu" étant donné que ceux là non pas comme parent direct ta div .menu il ne le prend pas en compte. Si tu veux que tout les liens de ton site est le même comportement enlève simplement le ".menu >" si c'est seulement dans cette partie de page que tu le veux tu peux aussi faire .menu a:hover{...}

[souviron34]

OK, excusez-moi du temps mis à répondre, mais d'une part j'ai le décalage horaire et d'autre part je fais d'autres choses à côté...

Où as-tu défini des styles génériques ?

C'était défini au-dessus...

ou spécifiques à la modale (par exemple) ?

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
.modal-content a { ... }
...

Tu m'as sauvé la vie ..

J'ai un peu de mal à comprendre et assimiler les sélecteurs et les signes de redirection...

Grâce à toi ça marche.. Merci



Par contre, mais j'ai lu que c'etait un "feature" de firefox (j'ai testé avec IE et Edge et ça marche correct mais j'ai pas testé en modifiant les préférences) si on a sélectionné "ne pas garder l'historique" dans les préférences (et peut-être même sans ça) le "visited" n'est jamais pris en compte..

Alors tout d'abord ici c'est un forum CSS donc on préféra voir le code directement généré par le navigateur et non le code php.

Désolé mais je suis tout nouveau sur cette partie du forum - et je n'y reviendrais sans doute plus dans un proche avenir - donc je ne savais pas..

Mais merci de me le dire..



A vous 2 merci..

Résolu..