18073 sujets

Questions générales et questions de débutants

[resolu] Pourquoi le menu exemple clignote-t-il sous FF ?

Bonjour,

Il faut retirer le javascript des balises dd :
	<dl>			
		<dt onmouseover="javascript:montre('smenu1');">Menu 1</dt>
			<dd id="smenu1" >
Oui, mais justement, ce code est là, proposé par le tutoriel,
pour que le sous-menu s'efface quand la curseur le quitte...
Bonjour,
ybruant a écrit :
Oui, mais justement, ce code est là, proposé par le tutoriel,
pour que le sous-menu s'efface quand la curseur le quitte...


Ok, on pourrait modifier le code, mais je te propose de le faire sans javascript en ccs :

ajouter 
#menu dl:hover dd{display:block}
modifier 
#menu dd {
border: 1px solid gray;display:none
}

et retirer toute trace de javascript dans la page.
Maintenant ça fonctione sur tout les navigateurs récents sauf IE .

Pour IE on émule avec le fichiercsshover.htc
qui devra se trouver dans le même répertoire.

Pour l'appeler, ajouter dans le head:
 <!--[if lte IE 6]>

<style type="text/css" media="screen">
body {
behavior: url(csshover.htc);
}
</style>
<![ endif]-->

N'est accessible qu'à la souris. Je n'ai pas trouvé comment rendre les sous-menus visible pour IE avec javascript désactivé Smiley bawling

<edit à supprimer >Pour finir, modifier font: .75em au lieu de 80% pour avoir une dimention de police identique sur les différents navigateurs.</edit>
J'espère que maintenant, j'ai répondu juste Smiley confus
Modifié par chmel (06 Oct 2005 - 07:49)
Bonjour,

chmel a écrit :

Pour finir, modifier font: .75em au lieu de 80% pour avoir une dimention de police identique sur les différents navigateurs.
J'espère que maintenant, j'ai répondu juste Smiley confus



Ne pas dimininuer, ou le moins possible, la taille de police par défaut de l'utilisateur : la page peut devenir illisible.

Si j'ai agrandi ma taille par défaut dans mon navigateur pour répondre à mes besoins, je n'apprécie pas du tout qu'on me la réduise Smiley cligne

De toutes façons, la taille de police sera potentiellement différente d'un utilisateur à un autre. Si on y tient vraiment, ne pas descendre en dessous de 85%, pour diminuer les risques.
Modifié par Laurent Denis (02 Oct 2005 - 04:43)
Laurent Denis a écrit :
Bonjour,
Ne pas dimininuer, ou le moins possible, la taille de police par défaut de l'utilisateur : la page peut devenir illisible.

Merci de la précision. Pour réduire la largeur des sous-menu qui passent à la ligne sur écran 15' en 800X600, le mieux est de jouer ici :
#menu dl {
width: 11em;
}
a écrit :
Pour IE on émule avec le fichiercsshover.htc
qui devra se trouver dans le même répertoire.

Pour l'appeler, ajouter dans le head:
<!--[if IE]>
<style type="text/css" media="screen">
body {
behavior: url(csshover.htc);
}
</style>
<! endif -->

Bonjour à tous, j'ai le même problème. Et je voudrais savoir si cette solution passe le validateur (je code en XHTML 1.0 strict) ???
Bonjour ! j'ai exactement le même problème mais j'ai pas réussi à le résoudre...si vous voyez mon erreur...(j suis une débutante...)

             dl, dt, dd, ul, li {

                   margin: 0;
                   padding: 0;
                   list-style-type: none;
                   font: 100% Veranda, arial, sans-serif; 


                  }
             #menu {
                   position: absolute;
                   top: 4px;
                   left: 12px;
                   z-index: 1;
                   width: 100%; /* précision pour Opera */
                   behavior: url("../menu/csshover.htc");
                   }


             #menu dl {
                   float: left;
                   width: 7.6em;

                  }
            /*lignes rajoutées pour contrer bug clignotant*/
             #menu dl:hover dd{display:block}

             #menu dd {display:block} /* javascript désactivé */

             /**/

             #menu dt {
                   cursor: pointer;
                   text-align:center;
                   font-weight:bold;
                   background: #ffffff;
                   border: 1px solid black;
                   margin: 1px;
                  }
             #menu dd {
                   display: none;
                   border: 1px solid gray;

                  }
             #menu li {
                   text-align: center;
                   background: #fff;

                  }
             #menu li a, #menu dt a {
                   color: #000;
                   text-decoration: none;
                   display: block;
                   height: 100%;
                   border: 0 none;

                  }
             #menu li a:hover, #menu dt a:hover {
                  background: #eee;
                 }










      <script type="text/javascript">

              <!--
                  function montre(id) {
                  var d = document.getElementById(id);
                      for (var i = 1; i<=10; i++) {
                           if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
                           }
                           if (d) {d.style.display='block';}
                           }
              //-->

      </script>
   /*lignes ajoutées pour régler bug clignotant*/

       <!--[if lte IE 6]>


<script>
window.onload=function(){ /* javascript actif */
var dd = document.getElementById('menu').getElementsByTagName('DD');
for (var i = 0; i<=dd.length; i++) dd.style.display='none';
}
</script>
<![ endif]-->

  /**/

<div id="menu">
        <dl>
                <dt onmouseover="javascript:montre();"><a href="../menu/index.php" title="Retour à l'accueil">Actualités</a></dt>
        </dl>

        <dl>
                <dt onmouseover="javascript:montre('smenu1');">Présentation</dt>
                        <dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');">

                                <ul>
                                        <li><a href="#">Directeur</a></li>
                                        <li><a href="#">Comité</a></li>
                                        <li><a href="#">École</a></li>
                                </ul>
                        </dd>
        </dl>


        <dl>
                <dt onmouseover="javascript:montre('smenu2');">Formations</dt>
                       <dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre('');">
                                <ul>
                                        <li><a href="#">Initiation musicale et petit choeur</a></li>
                                        <li><a href="#">Piano</a></li>
                                        <li><a href="../../formations/vents/instrum.php">Instruments à vent</a></li>
                                        <li><a href="#">Tambours et Percussions</a></li>
                                </ul>
                        </dd>
        </dl>

        <dl>
                <dt onmouseover="javascript:montre('smenu3');">Médias</dt>
                    <dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre('');">

                                <ul>
                                        <li><a href="#">Photos</a></li>
                                        <li><a href="#">Vidéos</a></li>
                                        <li><a href="#">Extraits</a></li>
                                </ul>
                        </dd>
        </dl>

        <dl>
                <dt onmouseover="javascript:montre('smenu4');">Interactif</dt>
                    <dd id="smenu4" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre('');">

                                <ul>
                                        <li><a href="../../interactif/livre_or/post.php">Livre d'or</a></li>
                                        <li><a href="#">Sondages</a></li>
                                        <li><a href="../../interactif/formulaire.php">Inscriptions et Informations</a></li>
                                        <li><a href="../../interactif/contacts.php">Contacts</a></li>
                                </ul>
                        </dd>
        </dl>

        <dl>
                <dt onmouseover="javascript:montre('smenu5');">Liens</dt>
                    <dd id="smenu5" onmouseover="javascript:montre('smenu5');" onmouseout="javascript:montre('');">

                                <ul>
                                        <li><a href="../../liens/ecole_musique.php">Ecoles de musique</a></li>
                                        <li><a href="../../liens/fanfares.php">Fanfares</a></li>
                                        <li><a href="../../liens/autres.php">Autres</a></li>
                                        <li><a href="../../liens/formliens.php">Votre lien sur notre site ?</a></li>
                                </ul>
                        </dd>
        </dl>

</div>


P.S: j'utilise un include php pour insérer mon menu dans mes pages, c'est pour ça que j'ai pas de balises body et cie dans mon code...
mais c'est que j'ai déjà fait...(enfin il me semble.. Smiley ohwell ) j'ai suivi les "instructions" qui sont marquées la... sans succès...
Modifié par p_tite_jo (07 Oct 2005 - 16:34)
voila... la j'ai fait exactement comme c'est marqué.. et ça marche toujours pas... voila mon code :







      <script type="text/javascript">

              <!--
                  function montre(id) {
                  var d = document.getElementById(id);
                      for (var i = 1; i<=10; i++) {
                           if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
                           }
                           if (d) {d.style.display='block';}
                           }
              //-->

      </script>

   /*lignes ajoutées pour régler bug clignotant*/

 <!--[if lte IE 6]>

<style type="text/css" media="screen">
#menu {
behavior: url("../menu/csshover.htc");
}
</style>
<![ endif]-->

  /**/

<div id="menu">
        <dl>
                <dt onmouseover="javascript:montre();"><a href="../menu/index.php" title="Retour à l'accueil">Actualités</a></dt>
        </dl>

        <dl>
                <dt onmouseover="javascript:montre('smenu1');">Présentation</dt>
                        <dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');">

                                <ul>
                                        <li><a href="#">Directeur</a></li>
                                        <li><a href="#">Comité</a></li>
                                        <li><a href="#">École</a></li>
                                </ul>
                        </dd>
        </dl>


        <dl>
                <dt onmouseover="javascript:montre('smenu2');">Formations</dt>
                       <dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre('');">
                                <ul>
                                        <li><a href="#">Initiation musicale et petit choeur</a></li>
                                        <li><a href="#">Piano</a></li>
                                        <li><a href="../../formations/vents/instrum.php">Instruments à vent</a></li>
                                        <li><a href="#">Tambours et Percussions</a></li>
                                </ul>
                        </dd>
        </dl>

        <dl>
                <dt onmouseover="javascript:montre('smenu3');">Médias</dt>
                    <dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre('');">

                                <ul>
                                        <li><a href="#">Photos</a></li>
                                        <li><a href="#">Vidéos</a></li>
                                        <li><a href="#">Extraits</a></li>
                                </ul>
                        </dd>
        </dl>

        <dl>
                <dt onmouseover="javascript:montre('smenu4');">Interactif</dt>
                    <dd id="smenu4" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre('');">

                                <ul>
                                        <li><a href="../../interactif/livre_or/post.php">Livre d'or</a></li>
                                        <li><a href="#">Sondages</a></li>
                                        <li><a href="../../interactif/formulaire.php">Inscriptions et Informations</a></li>
                                        <li><a href="../../interactif/contacts.php">Contacts</a></li>
                                </ul>
                        </dd>
        </dl>

        <dl>
                <dt onmouseover="javascript:montre('smenu5');">Liens</dt>
                    <dd id="smenu5" onmouseover="javascript:montre('smenu5');" onmouseout="javascript:montre('');">

                                <ul>
                                        <li><a href="../../liens/ecole_musique.php">Ecoles de musique</a></li>
                                        <li><a href="../../liens/fanfares.php">Fanfares</a></li>
                                        <li><a href="../../liens/autres.php">Autres</a></li>
                                        <li><a href="../../liens/formliens.php">Votre lien sur notre site ?</a></li>
                                </ul>
                        </dd>
        </dl>

</div>

             dl, dt, dd, ul, li {

                   margin: 0;
                   padding: 0;
                   list-style-type: none;
                   font: 100% Veranda, arial, sans-serif;  /*Attention: ne pas changer la taille de la police, une autre valeur que 100 et le menu ne
                   de déroule plus !*/


                  }
             #menu {
                   position: absolute;
                   top: 4px;
                   left: 12px;
                   z-index: 1;
                   width: 100%; /* précision pour Opera */
                   behavior: url("../menu/csshover.htc");
                   }


             #menu dl {
                   float: left;
                   width: 7.6em;

                  }

                                                             #menu dl:hover dd{display:block}

                                                              #menu dd {
                                                              border: 1px solid gray;display:none
                                                              }



             #menu dt {
                   cursor: pointer;
                   text-align:center;
                   font-weight:bold;
                   background: #ffffff;
                   border: 1px solid black;
                   margin: 1px;
                  }
             #menu dd {
                   display: none;
                   border: 1px solid gray;

                  }
             #menu li {
                   text-align: center;
                   background: #fff;

                  }
             #menu li a, #menu dt a {
                   color: #000;
                   text-decoration: none;
                   display: block;
                   height: 100%;
                   border: 0 none;

                  }
             #menu li a:hover, #menu dt a:hover {
                  background: #eee;
                 }
Sujet clos
Aller à