Discussion :

[Gnutella]

Bonjours à tous et à toutes,


J'ai un petit problème dans mon css pour un menu.

voila le code

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
#menu20 {
   float: left;
   width: 220px;
   margin-left: 4px;
   border: 2px solid white;
 
}
.menu20 h3
{   
   color: #FFFFFF;
   font-family:"Comic Sans MS" Arial, "Arial Black", "Times New Roman", Times, serif;
   text-align: center;
}
 
.menu20 ul {
list-style: none;
margin: 0;
padding: 2;
font-family: "Comic Sans MS" Arial, "Arial Black", "Times New Roman", Times, serif;
}
 
.menu20 li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 22px;
text-decoration: none;
} 
 
.menu20 li a:link, #menu20 li a:visited {
color: #FFFFFF;
display: block;
background: url(images/menurougetransp.gif);
background-repeat: no-repeat;
padding: 10px 0 0 35px;
}
 
.menu20 li a:hover {
color: #DDDDDD;
background: url(images/menurougetransp.gif) 0 -32px;
background-repeat: no-repeat;
padding: 10px 0 0 35px;
}

Mon problème est le suivant, sous firefox quand je visite un des liens du menu le survolage du lien ne marche plus.

Je pense que c'est mon code qui l'emèche mais j'ai bidouillé et j'ai pas réussi.
Je voudrais simplement que quand je survole le lien que je l'ai visité ou pas il passe sur la commande hover..

Un peut compliqué comme explication.; Pour mieux comprendre allez voir ici http://samtheplatypus.free.fr/index.html


Merci poru ceux qui m'aiderons..

[Jumano]

Bonsoir,
Peux tu nous montrer le code de ta page ...

[Gnutella]

Le code de ma page...

code du menu:

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
15
16
17
18
19
<div id="menu20"> 
 
           <div class="menu20"> 
               <!-- Cadre correspondant à un sous-menu -->
             <ul>
               <strong>
                                    <li><a title="Retour à l'accueil" href="../../index.html">Accueil</a></li>
                                    <li><a title="Biographie" href="../../bio.html">Bio Des Artistes</a></li>
                                    <li><a title="Les compos" href="../../compos.html">Les Compos</a></li>
                                    <li><a title="Photos" href="../../fotos.html">Photothèque</a></li>
                                    <li><a title="Concerts" href="../../concert.html">Concerts</a></li>
                                    <li><a title="Nos amis" href="../../amis.html">Amis</a></li>
                                    <li><a title="Partenaires" href="../../partenaire.html">Partenaires</a></li>
                                    <li><a title="Nous contacter" href="../../contact.html">Nous Contacter</a></li>
                                    <li><a title="Le Forum" href="../../phpBB2/index.php">Forum</a></li>
                </strong>
             </ul>
          </div>
</div>

[12monkeys]

Bonjour

C'est parce que tu ne définis pas la pseudo classe active.

LoVe HAte ==> ceci est un petit moyen mnemotechnique pour retenir dans quel ordre il est préférable de déclarer les pseudo classes, soit :

• :link
• :visited
• :hover
• :active

Tu n'as défini aucune image en background pour le lien "active"; d'ailleurs ton problème surgit autant sous IE que Firefox.

[Candygirl]

Bonjour,

je pencherais pour un problème de spécificité de tes sélecteurs:

Code :

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

1
2
3
4
5
6
7
8
.menu20 li a:link, #menu20 li a:visited {
[...]
}

.menu20 li a:hover {
[...]
}

Code html :

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

1
2
3
<div id="menu20"> 
 
           <div class="menu20">

Dans ton html, tu définis un id et une class du même nom.

Dans ton css, tu fais référence à ta class menu20 pour toutes tes déclarations de liens sauf le :visited pour lequel tu fais référence à ton id. Vu les règles de calcul de spécificité des sélecteurs, ta déclaration du :visited a plus de poids et est donc prioritaire sur le :hover quand bien même ce denier est placé après.

Changer ton #menu20 en .menu20 dans ton:visited devrait règler ton problème.

[12monkeys]

Bien vu Candygirl

Je n'avais pas vu ce point En plus j'ai dit une grosse bétise, :active n'a rien à voir là dedans, c'est bien :visited qui pose problème...

[Gnutella]

J'essaye merci..

[Gnutella]

Un gros bisous a vous merci...

Un point a la place d'un "#" il y a pas plus simple comme explication..


Merci encore sa faisait bien 1 semaine que je cherché la solution :d