Absatzformatierungen mit CSS

Dieses Thema im Forum "Web Page Design" wurde erstellt von Bastian, 01.04.2005.

  1. Bastian

    Bastian Thread Starter MacUser Mitglied

    MacUser seit:
    20.06.2003
    Beiträge:
    536
    Zustimmungen:
    10
    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
     
  2. Erika

    Erika MacUser Mitglied

    MacUser seit:
    03.01.2004
    Beiträge:
    232
    Zustimmungen:
    0
    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
     
  3. [BliZZarD]

    [BliZZarD] MacUser Mitglied

    MacUser seit:
    19.09.2003
    Beiträge:
    93
    Zustimmungen:
    0
    Fieser, aber funktionierender Workaround: Gib dem H1 ein padding-bottom im Minusbereich. ;)
     
  4. Colonel Panik

    Colonel Panik MacUser Mitglied

    MacUser seit:
    12.10.2004
    Beiträge:
    169
    Zustimmungen:
    1
    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;
    }
     
    Zuletzt bearbeitet: 01.04.2005
  5. Bastian

    Bastian Thread Starter MacUser Mitglied

    MacUser seit:
    20.06.2003
    Beiträge:
    536
    Zustimmungen:
    10
    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. ;)
     
  6. Nogger

    Nogger MacUser Mitglied

    MacUser seit:
    03.08.2004
    Beiträge:
    367
    Zustimmungen:
    0
    /* 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.
     
Die Seite wird geladen...

Diese Seite empfehlen