Mes <dl> en font qu'à leur tête !

Bonjour,

Dans plusieurs pages de mon site, j'ai recours à des listes de définition. Toutes font référence à la même mise en forme CSS, et aucune ne semble réagir de la même façon...

Exemple 1: la page
le code:

<dl> 
        <dt>Boucles d'oreilles :</dt> 
        <dd>IGI-F4G17316 - 0,24 carat<br /> 
          IGI-F4G17329 - 0,24 carat</dd>
 
        <dt>Pendentifs diamant rond :</dt> 
        <dd>CCIP-179255 - 0,23 carat</dd>
 
        (...)
 
        <dt>Solitaires :</dt> 
        <dd>CCIP-179233 - 0,22 carat</dd> 

        <dt>Solitaires :</dt> 
        <dd>CCIP-179209 - 0,55 carat</dd> 
</dl>

la CSS:

dl dt {
   font-weight: bold;
   display: inline;
   float: left;
   clear: left; }

dl dd {
   text-indent: 0;
   text-align: justify;
   margin-left: 210px; }

C'est grave docteur ?
Pour un autre exemple, voir ici (la liste des pays s'affiche en bas de page, et après rafraichissement de la page avec F5, tout ou presque, rentre dans l'ordre).
Modifié par ze_drix (18 Apr 2008 - 17:44)

...Moi aussi ça me laisse perplexe !

Je viens de trouver, il s'agissait de "Clear: both", à remplacer (dans mon cas) par "clear: left" et tout rentre dans l'ordre dans toutes les pages


[EDIT] J'ai parlé un peu vite, c'est résolu sur IE6, mais pas sous FF... Je vois pas vraiment ou est le problème
Modifié par ze_drix (17 Apr 2008 - 14:41)

Personne n'a un ch'tit élément de réponse ?...

Je me suis permis de poster le même topic dans le salon des débutants... C'était peu être pas sa place ici, je sais pas, vu que je n'ai aucune aide, je m'étais surement trompé d'endroit désolé.
Modifié par ze_drix (28 Apr 2008 - 11:16)

Bonjour,

C'est bien un problème de CSS spécifiquement, et la réponse est ici:
http://www.blog-and-blues.org/articles/Float,_clear_et_contextes_de_formatage

Plus globalement, le choix des listes de définition n'est pas très pertinent ici. Il correspond à un vieil abus de «sémantique» qui consiste à dire que toute série d'éléments avec terme1 mis en rapport avec terme2 doit être une liste de définition, ce qui rend la liste de définition plutôt inutile pour distinguer... des définitions (et pas tout et n'importe quoi ).

Dans les exemples que tu cites, des tableaux ne seraient pas inappropriés.
Modifié par Felipe (14 May 2008 - 18:26)

Florent V. a écrit :
Plus globalement, le choix des listes de définition n'est pas très pertinent ici. Il correspond à un vieil abus de «sémantique» qui consiste à dire que toute série d'éléments avec terme1 mis en rapport avec terme2 doit être une liste de définition, ce qui rend la liste de définition plutôt inutile pour distinguer... des définitions (et pas tout et n'importe quoi ).

Dans les exemples que tu cites, des tableaux ne seraient pas inappropriés.

Et voila ! A force de (trop) bien vouloir faire, on en oubli que les tableaux servent encore à présenter des données .

Florent V. a écrit :
C'est bien un problème de CSS spécifiquement, et la réponse est ici

Là, on peut dire que la réponse est détaillé MERCI... Cependant (mais je m'y suis pas encore penché sérieusement) j'ai déja une CSS conditionnelle pour IE avec un zoom: 1 pour #contenu dl, #contenu dd, #contenu dt et apparemment ça règle pas mon problème.
Modifié par ze_drix (28 Apr 2008 - 16:12)

Je viens juste de remarquer quelque chose vraiment étrange...

En changeant la taille de la police (Ctrl + roulette de la souris) plus petit, ma page s'affiche correctement, plus gros idem. Mais dès que je remet la police en taille originale, le problème énoncé depuis le début revient .

Quelqu'un pourrait m'expliquer ?
Modifié par ze_drix (29 Apr 2008 - 16:18)

Non, personne ne peut expliquer ça ?

Bonjour,

c'est à l'évidence un problème avec les flottants: ils se positionnent dans le premier espace disponible et ça doit être le cas dans ta page
Si tu modifies la taille du texte, cela modifie ces espaces.

J'ai un peu de mal à reprendre ce que tu as fait parce qu'en faisant flotter dt et dd, ils se retrouvent sous la fin de la colonne de gauche (problèmes de flottants et de clear, rien d'étonnant ) mais je te propose (sur une idée de Benjamin D.C.)

dl {
  position: relative;
}

dl dt {
  background-color: red /* débogage */
  position: absolute;
/* éventuellement width: 220px; selon le fond souhaité */
}

dl dd {
  background-color: blue;
  margin-left: 230px;
}

Sinon regarde du côté des formulaires qui utilisent 2 colonnes (quelqu'un a-t'il un lien vers un tuto?). Très schématiquement, tu as un <p>aragraphe avec label et input (ou 2 span), tous les 2 flottants avec une largeur à préciser et tu peux fignoler avec text-align: left/right)