Definitionsliste formatieren

[AirMax]

Hallo selfhtml-ler,

habe eine Frage bezüglich Definitionslisten:
Ich habe eine simple Definitionsliste erstellt & jeder "definition description" (<dd>) eine individuelle Breite per CSS zuweisen. Aber beim Testen im Browser merke ich, dass die width: 5em; ignoriert wird. Wenn ich stattdessen eine background-color: red; definiere, wird sie im browser auch angezeigt. Ich kann mir einfach nicht erklären, warum die Breite unterschlagen wird?!
Wäre über Eure Hilfe dankbar!

Gruß
AirMax

[Cheatah]

Hi,

Ich kann mir einfach nicht erklären, warum die Breite unterschlagen wird?!

wenn es sich beispielsweise um ein Inline-Element handelt, ist dieses Verhalten absolut korrekt.

Cheatah

[Beat]

Ich kann mir einfach nicht erklären, warum die Breite unterschlagen wird?!
wenn es sich beispielsweise um ein Inline-Element handelt, ist dieses Verhalten absolut korrekt.

Wenn die CSS-Formatierung (der Browser Default zum Element) display:inline ist, dann werden typische Blockeigenschaften (width, margin) ignoriert.

mfg Beat

[ChrisB]

Hi,

Ich kann mir einfach nicht erklären, warum die Breite unterschlagen wird?!

Das kann an Hand deiner Beschreibung vermutlich niemand.

Wäre über Eure Hilfe dankbar!

Du bist doch nicht zum ersten Mal hier ... </hilfe/charta.htm#tipps-fuer-fragende>

MfG ChrisB

[AirMax]

Hi ChrisB & Cheatah

Ich kann mir einfach nicht erklären, warum die Breite unterschlagen wird?!

Das kann an Hand deiner Beschreibung vermutlich niemand.

Ja, sorry. Hier mal ein bißchen ausführlicher:

  
    <dl>  
      <dt class="foo">....</dt>  
        <dd class="baz" id="bar1">.....</dd>  
      <dt class="foo">....</dt>  
        <dd class="baz" id="bar2">.....</dd>  
    </dl>

  
#bar1 {  
	width: 7em;  
	background-color: red;  
}  
  
#bar2 {  
	width: 9em;  
	background-color: red;  
}  

Wenn ich es wie oben schreibe wird die Breite von #bar1 und #bar2 ignoriert. Hab' mal Deinen Tipp, Cheatah, ausprobiert:

  
#bar1 {  
	display: block;  
	width: 7em;  
	background-color: red;  
}  
  
#bar2 {  
	display: block;  
	width: 9em;  
	background-color: red;  
}  

Jetzt wird die Breite auch berücksichtigt.
Mir war garnicht bewusst, dass Breitenangaben bei inline-Elementen nicht berücksichtigt werden ... *wunder*

Vielen Dank & Gruß

[Gunnar Bittersmann]

@@AirMax:

nuqneH

Das kann an Hand deiner Beschreibung vermutlich niemand.
Ja, sorry. Hier mal ein bißchen ausführlicher:

Nicht ausführlich genug. Es ist nicht erkennbar, warum 'dt'/'dd' bei dir Inline-Elemente sind.

<dl>
      <dt class="foo">....</dt>
        <dd class="baz" id="bar1">.....</dd>
      <dt class="foo">....</dt>
        <dd class="baz" id="bar2">.....</dd>
    </dl>

Die Klassen "foo" und "bar" sind völlig überflüssig, wenn wie hier alle 'dt'-Elemente der Klasse "foo" und alle 'dd'-Elemente der Klasse "bar" angehören.

Wenn du nur die 'dt'/'dd' dieser einen 'dl' oder von speziellen 'dl' formatieren willst, dann gibt dieser/n 'dl' eine ID bzw. Klasse und selektiere per Nachfahren- oder Kindselektor.

#bar1
#bar2

Diese Selektoren passen nicht zu obigem Markup.

Mir war garnicht bewusst, dass Breitenangaben bei inline-Elementen nicht berücksichtigt werden ... *wunder*

