Problème menu déroulant en css

icaro · 20 Avril 2009

Bonjour,

J'ai créé un menu déroulant. Tout fonctionne bien mais il y a un décalage bizarre vers la droite... J'ai pourtant précisé l'emplacement 0px à gauche...

Voici la page :

http://bretoned.free.fr/test-menu/

Et le code :

<style type="text/css">
            #menu ul ul {display: none;position:absolute; left: 130px; top: 0px; margin:0px; padding: 0px;border: 0px solid; border-color:#dee1a0}
			#menu LI {
	LIST-STYLE-TYPE: none;
	position: relative;
	left: 0px;
	margin:0px;
	padding: 0px;
	width:130px;
	background-color: edefcc;
	height: 20
}
			#menu LI:HOVER,#menu LI.sfhover {background-color: #dee1a0}
			#menu li:hover ul.niveau2,#menu li.sfhover ul.niveau2,#menu li li.sfhover {display: block}
</style>


<div id="menu">
  <table width="130" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td width="130" align="left" valign="top" bgcolor="edefcc"><table width="130" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td width="10" height="22" align="left" valign="middle"> </td>
          <td width="120" height="22" align="left" valign="top" bgcolor="edefcc"><span class="txt4">Collections</span></td>

        </tr>
      </table></td>
    </tr>
    <tr>
      <td width="130" align="left" valign="top"><table width="130" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td><ul>
              <li><span class="txt4">Gaia</span>

                  <ul class="niveau2">
                    <li><a href="gaia-1page.php" class="lien">Gaia</a></li>
                  </ul>
              </li>
            <li><span class="txt4">Himalia</span>
                  <ul class="niveau2">
                    <li><a href="himalia-1page.php" class="lien">Himalia</a></li>

                    <li><a href="himalia-2page.php" class="lien">Himalia couleurs</a></li>
                  </ul>
            </li>
            <li><span class="txt4">Io</span>
                  <ul class="niveau2">
                    <li><a href="Io-1page.php" class="lien">Io</a></li>
                    <li><a href="Io-2page.php" class="lien">Io bis</a></li>

                  </ul>
            </li>
            <li><span class="txt4">Métis</span>
                  <ul class="niveau2">
                    <li><a href="metis-1page.php" class="lien">Métis bleu</a></li>
                    <li><a href="metis-2page.php" class="lien">Métis blanc</a></li>

                    <li><a href="metis-3page.php" class="lien">Métis vert</a></li>
                    <li><a href="metis-4page.php" class="lien">Métis rose</a></li>
                    <li><a href="metis-5page.php" class="lien">Métis marron</a></li>
                    <li><a href="metis-6page.php" class="lien">Métis rouge</a></li>
                  </ul>

            </li>
            <li><span class="txt4">Naiade</span>
                  <ul class="niveau2">
                    <li><a href="naiade-1page.php" class="lien">Naiade orange</a></li>
                    <li><a href="naiade-2page.php" class="lien">Naiade vert</a></li>
                    <li><a href="naiade-3page.php" class="lien">Naiade bleu</a></li>
                    <li><a href="naiade-4page.php" class="lien">Naiade gris</a></li>

                    <li><a href="naiade-5page.php" class="lien">Naiade rouge</a></li>
                  </ul>
            </li>
            <li><span class="txt4">Rhéa</span>
                  <ul class="niveau2">
                    <li><a href="rhea-1page.php" class="lien">Rhéa blanc</a></li>

                    <li><a href="rhea-2page.php" class="lien">Rhéa rose</a></li>
                    <li><a href="rhea-3page.php" class="lien">Rhéa vert</a></li>
                    <li><a href="rhea-4page.php" class="lien">Rhéa rouge</a></li>
                    <li><a href="rhea-5page.php" class="lien">Rhéa bleu</a></li>
                    <li><a href="rhea-6page.php" class="lien">Rhéa marron</a></li>

                    <li><a href="rhea-7page.php" class="lien">Rhéa gris</a></li>
                  </ul>
            </li>
            <li><span class="txt4">Sinope</span>
                  <ul class="niveau2">
                    <li><a href="sinope-1page.php" class="lien">Sinope</a></li>
                  </ul>

            </li>
            <li><span class="txt4">Théia</span>
                  <ul class="niveau2">
                    <li><a href="theia-1page.php" class="lien">Théia blanc</a></li>
                    <li><a href="theia-2page.php" class="lien">Théia rose</a></li>
                    <li><a href="theia-3page.php" class="lien">Théia vert</a></li>

                    <li><a href="theia-4page.php" class="lien">Théia rouge</a></li>
                    <li><a href="theia-5page.php" class="lien">Théia bleu</a></li>
                    <li><a href="theia-6page.php" class="lien">Théia marron</a></li>
                  </ul>
            </li>
            <li><span class="txt4">Titania</span>

                  <ul class="niveau2">
                    <li><a href="titania-1page.php" class="lien">Titania métal</a></li>
                    <li><a href="titania-2page.php" class="lien">Titania multicouleurs</a></li>
                    <li><a href="titania-3page.php" class="lien">Titania orange</a></li>
                    <li><a href="titania-4page.php" class="lien">Titania bleu</a></li>
                    <li><a href="titania-5page.php" class="lien">Titania vert</a></li>

                    <li><a href="titania-6page.php" class="lien">Titania gris</a></li>
                    <li><a href="titania-7page.php" class="lien">Titania</a></li>
                  </ul>
            </li>
          </ul></td>
        </tr>
      </table></td>
    </tr>

  </table>
</div>

Merci de m'aider...

Icaro

PhY · 20 Avril 2009

Salut,

Je ne vois rien de bizarre sur FF 2.0 . Par contre tes liens ne fonctionnent pas sur IE 6 .

Voici un petit lien sympa pour t'aider

Bon courage :smartass:

Bye

**yuston** · 20 Avril 2009

Salut,

comme je suis un type super sympa, je te donne le complet et qui marche! Par contre c'est en mode quirk, beurk! Essaie de définir les balises et docytpe obligatoires avant de te lancer dans une séance de débuggage les prochaines fois.

Juste une petite remarque, j'ai testé ce code sur IE7, les menus ne se déroulent pas. Donc attention.


<style type="text/css">
#menu ul{
	margin: 0px;
	padding: 0px;
}

#menu ul ul{
	display: none;
	position: absolute;
	left: 130px;
	top: 0px;
	margin: 0px;
	padding: 0px;
	border: 0px solid;
	border-color:#dee1a0;
}
#menu li{
	list-style-type: none;
	position: relative;
	left: 0px;
	margin:0px;
	padding: 0px;
	width:130px;
	background-color: edefcc;
	height: 20
}
#menu li:hover, #menu lif.sfhover{
	background-color: #dee1a0;
}
#menu li:hover ul.niveau2, #menu li.sfhover ul.niveau2, #menu li li.sfhover{
	display: block;
	}
</style>


<div id="menu">
  <table width="130" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td width="130" align="left" valign="top" bgcolor="edefcc"><table width="130" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td width="10" height="22" align="left" valign="middle"> </td>
          <td width="120" height="22" align="left" valign="top" bgcolor="edefcc"><span class="txt4">Collections</span></td>

        </tr>
      </table></td>
    </tr>
    <tr>
      <td width="130" align="left" valign="top"><table width="130" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td><ul>
              <li><span class="txt4">Gaia</span>

                  <ul class="niveau2">
                    <li><a href="gaia-1page.php" class="lien">Gaia</a></li>
                  </ul>
              </li>
            <li><span class="txt4">Himalia</span>
                  <ul class="niveau2">
                    <li><a href="himalia-1page.php" class="lien">Himalia</a></li>

                    <li><a href="himalia-2page.php" class="lien">Himalia couleurs</a></li>
                  </ul>
            </li>
            <li><span class="txt4">Io</span>
                  <ul class="niveau2">
                    <li><a href="Io-1page.php" class="lien">Io</a></li>
                    <li><a href="Io-2page.php" class="lien">Io bis</a></li>

                  </ul>
            </li>
            <li><span class="txt4">Métis</span>
                  <ul class="niveau2">
                    <li><a href="metis-1page.php" class="lien">Métis bleu</a></li>
                    <li><a href="metis-2page.php" class="lien">Métis blanc</a></li>

                    <li><a href="metis-3page.php" class="lien">Métis vert</a></li>
                    <li><a href="metis-4page.php" class="lien">Métis rose</a></li>
                    <li><a href="metis-5page.php" class="lien">Métis marron</a></li>
                    <li><a href="metis-6page.php" class="lien">Métis rouge</a></li>
                  </ul>

            </li>
            <li><span class="txt4">Naiade</span>
                  <ul class="niveau2">
                    <li><a href="naiade-1page.php" class="lien">Naiade orange</a></li>
                    <li><a href="naiade-2page.php" class="lien">Naiade vert</a></li>
                    <li><a href="naiade-3page.php" class="lien">Naiade bleu</a></li>
                    <li><a href="naiade-4page.php" class="lien">Naiade gris</a></li>

                    <li><a href="naiade-5page.php" class="lien">Naiade rouge</a></li>
                  </ul>
            </li>
            <li><span class="txt4">Rhéa</span>
                  <ul class="niveau2">
                    <li><a href="rhea-1page.php" class="lien">Rhéa blanc</a></li>

                    <li><a href="rhea-2page.php" class="lien">Rhéa rose</a></li>
                    <li><a href="rhea-3page.php" class="lien">Rhéa vert</a></li>
                    <li><a href="rhea-4page.php" class="lien">Rhéa rouge</a></li>
                    <li><a href="rhea-5page.php" class="lien">Rhéa bleu</a></li>
                    <li><a href="rhea-6page.php" class="lien">Rhéa marron</a></li>

                    <li><a href="rhea-7page.php" class="lien">Rhéa gris</a></li>
                  </ul>
            </li>
            <li><span class="txt4">Sinope</span>
                  <ul class="niveau2">
                    <li><a href="sinope-1page.php" class="lien">Sinope</a></li>
                  </ul>

            </li>
            <li><span class="txt4">Théia</span>
                  <ul class="niveau2">
                    <li><a href="theia-1page.php" class="lien">Théia blanc</a></li>
                    <li><a href="theia-2page.php" class="lien">Théia rose</a></li>
                    <li><a href="theia-3page.php" class="lien">Théia vert</a></li>

                    <li><a href="theia-4page.php" class="lien">Théia rouge</a></li>
                    <li><a href="theia-5page.php" class="lien">Théia bleu</a></li>
                    <li><a href="theia-6page.php" class="lien">Théia marron</a></li>
                  </ul>
            </li>
            <li><span class="txt4">Titania</span>

                  <ul class="niveau2">
                    <li><a href="titania-1page.php" class="lien">Titania métal</a></li>
                    <li><a href="titania-2page.php" class="lien">Titania multicouleurs</a></li>
                    <li><a href="titania-3page.php" class="lien">Titania orange</a></li>
                    <li><a href="titania-4page.php" class="lien">Titania bleu</a></li>
                    <li><a href="titania-5page.php" class="lien">Titania vert</a></li>

                    <li><a href="titania-6page.php" class="lien">Titania gris</a></li>
                    <li><a href="titania-7page.php" class="lien">Titania</a></li>
                  </ul>
            </li>
          </ul></td>
        </tr>
      </table></td>
    </tr>

  </table>
</div>

Il y a un décalage vers la droite parce tu n'as pas dit que le premier ul devait avoir une marge (interne, externe) de 0, d'où cette indentation!

Bonne chance pour la suite.

Occi · 20 Avril 2009

Salut,

+ un petit oubli du px au niveau de "height: 20" -> "height: 20px;"

Modifié 20 Avril 2009 par Occi

Connexion

Problème menu déroulant en css

Sujets conseillés

icaro

Lien vers le commentaire

Partager sur d’autres sites

PhY

Lien vers le commentaire

Partager sur d’autres sites

yuston

Lien vers le commentaire

Partager sur d’autres sites

Occi

Lien vers le commentaire

Partager sur d’autres sites

Veuillez vous connecter pour commenter

Parcourir

Activité