[CSS] Abstand zwischen Listenelementen

[--Sirius--]

Hallo,

ich möchte ein Literaturverzeichniss machen und da reicht mir eine Definitionsliste. Nur habe ich jetzt das Problem das alles direkt untereinander steht. Durch ein <br /> tritt der gewünschte Effekt ein:

<dl>
  <dt>1.Buch</dt>
  <dd>Name</dd>
  <dd>Autor</dd><br />
  <dt>2.Buch</dt>
  <dd>Name</dd>
  <dd>Autor</dd><br />
</dl>

Aber das ist nicht XHTML Strict konform und nun suche ich eine Möglichkeit das <br /> zu ersetzen. Bei Self-Html usw. liest man immer nur von den Eigenschaften die Aufzählungszeichen zu verändern aber nicht den Abstand. Man könnte das zwar über CSS z.b. mit Margin-Bottom machen aber wie spricht man dann nur den letzten Punkt an (hier: Autor)? Ich denke man das ist kein Problem für den CSS-Experten unter euch

 

[Keita]

mit margins, entweder margin-top für dt-Elemente und/oder margin-bottom für dd-Elemente. Da auf ein dd-Element weitere dd-Elemente (nicht nur syntaktisch, sondern auch semantisch) folgen können, wäre eine Kombination besser.

greetings, Keita

 

[Adagio]

Wenn es jetzt 100% um dein Beispiel geht, müsstest du jedem DT einfach einen Abstand nach oben hin geben mit margin oder padding, z.B.:

dl dt
{
padding-top: 1em;
}

Für den Abstand des letzten DDs kannst du diesen auch simpel dem DL geben

dl
{
padding-bottom: 1em;
}

Bringt vom Effekt das Gleiche

 

[--Sirius--]

Vielen Dank, das war genau das was ich gesucht hab.

Ich hab jetzt ein "dl dt {padding: 0.7em 0em; font-weight: bold;}" draus gemacht und so siehts noch besser aus.