dl avec dt et dd sur la meme ligne...

Version imprimable

07/04/2006, 18h37
TabrisLeFol

dl avec dt et dd sur la meme ligne...

Bonjour,
J'aimerais pouvoir disposer, comme le dit le titre de une dl avec dt et dd sur la meme ligne.
D'habitude on a :
dt
dd
je voudrais avoir
dt dd

J'imagine que passer les elements en display:inline devraient fonctionner (je n'ai pas essayé) mais cela m'empeche de mettre des elements de type bloc dedans et il faudra que j'exprime explicitement les sauts de lignes pour que les dt dd ne soient pas tous sur la meme ligne.
Une autre soltion devrait etre de passer par un positionnement float ou autre permettant une telle disposition mais je ne suis pas très à l'aise avec les positionnements...
Est ce que quelqu'un pourrait me montrer commment faire?
D'avance merci

support : xhtml strict 1.0 + CSS 2
07/04/2006, 21h42
vinzzzz

Citation:

il faudra que j'exprime explicitement les sauts de lignes pour que les dt dd ne soient pas tous sur la meme ligne.

C'est pas ce que tu veux justement mettre les dt et les dd sur la même ligne?

Citation:

D'habitude on a :
dt
dd
je voudrais avoir
dt dd
07/04/2006, 21h49
TabrisLeFol

oui mais seulement par paire, avec inline j'aurais
dt dd dt dd dt dd...
à moins que je ne precise manuellement des <br /> ce qui n'est pas l'ideal...

Avec le positionement il suffirait juste de decaler le dd pour le mettre à droite du dt en gardant ceux ci fixes pour que cela fonctionne, je crois... Mais pour l'instant je ne sais pas comment... Je fais des essais, j'arriverais peut être à quelque chose.

EDIT : dt { float:left;} semble pas mal
RE-EDIT : Semble convenir parfaitement. Résolu.
07/04/2006, 22h18
TabrisLeFol

Nouveau problème, plus exactement la suite.
Le positionement est correcte mais les dt et dd sont collés. :arf:
Et si j'ajoute un dd:after { content:" : "; } le dernier espace n'est pas affiché et symetriquement avec un dd:before { content:": ";} c'est le premier qui n'est pas affiché....
07/04/2006, 22h23
vinzzzz

Utilise les marges internes/externes pour que tes dt et dd ne soient pas collées.
Sinon pour before et after il me semble que internet explorer ne connais pas...
07/04/2006, 22h32
TabrisLeFol

Citation:

Envoyé par vinzzzz

Utilise les marges internes/externes pour que tes dt et dd ne soient pas collées.

Oui j'en utilisé plusieurs dont certaines qui fonctionnait pas pour je ne sais pas quelle raison.
dt { padding-right:5px; } marche niquel !

Citation:

Envoyé par vinzzzz

Sinon pour before et after il me semble que internet explorer ne connais pas...

Malheureusement... Je me suis résolu à créer une version basique speciale pour IE ( En fait la meme que celle utilisée par lynx/links... :lol: )
07/04/2006, 23h27
vinzzzz

Citation:

Je me suis résolu à créer une version basique speciale pour IE ( En fait la meme que celle utilisée par lynx/links... )

Vivement que tous les navigateurs accordent leurs violons pour ce qui est de l'interpretation du css... c'est franchement galère de devoir bidouiller a chaque fois :(