28113 sujets

CSS et mise en forme, CSS3

Menu css "dynamiqe" et IE7

Bonjour,
je suis tres malheureux Smiley bawling si si et c'est la faute d'IE... 7 Smiley fache ...

Bon voila mon problème;
j'essaye de faire un menu horizontal "dynamique". je voudrais que ca marche pour firefox, opera, chrome et IE >= 7. Je pense que mon css n'est pas forcement super propre mais j'arrive à lui faire faire a peu pres ce que je veux sur firefox et les autres mais pas sur IE... La deuxieme ligne du menu apparait bien mais pardessus le reste de la page, sans decaller ce qui devrait etre au dessous...
url: http://www.proximaprod.com

le code css :


body {
	margin: 0;
	padding: 10px 10px ;
	background: #E3F0CE;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 80%;
}

#global {
	width:980px;
	margin-left:auto;
	margin-right:auto;
}

#entete {
	width:600px;
	height: 116px;
	margin: 5px auto;
}

#menu {
	height:30px;
	padding:0;
	margin:0;

}

#menu ul {
	list-style:none;
}
#menu ul li {
	margin:0;
	padding:0;
	width: 180px;
	float:left;
}
#menu ul li a {
	text-decoration:none;
	color:#000;
}

#menu ul li span {
	font-size:1.2em;
	font-weight:bold;
	display:block;
	padding: 6px 2px;
	text-align:center;
	}
	
#menu ul li span:hover {
	background-color:#C7E19E;
}	

#menu ul ul {
	position:relative;
	left: -200px;
	height:30px;
	width:620px;
	margin:0;
	padding:0;
	list-style:none;
	display:none;
}

#menu ul ul li {
	width:150px;
	padding: 2px 2px;
	}

#menu ul li.sousmenu:hover ul.niveau2 {
	display:block;
	}


le code html :

<body>
<div id="global">

  <div id="entete"><a href="index.php"><img src="../style/image/proxibis2.png" width="600" height="116" alt="Proxima Prod" border="0"></a>

   <div id="menu">
   <ul class="niveau1">
      <li><a href="index.php" title="accueil"><span>Accueil</span></a></li>
      <li><a href="contact.php" title="Contact"><span>Contact</span></a></li>
      <li class="sousmenu"><a href="productions.php" title="nos productions"><span>Productions</span></a>
        <ul class="niveau2">
        <li><a href="championnat.php"><span>championnat d'escrime entreprise Decembre 2009</span></a></li>
        <li><a href="foirepontoise.php"><span>Marché Medieval de Pontoise Novembre 2009</span></a></li>
        <li><a href="duel.php"><span>Presentation de l'escrime de Duel !!!</span></a></li>
        <li><a href="manifa104.php"><span>Manifestations contre l'A104</span></a></li></ul>
      </li>
   </ul></div><!-- menu -->
    <br>
    
    </div><!-- #entete -->
&nbsp;
  <div id="contenu">


jcrois que j'ai tout dit...
si vous avez lu jusque la MERCI Smiley smile
Bonjour,

Pourquoi toutes ces indications puisque c'est display: none ?
#menu ul ul {
	position:relative;
	left: -200px;
	height:30px;
	width:620px;
	margin:0;
	padding:0;
	list-style:none;
	display:none;
}


Le second UL est-il bien : #menu ul ul.niveau2 ? Si oui, c'est plus bas qu'il faut indiquer toutes ses particularités ; au moment du hover sur la liste #menu ul li.sousmenu:hover ul.niveau2…

Ça ne réglera peut-être pas grand chose (voir rien) mais ce sera plus clair dans un premier temps :
#menu ul.niveau1 li.sousmenu ul.niveau2 {
	display: none;
}
#menu ul.niveau1 li.sousmenu:hover  ul.niveau2 {
	display: block;
	/* suivi de la liste de propriétés  */
}

/* 
   On aura par la suite tout le loisir de condenser l'écriture si on le désire :
   #menu .niveau1 .sousmenu .niveau2 {}
*/


Petite remarque sans rapport : il est bon quand on indique des classes dans le HTML de les retrouver aussi dans le CSS… C'est plus cohérent.
Soit on ne met que le minimum de classes et id avec des descentes simples #menu ul ul li ul - Soit on "charge" #menu ul.niveau1 li.sousmenu:hover ul.niveau2 - Soit on fait l'intermédiaire #menu .niveau1 .sousmenu .niveau2. Pour ma part, je trouve que toutes les méthodes ont du bon. Certaines sont plus faciles d'entretien, après 6 mois de vacances par exemple Smiley cligne et plus rapide à appréhender si une autre personne intervient. D'autres, plus concises, permettent un HTML plus libre (moins de classes et id à indiquer).
Sujet clos
Aller à