Definitionsliste einzeilig

[alfie]

Hallo!

Ich möchte die derzeitige Tabelle (Beispiel) in eine Definitionsliste umwandeln.

Mein derzeitiger Stand.
Ich scheitere schon an der einzeiligen Ausgabe (dt {display:inline} ist wirkungslos), von der bündigen Einrückung der dd-Elemente ganz abgesehen.
Bisher getestet: SeaMonkey 2.23, Chrome 31.0.1650.63m, Opera 12.15, IE 8.0.6001.18702

Hinweis: HTML5 muss außen vor bleiben (75% Zugriffe aus Schwellen-/Entwicklungsländern, noch 5% mit IE6 unterwegs).

mfg Alfie

[molily]

Hallo,

Die Standardstyles für für dd sind display: block und margin-left: 40px, die für dt display: block.

Wenn du beide nebeneinander anzeigen willst, kannst du z.B. float und clear verwenden.

dt, dd { float: left; }  
dt { clear: left; width: 20em; }  
dd { margin: 0; }

Ich scheitere schon an der einzeiligen Ausgabe (dt {display:inline} ist wirkungslos)

Es ist nicht wirkungslos, aber dd hat immer noch display: block, daher erzeugt es eine neue Blockbox.

von der bündigen Einrückung der dd-Elemente ganz abgesehen.

Das ist einfach margin-left, die du ausschalten kannst.

Hinweis: HTML5 muss außen vor bleiben (75% Zugriffe aus Schwellen-/Entwicklungsländern, noch 5% mit IE6 unterwegs).

HTML5 ist ein umfangreicher Standard mit hunderten Elementen, Attributen, JavaScript-Schnittstellen, zwei Syntaxdefinitionen, einer Browser- und Parserdefinition usw. usf. Viele verstehen unter »HTML5« das gesamte Ökosystem an Webtechniken.

Ein Großteil von HTML5 kodifiziert lediglich bereits existente Techniken. Ein Großteil von HTML5 ist auch in IE6 nutzbar und die neuen Elemente und Attribute lassen sich auch für IE6 zugänglich machen.

Was table vs. dl für  angeht, so hat HTML5 ohnehin keine neue Auszeichnungsmöglichkeit.

Mathias

[Gunnar Bittersmann]

@@molily:

nuqneH

Was table vs. dl für  angeht, so hat HTML5 ohnehin keine neue Auszeichnungsmöglichkeit.

Ja, sehr ärgerlich, dass Hixie den Sinn des di-Elements nicht verstanden hat.

Qapla'

[molily]

Ja. Daher sehe ich auch keinen zwingenden Grund, hier unbedingt keine Tabelle zu verwenden. table, thead, tbody, tr, th, td … ist viel flexibler als dl, dt, dd und ist inhaltlich angebracht.

Mathias

[alfie]

Hallo Mathias!

Daher sehe ich auch keinen zwingenden Grund, hier unbedingt keine Tabelle zu verwenden. table, thead, tbody, tr, th, td … ist viel flexibler als dl, dt, dd und ist inhaltlich angebracht.

Vorauseilender Gehorsam (aka Semantik). Dann tu’ ich mir das Ganze lieber gar nicht erst an.

mfg Alfie

[alfie]

Hallo Mathias!

Die Standardstyles für für dd sind display: block und margin-left: 40px, die für dt display: block.

Danke, wiedereinmal vergessen…

Wenn du beide nebeneinander anzeigen willst, kannst du z.B. float und clear verwenden.

dt, dd { float: left; }

dt { clear: left; width: 20em; }
dd { margin: 0; }

  
[Naiver Versuch](http://members.chello.at/helmut.schuetz/test/dl_test2.htm).  
  
  

> > Ich scheitere schon an der einzeiligen Ausgabe (`dt {display:inline}`{:.language-css} ist wirkungslos)  
>   
> Es ist nicht wirkungslos, aber dd hat immer noch display: block, daher erzeugt es eine neue Blockbox.  
  
Ja, jetzt ist mir’s klar.  
  

> Ein Großteil von HTML5 kodifiziert lediglich bereits existente Techniken. Ein Großteil von HTML5 ist auch in IE6 nutzbar und die neuen Elemente und Attribute lassen sich auch für IE6 zugänglich machen.  
>   
> Was table vs. dl für  angeht, so hat HTML5 ohnehin keine neue Auszeichnungsmöglichkeit.  
  
Verstehe.  
  
mfg Alfie  

[Matthias Apsel]

Om nah hoo pez nyeetz, alfie!

Naiver Versuch.

Da float die Elemente aus dem normalen Elementfluss nimmt, enthalten deine Listen keine Elemente, du möchtest jedoch die floats einschließen, z.B. durch dl {overflow: hidden} Und dann macht deine ol im dd Probleme.

Da könntest du mehrere dd verwenden. Und dann scheiterst du im IE 6 am notwendigen dd:last-child {clear: left;}, musst also für den IE6 eine Klasse einbauen <dd class="last-child">. Wenn die Nummerierung wichtig ist, wird das auch tricky, am besten hast du sie dann im Markup, was allerdings nicht schön ist.

also doch eine Tabelle verwenden.

Matthias

[alfie]

Hallo Matthias!

Da könntest du mehrere dd verwenden. […]

Grausig.

also doch eine Tabelle verwenden.

Schon überzeugt (spart mir auch eine Menge Arbeit).

mfg Alfie