So manche Wunder lassen sich aufklären.

„Diese Eigenschaft gilt nicht für nicht ersetzte Elemente auf Inline-Ebene. Die Breite der Boxen für ein nicht ersetztes inzeiliges Element ist die des in ihnen dargestellten Inhalts […]“ [CSS2 §10.2]

Qapla'

[AirMax]

Hallo Gunnar,

danke auch Dir für Deine Tipps.

Wenn du nur die 'dt'/'dd' dieser einen 'dl' oder von speziellen 'dl' formatieren willst, dann gibt dieser/n 'dl' eine ID bzw. Klasse und selektiere per Nachfahren- oder Kindselektor.

Ja, ich nutze nur 2 Definitionslisten für dieses Projekt, und diese haben das gleiche optische Erscheinungsbild. Von daher könnte man schon noch ein wenig vereinfachen, wobei ich bei der Verwendung der Pseudoklasse :first-child{}; und Kindselektor ">" im Zusammenhang mit IE immer mit mir hadere.

#bar1
#bar2
Diese Selektoren passen nicht zu obigem Markup.

Wieso? Die IDs in HTML sind doch 'bar1' und 'bar2'.

„Diese Eigenschaft gilt nicht für nicht ersetzte Elemente auf Inline-Ebene. Die Breite der Boxen für ein nicht ersetztes inzeiliges Element ist die des in ihnen dargestellten Inhalts […]“ [CSS2 §10.2]

Diese Dokumentation ist goldwert!!! Habe sie gleich gebookmarkt.

Danke & Gruss

[Gunnar Bittersmann]

@@AirMax:

nuqneH

wobei ich bei der Verwendung der Pseudoklasse :first-child{}; und Kindselektor ">" im Zusammenhang mit IE immer mit mir hadere.

Der IE kann beides (ab Version 7). Ältere IEs sind wohl mittlerweile irrelevant. Du kannst ihnen aber mit CSS-Expressions auf die Sprünge helfen. Ohne JavaScript sieht’s eben in alten IEs anders aus, na und?

Wieso? Die IDs in HTML sind doch 'bar1' und 'bar2'.

Äh ja. Da hatte ich nicht so genau hingekuckt und bin nach @class schon in die nächste Zeile gesprungen.

Diese Dokumentation ist goldwert!!! Habe sie gleich gebookmarkt.

?? Sag bloß, du kanntest die CSS-Spezifikation vorher noch nicht? Aber Vorsicht, die deutsche Übersetzung mag sich besser lesen, enthält aber Übersetzungsfehler und ist an einigen Stellen durch Revision 1 [CSS21] überholt.

Qapla'

[AirMax]

Guten Morgen Gunnar

Der IE kann beides (ab Version 7). Ältere IEs sind wohl mittlerweile irrelevant. Du kannst ihnen aber mit CSS-Expressions auf die Sprünge helfen. Ohne JavaScript sieht’s eben in alten IEs anders aus, na und?

Ich habe bisher immer überlegt, bis zu welcher Version des IE ich meine Projekte kompatibel gestalte. Und meine Schallmauer nach unten war bisher immer Version 6. Aber vielleicht reicht, wie Du bereits andeutest, Version 7 auch schon aus. Das würde einiges deutlich vereinfachen ...

Ich bin kein Informatik-Spezi. Von daher ist Java-Skript Zukunftsmusik. Bin gerade mit der PHP-Baustelle (und seinen Schnittstellen, z.B. Datenbanken) beschäftigt.

?? Sag bloß, du kanntest die CSS-Spezifikation vorher noch nicht?

Doch, schon. Aber der link in den post ging bei mir immer zu schnell wieder unter: "aus den augen - aus dem sinn" sozusagen.

Gruss

[Gunnar Bittersmann]

@@AirMax:

nuqneH

Von daher ist Java-Skript Zukunftsmusik.

Du meinst JavaScript.

Qapla'

[AirMax]

Du meinst JavaScript.

Siehst Du, hab' von nix ne Ahnung :D

Gruss