Absatzformatierungen mit CSS

[Bastian]

Hallo zusammen,

ich stehe einmal mehr vor einem kleinen CSS-Problem. Vielleicht sehe ich auch vor lauter Bäumen den Wald nicht mehr...

Also: Jede Seite hat bei mir einen Haupttitel, den ich mit h1 formatiere. Das h1-Element kommt nur einmal vor. Danach gibt es Abschnittsüberschriften mit h2 und h3 und den Fliesstext mit p.

Wenn ich nun nach einem p-Abschnitt eine neue h2-Überschrift setzen will, klebt diese förmlich am p-Element des vorangehenden Absatzes. Eigentlich kein Problem: Ich definiere einen Abstand padding-top für h2. Doch dann habe ich das Problem, dass dieser Abstand auch dann zustande kommt, wenn die h2-Überschrift direkt nach dem h1-Titel folgt, was zu einer unschön grossen Lücke führt.

Wer das alles verstanden hat und mir einen Tipp geben kann, darf gerne antworten.

Merci

 

[Erika]

Du musst Dich enscheiden, ob mit oder ohne Abstand.
Hast Du eine Seite, die mit Hand gepflegt wird, dann setz doch einfach <br> ein.
Sonst wirst Du wohl ein sript brauchen.

Erika

 

[[BliZZarD]]

Fieser, aber funktionierender Workaround: Gib dem H1 ein padding-bottom im Minusbereich.

 

[Colonel Panik]

line-height probieren?!

Wenn ich das richtig sehe, könntest Du das ganze durch einen line-height Befehl in den Griff bekommen:

Beispiel eines zentralen CSS:

#Text01 {
line-height:9pt;
font-style:Verdana;
font-weight:normal;
font-size:10px;
font-family: Verdana, Helvetica, Tahoma, sans-serif;
text-align:justify;
margin-left:80px;
margin-right:50px;
margin-top:10px;
}

 

[Bastian]

Danke für eure Antworten.

Das mit dem Minuswert für das h1-Tag funktioniert dann aber nicht mehr, wenn nach h1 direkt ein p-Absatz folgt. Leider.

Ich denke, ich werde nach einem p-Absatz einfach eine oder zwei Leerzeilen zwischenschalten lassen.

 

[Nogger]

/* Die Standardwerte sind browserspezifisch, also erstmal eine saubere Ausgangslage schaffen */

h1, h2, h3, p
{
margin: 0;
padding: 0;
}

p
{
margin-top: 0.5em;
}

h1, h2, h3
{
margin-bottom: 0.5em;
}

Durch "collapsing margins" gilt als vertikaler Abstand zweier Elemente der höhere der beiden Werte "margin-bottom oberes Element" und "margin-top unteres Element". Siehe Erklärungen zum Box Model in der CSS2 Spezifikation.