Le DVD vidéo de Florent V. :

Elephorm apprendre XHTML et CSS
Rechercher dans le sujet :
Forum
» CSS et mise en forme
» Firefox: problème de positionnement de <dl> dans un <div>
Auteur
lintlint
# 17 Aug 2007 - 18:46:43
Citer
2 Posts
 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.

previews/13714-Capture-ff.png
previews/13714-Capture-op.png

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:08
Citer
41 Posts
 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 &nbsp; 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 smile

Bon courage,
Dzana
Modifié par Dzana (17 Aug 2007 - 20:51)
http://www.dzana.net/ 
^
lintlint
# 18 Aug 2007 - 16:38:16
Citer
2 Posts
 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.

previews/13714-browsers.png


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 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:00
Citer
41 Posts
 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... cligne
Mais bon, je continue de penser que ce n'est pas une bonne solution, cette imbrication de listes cligne

Dzana
Modifié par Dzana (18 Aug 2007 - 20:42)
http://www.dzana.net/ 
^
Igor
# 18 Aug 2007 - 20:56:35
Citer
Modérateur
5806 Posts
 <private>
Tiens un ancien tuto de Koala sur des menus déroulant murf lol
</private>
http://maynaud.name/ 
^
koala64
# 18 Aug 2007 - 21:20:49
Citer
Modérateur
4019 Posts
 comment ça ?! l'est pas beau mon tuto ? pelle

mais je n'avais pas ce problème sur l'exemple que je donnais non ? confuse Je le mettais en absolu parce que le menu se trouvait à la suite du contenu en fait... 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... 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 cligne
Exact. cligne

... 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... --> [ lapin ]
Modifié par koala64 (18 Aug 2007 - 21:39)
^
Le sujet est clos.
Aller à
Powered by Phedio v3.8.5 beta in 7.7 ms © dew