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

Mise en page CSS Discussion :

Menu déroulant sous IE7


Sujet :

CSS

  1. #1
    Nouveau membre du Club
    Inscrit en
    Août 2007
    Messages
    32
    Détails du profil
    Informations forums :
    Inscription : Août 2007
    Messages : 32
    Points : 28
    Points
    28
    Par défaut Menu déroulant sous IE7
    J'ai un menu déroulant et je ne peux atteindre certaines options sous IE7.
    Sous Firefox tout fonctionne correctement.
    Le déroulement est géré en JavaScript

    Mon menu :

    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
     
    <script type="text/javascript">
    <!--
    window.onload=montre;
    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>
     
    <div id="menu">
    	<dl>
    		<dt onmouseover="javascript:montre();"><a href="SousMenu1.php">Sous menu</a></dt>
    	</dl>
     
    	<dl>			
    		<dt onmouseover="javascript:montre('smenu1');">Sous Menu 1.</dt>
    			<dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');">
    				<ul>
    					<li><a href="Option1.php">Option 1 </a></li>
     
    					<li><a href="Option2.php">Option 2</a></li>
    					<li><a href="Option3.php">Option 3</a></li>
    				</ul>
     
    			</dd>
    	</dl>
     
     
    	<dl>	
    		<dt onmouseover="javascript:montre('smenu2');" >Sous Menu 2</dt>
    			<dd id="smenu2" onmouseover="javascript:montre('smenu2');"  onmouseout="javascript:montre('');">
    				<ul>
    					<li><a href="Option 4.php">Option 4.</a></li>
     
    					<li><a href="Option 5.php">Option 5.</a></li>
    					<li><a href="Option 6.php">Option 6.</a></li>
    				</ul>
    			</dd>
    	</dl>
     
    </div>
    Ma feuille de style:

    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
     
    body {
    margin: 0;
    padding: 0;
    background: #FEEEBC;
    font: 12px verdana, sans-serif;
    }
    div#contenu {
    	width:1200px;
    	height:600px;
    	top:70px;
    	left:10px;
    	float:left; 
    	z-index: 1;
    	position:absolute;
    	}
    dl, dt, dd, ul, li {
    margin: 0;
    padding: 0;
    list-style-type: none;
    }
    #menu {
    width:100%;
    top:0px;
    z-index: 2;
    float:left;
    position:absolute;
    }
    #menu dl {
    float: left;
    width: 15em;
    }
    #menu dt {
    cursor: pointer;
    text-align: center;
    font-weight: bold;
    background: #3B4E77;
    color: #fff;
    border: 1px solid gray;
    margin: 1px;
    }
    #menu dd {
    display: none;
    border: 1px solid gray;
    color: #fff;
    background: #3B4E77;
    }
    #menu li {
    text-align: center;
    background: #3B4E77;
    margin: 10px;
    }
    #menu li a, #menu dt a {
    color: #fff;
    text-decoration: none;
    display: block;
    height: 100%;
    border: 0 none;
    }
    #menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
    background: #F2462E;
    border-right: 1px solid #fff;
    }
    Ma page :

    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
     
    <?php
    require('TestMenu_2.html');
    ?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link href="CSS/Menu_3.css" rel="stylesheet" type="text/css" />
    <title>Test affiche menu</title>
    </head>
     
    <body>
    <div id = "contenu">
      <form name="form1" method="post" action="">
        CECI EST UN TEST 
      </form>
    </div>
    </body>
    </html>
    A priori les options que je ne peux atteindre sont celles qui chevauchent le bloc "Contenu"

  2. #2
    Membre habitué
    Homme Profil pro
    Data Ingenieur
    Inscrit en
    Mai 2006
    Messages
    133
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Data Ingenieur
    Secteur : Finance

    Informations forums :
    Inscription : Mai 2006
    Messages : 133
    Points : 162
    Points
    162
    Par défaut
    Bonjour
    Est-ce-que tu as validé ton code CSS sur le site W3C??
    Car d'un navigateur à l'autre, le code CSS n'est pas comprit de la même façon

  3. #3
    Nouveau membre du Club
    Inscrit en
    Août 2007
    Messages
    32
    Détails du profil
    Informations forums :
    Inscription : Août 2007
    Messages : 32
    Points : 28
    Points
    28
    Par défaut Validation code CSS
    J'ai validé le code CSS sur le site
    http://jigsaw.w3.org/css-validator/
    je n'ai aucune erreur.

  4. #4
    Membre du Club
    Profil pro
    Inscrit en
    Mai 2005
    Messages
    101
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2005
    Messages : 101
    Points : 43
    Points
    43
    Par défaut
    Une page en ligne pour le test ?

  5. #5
    Nouveau membre du Club
    Inscrit en
    Août 2007
    Messages
    32
    Détails du profil
    Informations forums :
    Inscription : Août 2007
    Messages : 32
    Points : 28
    Points
    28
    Par défaut Validation code CSS
    Oui c'est via une page en ligne.

Discussions similaires

  1. Menu déroulant sous opéra et ie7
    Par matthieu.bb dans le forum Mise en page CSS
    Réponses: 0
    Dernier message: 02/05/2011, 20h34
  2. Pb menu déroulant sous Firefox, mais fonctionnel sous IE7
    Par manu-lyon dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 09/05/2009, 20h26
  3. Problème avec un menu css sous IE7
    Par sevenweb dans le forum Balisage (X)HTML et validation W3C
    Réponses: 4
    Dernier message: 04/06/2007, 14h31
  4. Menu déroulant sous IE7 ne marche pas
    Par Jo dans le forum Mise en page CSS
    Réponses: 7
    Dernier message: 07/02/2007, 17h54
  5. problème de menu déroulant sous firefox
    Par jeromed1 dans le forum Balisage (X)HTML et validation W3C
    Réponses: 3
    Dernier message: 10/11/2006, 14h55

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