IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

IE6 + menu qui disparait au contact d'un contenu


Sujet :

JavaScript

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre confirmé Avatar de PuppeT mAsTer
    Profil pro
    Inscrit en
    Juin 2006
    Messages
    104
    Détails du profil
    Informations personnelles :
    Localisation : France, Rhône (Rhône Alpes)

    Informations forums :
    Inscription : Juin 2006
    Messages : 104
    Par défaut IE6 + menu qui disparait au contact d'un contenu
    Bonjour à tous, difficile d'expliquer le problème qui me tracasse avec Auteur dans un titre donc voici une vrai explication :

    J'ai un menu déroulant qui fonctionne parfaitement sous FF et qui marche disons à moitié sous IE6. Le problème est le suivant : lorsque je passe une première fois sur le titre d'un sous menu, celui se déroule mais quand je navigue dans mon sous menu, si celui-ci rencontre du texte ou une image ou un autre contenu, le sous menu disparait. Bcp d'explication à ce problème ont déjà été cherché et rien n'y a fait c'est pourquoi je créé un nouveau topic pour soliciter votre aide maintenant que le problème a été éclairci.

    Voici comment se présente la feuille de style font.css :

    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
    44
    45
    46
    47
    48
    49
    50
    51
    52
    #idMenu{
     position: absolute;
     top: 185;
     left: 0;
     width: 100%;
     font-size: 12px;
     z-index: 100;
     font-family:Verdana;
    }
     
    .elementMenu{
     float: left;
     width: 128px;
     text-align: center;
    }
     
    .titreMenu{
     color: #FFA900;
     font-weight: bold;
     background-color:#000000;
     padding:5px;
     margin:0px;
    }
     
    div.elementMenu:hover div{
     display: block;
    }
    .sousMenu{
     display: none;
     margin:0px;
    }
     
    .sousMenu p{
     padding: 3px;
     margin:0px;
     margin-top:1px;
     background-image:url('images/fondmenu.png');
    }
    .titreSousMenu{
     color: #FFFFFF;
     font-weight: bold;
    }
     
    a:link, a:visited
    {
      text-decoration:none;
      color: #FFA900;
    }
     
    a:hover {
      color: #FF5B01;
    }
    et voici le code d'une page standard du site, côté client :

    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
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    <html>
    <head>
    <title>
    HIT & SPORT 98.4 FM - Des Hits & du Sport !
    </title>
    <link rel="stylesheet" type="text/css" href="font.css">
     
    <script type="text/javascript">
    <!--
    function mouseOver(idObj)
    {
      if (document.all) //test IE
        document.getElementById(idObj).style.display = "block";
    }
     
    function mouseOut(idObj)
    {
      if (document.all)
        document.getElementById(idObj).style.display = "none";
    }
     
    //-->
    </script>
    <script language="JavaScript">
    function openWindow(width,height) {
    x = (640 - width)/2, y = (480 - height)/2;
    if (screen) {
    y = (screen.availHeight - height)/2;
    x = (screen.availWidth - width)/2;
    }
    if (screen.availWidth > 1800) {
    x = ((screen.availWidth/2) - width)/2;
    }
    window.open('live.php','newWin','width='+width+',height='+height+',screenX='+x+',screenY='+y+',top='+y+',left='+x);
    }
    </script>
    </head>
    <body>
    <IMG SRC="images/bannierehaut.png">
     
    <div id="idMenu">
    <div class="elementMenu" onmouseover="mouseOver('idRadio')" onmouseout="mouseOut('idRadio')">
      <p class="titreMenu"><a href="id.php">RADIO</a></p>
     
      <div id="idRadio" class="sousMenu">
        <p class="titreSousMenu">EMISSIONS</p>
    	<p><a href="deboutlyon.htm">Debout Lyon</a></p>
    	<p><a href="denisshow.htm">Le Denis Show</a></p>
    	<p><a href="leclub.htm">Le Club</a></p>
        <p class="titreSousMenu">ANTENNE</p>
     
        <p><a href="progs.php">Grille des programmes</a></p>
    	<p><a href="animateurs.php">Animateurs</a></p>
    	<p><a href="redac.php">La Rédac</a></p>
        <p><a href="direction.php">La Direction</a></p>
    	<p><a href="contact.php">Contactez-nous</a></p>
      </div>
     
    </div>
     
    <div class="elementMenu">
         <p class="titreMenu"><a href="breves.php">BREVES</a></p>
    </div>
     
    <div class="elementMenu" onmouseover="mouseOver('idMusique')" onmouseout="mouseOut('idMusique')">
       <p class="titreMenu">MUSIC</p>
       <div id="idMusique" class="sousMenu" >
         <p><a>Ecoutez en live</a></p>
     
    	 <p><a href="playlist.php">La playlist</a></p>
       </div>
    </div>
     
    <div class="elementMenu" onmouseover="mouseOver('idSport')" onmouseout="mouseOut('idSport')" >
       <p class="titreMenu">SPORT</p>
       <div id="idSport" class="sousMenu">
          <p class="titreSousMenu">RESULTATS</p>
          <p><a href="OL.php">Olympique Lyonnais</a></p>
     
          <p><a href="ASVEL.php">Adecco ASVEL</a></p>
          <p><a href="LOU.php">LOU</a></p>
          <p><a href="calendrier.php"><b>CALENDRIERS</b></a></p>
          <p class="titreSousMenu">LE DIRECT</p>
          <p><a href="oldirect.php">Olympique Lyonnais</a></p>
          <p><a href="ASVELdirect.php">Adecco ASVEL</a></p>
     
          <p><a href="LOUdirect.php">LOU</a></p>
       </div>
    </div>
     
    <div class="elementMenu" onmouseover="mouseOver('idBlog')" onmouseout="mouseOut('idBlog')" >
       <p class="titreMenu">BLOGS</p>
         <div id="idBlog" class="sousMenu">
          <p><a href="#">Les blogs</a></p>
          <p><a href="forums.php">Les forums</a></p>
     
          <p><A>Le Tchat</a></p>
       </div>
    </div>
     
    <div class="elementMenu">
         <p class="titreMenu"><a href="agenda.php">AGENDA</a></p>
    </div>
     
    <div class="elementMenu" onmouseover="mouseOver('idPratique')" onmouseout="mouseOut('idPratique')" >
       <p class="titreMenu">PRATIQUE</p>
     
         <div id="idPratique" class="sousMenu">
          <p><a href="horoscope.php">Horoscope</a></p>
          <p><a href="emplois.php">Emplois</a></p>
       </div>
    </div>
     
    <div class="elementMenu">
         <p class="titreMenu"><a href="photos.php">PHOTOS</a></p>
    </div>
     
    </div>
     
     
    <table border=0 cellpadding=0 cellspacing=5 bgcolor="#FFFFFF" style="margin-top:140px">
    <tr>
    <td width="200" height="40">
    </td>
    <td width="449">
    <p>SMS</p>
     
    </td>
    <td width="150">
    <p align="center"><font size="2" color="#0060cd">On air</font>
     
    </td>
    <td width="200">
    <P align="right">
      <object type='application/x-shockwave-flash' data='liveHitSport.swf' width='170' height='70'>
      <param name='movie' value='liveHitSport.swf' />
      <param name='wmode' value='transparent' />
      </object>
    </td>
    </tr>
    </table>
     
    	[la suite du contenu]
     
     
    <table border="0" bgcolor="#000000">
    <tr>
    <td height="30" width="1019" style="padding:10px">
     
    <p align=center>
    <font color="#FFFFFF" size=1 face="Verdana">
    Réalisé par <b><a href="http://aprog.free.fr">ghOw</a></b>
    </p>
     
    </td>
    </tr>
    </table>
    </td>
    </tr>
    </table>
    </body>
    </html>
    J'ai l'impression qu'il y a un problème de priorité d'apparition du contenu. En clair le contenu sous le menu doit apparaître quoiqu'il arrive si il est survolé. Pourtant j'ai essayé d'appeler le contenu se trouvant sous le menu dans un div et de donner un z-index inférieur à 100 à ce div dans font.css mais ça n'a pas marché non plus, peut être le problème vient du script JS, c'est pourquoi je poste ici mais il vient aussi peut être du CSS, enfin voici un lien vers le topic qui a répondu aux premiers problèmes de mon menu (merci Auteur ) :

    http://www.developpez.net/forums/sho...=184541&page=2

    Je ne sais plus où chercher pour résoudre le problème. J'utilise IE6, peut être le problème vient aussi de ma version de IE Merci tester les scripts avec vos versions de IE poui vérifier si il y a un pb de version. et j'espère que quelqu'un pourra m'aider

    Merci d'avance

    PM

  2. #2
    Membre Expert
    Avatar de FremyCompany
    Profil pro
    Étudiant
    Inscrit en
    Février 2006
    Messages
    2 532
    Détails du profil
    Informations personnelles :
    Âge : 33
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Février 2006
    Messages : 2 532
    Par défaut
    Est-ce vraiment utile ou tu peux contourner ?
    Si oui, essaie, car j'ai moi même eu des problèmes avec float... ca n'a peut-être rien à voir, le contexte était tout à fait différent, mais rien ne coute d'essayer

    Sinon, je trouve le code de ton menu un peu long....
    La page mets du temps à le charger et comme il se trouve en début de page, ca bloque le reste de la page... de plus, l'utilisateur ne percoit pas le chargement de la page...

  3. #3
    Membre confirmé Avatar de PuppeT mAsTer
    Profil pro
    Inscrit en
    Juin 2006
    Messages
    104
    Détails du profil
    Informations personnelles :
    Localisation : France, Rhône (Rhône Alpes)

    Informations forums :
    Inscription : Juin 2006
    Messages : 104
    Par défaut
    Merci d'avoir répondu déjà

    float:left est vraiment utile pour la forme de mon menu puisque tous les éléments Menu doivent se trouver à gauche les un des autres, en effet le menu voulu est une barre horizontal avec des sous menu qui se déroulent et se renroulent.

    Malheuresement je ne sais pas comment faire cela autrement

    Tu as raison le menu est peut être un peu trop détaillé, je tiendrai compte de ton avis pour le bien de tout les utilisateurs

    http://aprog.free.fr/v2/pagestandard.php

    Peut être ça vous aidera à voir comment se comporte le menu sous IE6 en tout cas car apparement tout va bien sous IE5;

    Merci de répondre

    PM

  4. #4
    Membre Expert
    Avatar de FremyCompany
    Profil pro
    Étudiant
    Inscrit en
    Février 2006
    Messages
    2 532
    Détails du profil
    Informations personnelles :
    Âge : 33
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Février 2006
    Messages : 2 532
    Par défaut
    j'ai trouvé le problème...
    Il vient du bord entre chaque div...
    Je te propose de ne fermer ton menu qui lors de l'event onmouseout du div contenant TOUS les autres...
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    <div id="idMenu" onmouseover="openMenu('idMenu')" onmouseout="closeMenu('idMenu')">
    <div class="elementMenu" onmouseover="mouseOver('idRadio')" onmouseout="mouseOut('idRadio')">
    La fonction closeMenu execute un setTimeout qui ferme le menu...
    La fonction openMenu affiche le menu et supprime le timer avec clearTimeout...
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    var menuTimer=0;
     
    //...
        menuTimer=setTimeout("blablabla");
    //...
        clearTimer(menuTimer);

  5. #5
    Membre confirmé Avatar de PuppeT mAsTer
    Profil pro
    Inscrit en
    Juin 2006
    Messages
    104
    Détails du profil
    Informations personnelles :
    Localisation : France, Rhône (Rhône Alpes)

    Informations forums :
    Inscription : Juin 2006
    Messages : 104
    Par défaut
    Super j'aimerai tester ta solution Fremy mais je n'y connais absolument rien en JS (c'est d'ailleurs pourquoi j'ai bcp de mal avec ce menu) et donc je ne comprend pas la deuxième partie du code qui crée les fonctions closeMenu et openMenu. Enfin comment écrire ces fonctions en gros, j'ai compris l'idée mais je ne sais pas la mettre en pratique . Après ça je me met au JS avec sérieux c'est sur

    Merci de répondre

    PM

  6. #6
    Membre confirmé Avatar de PuppeT mAsTer
    Profil pro
    Inscrit en
    Juin 2006
    Messages
    104
    Détails du profil
    Informations personnelles :
    Localisation : France, Rhône (Rhône Alpes)

    Informations forums :
    Inscription : Juin 2006
    Messages : 104
    Par défaut
    Slt tout le monde, je vais me lancé malgrès ma méconnaissance total du Javascript et avec quelques observations, ce que j'ai écris ne marche pas biensûr alors si quelqu'un peut me dire ce qui cloche et ce que j'ai pas saisie dans l'idée de Fremy je prend

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
     
    var menuTimer=0;
     
    function closeMenu(idObj)
    {
      menuTimer=setTimeout("blablabla");
    }
     
    function openMenu(idObj)
    { 
      clearTimer(menuTimer);
    }
    Que fallait il comprendre par blablabla placé dans la fonction setTimeout ?

    PM

Discussions similaires

  1. [MySQL] Menu qui disparait pour les invités
    Par RACKER59 dans le forum PHP & Base de données
    Réponses: 4
    Dernier message: 21/03/2010, 18h12
  2. Sous menu qui disparait quand on passe la souris dessus
    Par pasc06 dans le forum Mise en page CSS
    Réponses: 5
    Dernier message: 09/12/2009, 07h23
  3. [MySQL] Requete multiple & menu qui disparait
    Par spawns dans le forum PHP & Base de données
    Réponses: 3
    Dernier message: 21/11/2008, 10h21
  4. [css sous ie] menu qui disparait qd clic sur precedent ...
    Par michaelbob dans le forum Mise en page CSS
    Réponses: 4
    Dernier message: 22/02/2006, 14h37
  5. [CSS] Menu qui disparait derriere un champ
    Par Pepito dans le forum Mise en page CSS
    Réponses: 4
    Dernier message: 06/09/2005, 10h03

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo