Firefox: problème de positionnement de <dl> dans un <div>

Question

lintlint

17 Aug 2007 à 18:46

Bonjour

J'ai un code assez simple de création de menu déroulant en css/javascript trouvé ici.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
  <head>
    <title>menu</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <script type="text/javascript" src="menu.js"></script>
    <style type="text/css">
  #bloc {
    background: #0F0FFF;
  }
  #menu {
    background: #FF00000;
    font-family: Verdana, "Trebuchet MS", Arial, sans-serif;
    margin: auto;
    padding: 0; 
    width: 600px;
  }
  #menu dl {
    float: left;
    margin: 0px 10px;
    padding: 0;
/*    position: relative;
    top: -20px;*/
  }
    </style>
  </head>

  <body>
    <div id="bloc">
      <div id="menu">&nbsp;
        <dl>
          <dt>element 1</dt>
            <dd><ul>
              <li><a href="">1.0</a></li>
              <li><a href="">1.1</a></li>
              <li><a href="">1.2</a></li>
            </ul></dd>
          </dl>      

          <dl>
            <dt>element 2</dt>
              <dd><ul>
              <li><a href="">2.0</a></li>
              <li><a href="">2.1</a></li>
            </ul></dd>
          </dl>
          <dl>
            <dt>element 3</dt>
            <dd><ul>
              <li><a href="">3.0</a></li>
              <li><a href="">3.1</a></li>
            </ul></dd>
          </dl>
        </div>
      </div>
    </div>
  </body>
</html>

Sous Firefox, le <dt> est décalé hors du div menu, sous Opera tout est OK.

Le seul moyen d'avoir un positionnement correct semble être en passant le bloc menu en position "absolute", ce que je préférerais éviter.
Est-ce que tous voyez d'où le problème peut venir ? Je pourrais décaler le menu
en décommentant les lignes suivantes pour firefox mais ça fait vraiment trop bricolage:


/*    position: relative;
    top: -20px;*/

Je n'ai pas de IE sous la main mais il me semble que ça marchait correctement la dernière fois que j'ai testé.

Merci beaucoup.
Modifié par lintlint (17 Aug 2007 - 18:48)

Dzana

17 Aug 2007 à 20:47

Salut Lintlint,

Je ne sais pas qui, de FireFox ou d'Opéra, est dans le vrai, mais ce qui est sûr c'est que seul FireFox, dans ce cas, tient compte du "séparateur" que tu as placé au début du menu :

<div id="menu">&nbsp;

J'aurai donc plutôt tendance à dire que c'est FireFox qui est dans le vrai (par rapport aux recommandations du W3C).

Si tu supprimes ce   tu n'auras plus ce décalage indésirable.

Alors bien sûr, en revanche, les éléments dt (élément 1 et élément 2) ne seront plus surlignés en bleu (sauf sous ie7), ce qui est apparemment ton souhait. Mais alors ça devient surtout un problème de sémantique : ce surlignage en bleu est-il vraiment correct sémantiquement ? Est-il bien logique de surligner en bleu seulement les en-têtes d'une liste de définition ?

Je pense qu'il n'est pas très adroit d'imbriquer des listes ul/li à l'intérieur même de tes listes de définitions... Peut-être faudrait-il revoir la structure de tes listes Smiley smile

Bon courage,
Dzana
Modifié par Dzana (17 Aug 2007 - 20:51)

lintlint

18 Aug 2007 à 16:38

Bonjour, merci de ta réponse

Le nbsp n'est là que pour faire apparaître le div qui sans cela est totalement invisible.

Voici un aperçu du rendu du code (corrigé il y avait quelques erreurs) dans 4 navigateurs/moteurs différents: Firefox 2.0.0.6, Konqueror 3.5.6, Opera 9.20, Amaya 9.53. Le rendu auquel je voudrais arriver est celui présent sous Opéra et Konqueror, mais au vu du code le seul qui me semble cohérent est celui d'amaya.

L'utilisation de ces balises (dl, dt, dd) ne me semble pas non plus très pertinente mais j'ai préféré me tenir à l'exemple donné sur allhtml.

Si vous avez d'autres méthodes valides de menu déroulant en CSS avec ou sans JavaScript je suis preneur Smiley smile

Le code mis à jour:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >

  <head>

    <title>menu</title>

    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

  </head>

  <style type="text/css">
  #bloc {
    background: #0F0FFF;
  }
  #menu {
    background: #FF0000;
    font-family: Verdana, "Trebuchet MS", Arial, sans-serif;
    padding: 0;
    width: 600px;
  }
  #menu dl {
    float: left;
    margin: 0px 10px;
    padding: 0;
  }
  </style>
  

  <body>

    <div id="bloc">

      <div id="menu"> 

        <dl>

          <dt>element 1</dt>

          <dd>
            <ul>

              <li><a href="">1.0</a></li>

              <li><a href="">1.1</a></li>

              <li><a href="">1.2</a></li>

            </ul>
          </dd>

        </dl>      

        <dl>

          <dt>element 2</dt>

          <dd>
            <ul>

              <li><a href="">2.0</a></li>

              <li><a href="">2.1</a></li>

            </ul>
          </dd>

        </dl>

        <dl>

          <dt>element 3</dt>

          <dd>
            <ul>

              <li><a href="">3.0</a></li>

              <li><a href="">3.1</a></li>

            </ul>
          </dd>

        </dl>

      </div>

    </div>
  </body>

</html>

Modifié par lintlint (18 Aug 2007 - 16:38)

Dzana

18 Aug 2007 à 20:39

Hello,

Ce que tu peux faire, c'est supprimer le nbsp (comme tu l'as fait dans la version mise à jour) et surtout spécifier une hauteur pour ton div #menu, une hauteur qui soit à la fois relative (pour s'adapter à la taille des titres de listes) et fixe (pour ne pas descendre sur les menus) :

height: 1.2em;

La ça va marcher... Smiley cligne

Mais bon, je continue de penser que ce n'est pas une bonne solution, cette imbrication de listes Smiley cligne

Dzana
Modifié par Dzana (18 Aug 2007 - 20:42)

Igor

18 Aug 2007 à 20:56

<private>
Tiens un ancien tuto de Koala sur des menus déroulant Smiley murf

</private>

koala64

Modérateur

18 Aug 2007 à 21:20

comment ça ?! l'est pas beau mon tuto ? Smiley pelle

mais je n'avais pas ce problème sur l'exemple que je donnais non ? Smiley confuse

Je le mettais en absolu parce que le menu se trouvait à la suite du contenu en fait... Smiley murf

lintlint a écrit :
L'utilisation de ces balises (dl, dt, dd) ne me semble pas non plus très pertinente mais j'ai préféré me tenir à l'exemple donné sur allhtml.

<mode pas_ma_faute>ah bah j'avais pris exemple sur la structure des menus déroulants d'Alsa' tiens... Faut pas écouter tout ce qu'on nous raconte... Smiley lol

</mode pas_ma_faute>

Dzana a écrit :
Mais bon, je continue de penser que ce n'est pas une bonne solution, cette imbrication de listes

Exact.

... ce pourquoi ce ne sera plus le cas dans le prochain tuto des menus déroulants d'Alsa'... que... faut que je trouve du temps pour le finaliser d'ailleurs... --> [ Smiley lapin

]
Modifié par koala64 (18 Aug 2007 - 21:39)

Sujet clos

CSS et mise en forme, CSS3

Firefox: problème de positionnement de <dl> dans un <div>