nicht angemeldet
Tipps&Tricks? (CSS: dl einzeilig)
Matthias Apsel
Gunnar BittersmannHallo zusammen,
ich habe im Wiki nichts zu einem Abschnitt über Tipps&Tricks finden können. Habe ich etwas übersehen? Ich hätte nämlich etwas:
Standardmäßig werden in einer Definitionsliste dt und dd untereinander dargestellt (jeweils display: block), dd ist etwas eingerückt:
dt ………………
dd ………………
Möchte man hingegen den Term (dt) und dessen Definition (dd) in einer Zeile nebeneinander stehen haben, z. B. noch mit einem Doppelpunkt voneinander getrennt,
dt ………………: dd ………………
dt ………………: dd ………………
liegt zwar display: inline nahe, was allerdings die komplette Definitionsliste in eine Zeile setzt, immer abwechselnd dt ……………… dd ……………… dt ……………… dd ……………… hintereinander. Stattdessen muss dd rechts am dt „vorbeifließen“:
dt {
font-weight: bold;
float: left;
margin-right: 0.5em;
}
/* und noch der Doppelpunkt */
dt:after { content: ': '; }
Viele Grüße,
Robert
-
Om nah hoo pez nyeetz, Robert B.!
Du bist herzlich eingeladen, dich zu beteiligen. Ein möglicher Ort wäre Doku:CSS/Anwendung_und_Praxis. Du kannst natürlich auch erst einmal in deinem Benutzernamensraum experimentieren. Melde dich an, Unterstützung kannst du bekommen, Mitarbeit ist gern gesehen.
Matthias
--
1/z ist kein Blatt Papier.
-
Einen schönen guten Abend Matthias,
Du bist herzlich eingeladen, dich zu beteiligen. Ein möglicher Ort wäre Doku:CSS/Anwendung_und_Praxis.
Vielen Dank für den Tipp – http://wiki.selfhtml.org/wiki/Doku:CSS/Anwendung_und_Praxis/Listen
Du kannst natürlich auch erst einmal in deinem Benutzernamensraum experimentieren.
Dieses Wiki macht von der Funktionalität her ja richtig Spaß :-)
Viele Grüße,
Robert
-
-
@@Robert B.:
nuqneH
Stattdessen muss dd rechts am dt „vorbeifließen“:
Nein, keine allgemein gute Lösung. 'float' versagt, sobald der Text des 'dt'-Elements mehrzeilig ist.
'display: run-in' wäre Mittel der Wahl.
Webkits tun’s, Opera auch. Firefox nicht. IE? Selber testen.
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)-
Hi,
Nein, keine allgemein gute Lösung. 'float' versagt, sobald der Text des 'dt'-Elements mehrzeilig ist.
dt { overflow:hidden; } /* problem hidden as well */
Das wiederum "versagt" nur, wenn auf ein DT mehrere DD folgen. Da muss man dann stattdessen zu einem margin-left greifen.
MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?-
@@ChrisB:
nuqneH
Nein, keine allgemein gute Lösung. 'float' versagt, sobald der Text des 'dt'-Elements mehrzeilig ist.
dt { overflow:hidden; } /* problem hidden as well */
??
Wie soll das gegen die Darstellung
Lorem ipsum dolor sit
amet:
consectetuer adipiscing
elit.helfen, wo
Lorem ipsum dolor sit
amet: consectetuer
adipiscing elit.angesagt ist?
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)-
Hi,
Wie soll das gegen die Darstellung [...]
helfen, woLorem ipsum dolor sit
amet: consectetuer
adipiscing elit.angesagt ist?
Dass die in der Form verlangt wäre, konnte ich aus der Beschreibung nicht herauslesen.
MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?-
@@ChrisB:
nuqneH
Dass die in der Form verlangt wäre, konnte ich aus der Beschreibung nicht herauslesen.
„Möchte man hingegen den Term (dt) und dessen Definition (dd) in einer Zeile nebeneinander stehen haben, z. B. noch mit einem Doppelpunkt voneinander getrennt“ ist etwas ungenau formuliert.
Es sollte heißen: Möchte man hingegen, dass sich die Definition (dd) in derselben Zeile an Term (dt) anschließt …
Wenn man nur den Fall vorsieht, dass der Inhalt des Terms (dt) kurz und immer einzeilig ist, kommt man ganz schnell in Schwierigkeiten:
Bei schmalen Viewports (mobiles Gerät) ist ein Term schon nicht mehr einzeilig.
Und selbst wenn es momentan passt, Texte ändern sich, werden ergänzt … oder übersetzt.
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)-
Hallo Gunnar,
Wenn man nur den Fall vorsieht, dass der Inhalt des Terms (dt) kurz und immer einzeilig ist, kommt man ganz schnell in Schwierigkeiten:
Bei schmalen Viewports (mobiles Gerät) ist ein Term schon nicht mehr einzeilig.
Auch wenn der Term aus nur einem Wort besteht? Das, und nur das, ist der Anwendungsfall, den ich im Auge habe.
Aber prinzipiell scheint mit den jetzigen Möglichkeiten von CSS die von mir gewünschte Darstellung im Allgemeinen nicht so (einfach) umsetzbar zu sein.
Viele Grüße,
Robert-
@@Robert B.:
nuqneH
Auch wenn der Term aus nur einem Wort besteht? Das, und nur das, ist der Anwendungsfall, den ich im Auge habe.
Dass das Auge kurzsichtig ist, hatte ich ja erwähnt.
Aber prinzipiell scheint mit den jetzigen Möglichkeiten von CSS die von mir gewünschte Darstellung im Allgemeinen nicht so (einfach) umsetzbar zu sein.
Das Problem liegt tiefer: in den jetzigen Möglichkeiten von HTML. Es fehlt ein Element, was zusammengehörige 'dt' und 'dd' gruppiert. In XHTML 2 war 'di' vorgesehen, in HTML5 zwischenzeitlich auch mal.
Die Idee wurde wieder verworfen. Dumm.
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain) -
@@Robert B.:
nuqneH
Aber prinzipiell scheint mit den jetzigen Möglichkeiten von CSS die von mir gewünschte Darstellung im Allgemeinen nicht so (einfach) umsetzbar zu sein.
dt, dd { display: inline }und nach guter alter Clear-fix-Manie
dd+dt::before { content: ''; display: table }Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)
-
-
-
-
Om nah hoo pez nyeetz, Gunnar Bittersmann!
"Lorem ipsum dolor sit"
"amet:"
consectetuer adipiscing
elit. [1]versus
"Lorem ipsum dolor sit"
"amet:"consectetuer
adipiscing elit. [2]Ob ein fluides Layout nun bei Verkleinerung des Viewports aus
"Lorem ipsum dolor sit amet:"consectetuer adipiscing elit.[1] oder [2] macht, ich sehe da keinerlei Einschränkungen in der Zugänglichkeit.
Matthias
--
1/z ist kein Blatt Papier.
-
-
-