Se connecter / S'enregistrer
Votre question

[RESOLU] Menu déroulant css clignote

Tags :
  • CSS
  • Programmation
Dernière réponse : dans Programmation
7 Avril 2007 17:23:05

Coucou,
Suite à mon post pour centrer mon site internet j'ai de nouveau un soucis.
Je voulais réaliser un menu déroulant, c'est fait. Je l'ai fait en css avec une partie de JS pour que le menu disparaisse quand on "sort du champ". Le soucis c'est que le menu est sensible et que l'image de dessous vient clignoter lors du passage de la souris.
Problème uniquement dans mozilla.
J'ai mis des z-index pour placer mes éléments mais visiblement ca ne marche pas.

Est-ce que quelqu'un pourrait m'aider à résoudre ce problème SVP?
Voici mon code css :

#global {
position:absolute;
left: 50%;
top: 50%;
width: 749px;
height: 595px;
margin-top: -297px; /* moitié de la hauteur */
margin-left: -374px; /* moitié de la largeur */
z-index: 1;
}

.haut {
width: 749px ;
height: 135px;
top: 0px;

}

.gauche {
width: 9px;
height: 460px;
position: absolute;
top: 135px;
}
.droite {
width: 7px;
height: 460px;
position: absolute;
top: 135px;
left: 740px;
}
.centre {
width: 733px;
height: 456px;
position: absolute;
top: 135px;
left: 7px;
}
.bas {
width: 733px;
heigth: 4px;
position: absolute;
left: 7px;
top: 591px;
}
.champstexte {
width:700px;
Height:420px;
position: absolute;
top :150px;
left: 20px;
z-index:10;
Overflow: auto;
scrollbar-face-color: #626C22;
scrollbar-highlight-color: #FFFFFF;
scrollbar-3dlight-color:#000000;
scrollbar-darkshadow-color: #000000;
scrollbar-shadow-color: #000000;
scrollbar-arrow-color: #91A144;
scrollbar-track-color: #91A144;
font-family: Arial, Verdana, sans-serif;
font-size: 11pt;
text-align: justify;
font-weight: bold;
color: #424F01;
padding: 0.2em;
}
h1 { /** gros titre */
font-family: Arial, Verdana, sans-serif; /* On se permet un changement de police : pas plus de deux par page, et à utiliser avec parcimonie (c'est le cas) */
color: white; /* Donc on utilise une police blanche pour que le texte soit visible */
font-variant : small-caps /* Et on les met en majuscules (les minuscules sont remplacées par des petites majuscules) */
padding: 0.3em; /* Espacement intérieur non nul pour que le texte ne colle pas à la bordure du cadre */
text-align: center; /* Le titre doit être centré ! */
letter-spacing: 0.3em; /* On espace les caractères pour que ce soit joli :-) */
}
h2 { /** Les titres de paragraphes */
text-decoration: underline; /* On souligne ces titres */
font-variant : small-caps /* Et on les met en majuscules (les minuscules sont remplacées par des petites majuscules) */
color: #626C22; /* Texte de couleur bleu très foncé, presque noir (donc lisible) */
}
h3 { /** Les sous-titres (titres de niveau 3) */
color: #626C22; /* Texte de couleur bleu, plus clair que le titre h2 */
font-style: italic; /* Texte en italique */
text-indent: 1em; /* Et indenté par rapport aux autres titres et paragraphes, pour montrer la hierarchie */
}

body {
margin: 0;
padding: 0;
font: 80% arial, sans-serif;
}


dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
width: 90px;
height: 18px;
}
#menu {
position: absolute; /* placement du menu, à modifier selon vos besoins */
top: 110px;
margin-left: 7px;
left: 5px;
z-index:100;
width: 100%; /* correction pour Opera */
}
#menu dl {
float: left;
width: 90px;
height: 18px;
}
#menu dt {/* fonctionne sur tous les blocs des sous menus*/
cursor: pointer;
text-align: center;
color: white;
font-weight: bold;
background: #727D37;
border: 1px solid gray;
margin: 1px;
height: 18px;
width: 90px;
}
#menu dd { /* fonctionne sur les blocs sous menus*/
display: none;
border: 1px solid gray;
width: 90px;
height: 18px;
}
#menu li { /*fonctionne sur les textes des sous menus*/
text-align: center;
background: #95A449;
width: 90px;
height: 18px;
}
#menu li a, #menu dt a {/* fonctionne sur les liens directs accueil livre d'or*/
color: white;
text-decoration: none;
display: block;
height: 18px;
width: 90px;
border: 0 none;
}
#menu dt a:hover { /* fonctionne sur les liens directs accueil livre d'or*/
background: #95A449;
}
#menu li a:hover, #menu li a:focus, #menu dt a:focus {/* fonctionne sur les liens survolés des sous menus*/
background: #61730D;
width: 90px !important;
width: 88px;
height: 18px;
font-weight: bold;
}
:??: 

Autres pages sur : resolu menu deroulant css clignote

7 Avril 2007 18:42:21

En regardant bien le problème qui se pose on remarque que ca clignote, donc l'image de dessous repasse devant une demie seconde, juste au moment où la pointe du curseur passe entre deux sous menus.
Si ca peut vous aider à comprendre...
7 Avril 2007 21:51:08

Personne pour m'aider ???
8 Avril 2007 16:04:59

Problème résolu, merci
Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS