[ résolu ] Largeur des élements <dt>

Saluton,
Il semble que le style width des éléments <dt> d'une <dl> ne soit pas accessible par CSS.
Me trompes-je ?
Dankon,
Amike, MK
Modifié par Maljuna Kris (05 Oct 2007 - 11:25)

Salut,

width est parfaitement accessible sur un dt... C'est un élément de type "block".
Modifié par koala64 (05 Oct 2007 - 09:47)

Et pourtant, j'ai ce petit bout de code :

<style>
dt, dd {display:inline;
        font-size:2em}
dt{font-weight :bold;
   color: blue;
   width:14em;
   padding: 0 1em;
   background-color: rgb(225,225,225);
   border-style: solid;
   border-width: 2px}
dd{font-style:italic;color: gray}
</style>
<dl>
    <dt>dt1</dt>
    <dd>display:inline</dd><br />
    <dt>dt2</dt>
    <dd>display:inline</dd>
</dl>

qui me donne le résultat suivant ou width:14em n'est notoirement pas pris en compte

dt, dd {display:inline;}
dt {width:14em;}

Les éléments en affichage de type en-ligne (display: inline) ne peuvent effectivement pas recevoir de largeur (width).

Mais comme le précise koala64, dt est à la base un élément de type "block", qui peut parfaitement recevoir une largeur (en pixels, em, pourcentages, etc.).

Note en passant: donner une largeur en EM à un élément, à moins que l'on sache très précisément ce que l'on fait, c'est une mauvaise idée.

Merci de votre attention, toutefois, tout cela est bel et bon, mais si vous testez le petit bout de code que je vous ai posté (je ne capte pas comment insérer une image sur ce forum), vous verrez que la largeur des <dt> n'est pas affectée par la feuille de style.
J'ai mis en EM pour le test afin que l'éventuel résultat saute aux yeux. Or, ce qui saute aux yeux c'est que les <dt> ne font pas 14em.

Re,

Comme te l'a précisé Florent, c'est parce que tu passes ton dt en display: inline... donc la largeur n'est plus prise en compte.

Désolé, je viens de comprendre.
Le fait de forcer l'affichage inline d'éléments blocks anihile la possibilité d'affecter leur largeur, c'est bien ça ?

Maljuna Kris a écrit :
tout cela est bel et bon, mais si vous testez le petit bout de code que je vous ai posté (je ne capte pas comment insérer une image sur ce forum), vous verrez que la largeur des <dt> n'est pas affectée par la feuille de style.

Tout à fait, et j'explique pourquoi dans mon message précédent, mais j'aurais dû être explicite: dans le code que vous donnez, la feuille de style demande à ce que tous les éléments dt soient en affichage de type en-ligne. Quand bien même dt serait un élément de type bloc, si on demande explicitement à ce qu'il s'affiche comme un élément de type en-ligne il est logique que ses propriétés en soient affectées.

Je cite mon message précédent en passant en rouge les points importants:

Florent V. a écrit :

[#red]dt[/#], dd {[#red]display:inline;[/#]}
dt {width:14em;}

Les éléments en affichage de type en-ligne (display: inline) ne peuvent effectivement pas recevoir de largeur (width).

Voili voilou...

Maljuna Kris a écrit :
Le fait de forcer l'affichage inline d'éléments blocks anihile la possibilité d'affecter leur largeur, c'est bien ça ?

Oui, en effet. Au niveau du rendu graphique, les éléments que l'on appelle «de type block» sont en fait essentiellement des éléments dont la valeur par défaut de la propriété display est "block". Si tu passes à "inline", ça change effectivement la donne.

On notera pour culture générale qu'il existe aussi le type "inline-block", qui est en quelque sorte un rendu mixte: l'élément est une boite rectangulaire qui peut avoir une largeur, hauteur, etc., mais qui se comporte en quelque sorte comme un caractère sur la ligne de texte. C'est très intéressant dans certains cas, mais il y a un problème: support bugué dans IE, et pas de support du tout dans Firefox (oui, même Firefox peut être à la traine...).
Edit: pour le support dans IE, il faudrait que je vérifie, ça a l'air correct dans IE 6 et 7...
Modifié par Florent V. (05 Oct 2007 - 11:15)

Florent V. a écrit :
(oui, même Firefox peut être à la traine...).

C'est amusant, le fait qu'on se sente encore obligé de prendre ce type de précautions oratoires.
Modifié par Laurent Denis (05 Oct 2007 - 11:14)

Laurent Denis a écrit :
C'est amusant, le fait qu'on se sente encore obligé de prendre ce type de précautions oratoires.

Ce n'est pas une précaution oratoire, mais une invitation (lancée à l'aveugle) à l'élargissement des perspectives.

Bon, ça ne m'arrange pas, mais je vais faire avec en attendant le support universel d' "inline-block".

Il me rste à vous remercier encore, et à clore ce post.

Amike, MK