Absatzformatierungen mit CSS

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

  1. Bastian

    Bastian Thread Starter Mitglied

    Beiträge:
    536
    Zustimmungen:
    10
    Mitglied seit:
    20.06.2003
    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 Mitglied

    Beiträge:
    232
    Zustimmungen:
    0
    Mitglied seit:
    03.01.2004
    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] Mitglied

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

    Colonel Panik Mitglied

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

    Bastian Thread Starter Mitglied

    Beiträge:
    536
    Zustimmungen:
    10
    Mitglied seit:
    20.06.2003
    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 Mitglied

    Beiträge:
    367
    Zustimmungen:
    0
    Mitglied seit:
    03.08.2004
    /* 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.
     
  1. Wir verwenden Cookies, weil diese die Bereitstellung unserer Dienste für dich erleichtern und dich z.B. nach der Registrierung angemeldet halten.