Überschriften mit Rahmen

(Auszug aus "CSS Kochbuch" von Christopher Schmitt)

Problem

Sie wollen eine Überschrift mit Stildefinitionen für die Rahmenober- und -unterseite versehen, wie in der folgenden Abbildung gezeigt.

Überschrift mit Stildefinitionen für Rahmen

Abbildung: Eine Überschrift mit Stildefinitionen für Rahmen.

Lösung

Benutzen Sie die Eigenschaften border-top und border-bottom, wenn Sie den Stil für die Überschrift definieren:

h2 {
 font: bold italic 2em Georgia, Times, "Times New Roman", serif;
 border-bottom: 2px dashed black;
 border-top: 10px solid black;
 margin: 0;
 padding: 0.5em 0 0.5em 0;
 font-size: 1em;
}
p {
 margin: 0;
 padding: 10px 0 0 0;
}

Diskussion

Zusätzlich zur Rahmenober- und -unterseite können Block-Level-Elemente mit Hilfe der Eigenschaften border-left beziehungsweise border-right auch mit einer linken und rechten Rahmenseite versehen werden. Bei border-top, border-bottom, border-left und border-right handelt es sich wiederum um Kurzschrift-Eigenschaften, mit denen die Werte für die Breite, den Rahmenstil und die Farbe für die entsprechende Rahmenseite gemeinsam definiert werden können.

Ohne die beiden Kurzschrift-Eigenschaften müssten wir das obige Beispiel um vier zusätzliche Deklarationen erweitern:

h2 {
 font: bold italic 2em Georgia, Times, "Times New Roman", serif;
 border-bottom-width: 2px;
 border-bottom-style: dashed;
 border-bottom-color: black;
 border-top-width: 10px;
 border-top-style: solid;
 border-top-color: black;
 margin: 0;
 padding: 0.5em 0 0.5em 0;
 font-size: 1em;
}

Die vier Kurzschrift-Eigenschaften für die verschiedenen Rahmenseiten lassen sich ihrerseits mit der gemeinsamen Kurzschrift-Eigenschaft border ausdrücken. Diese kommt zum Einsatz, wenn alle Rahmenseiten die gleiche Breite, das gleiche Erscheinungsbild und die gleiche Farbe haben sollen. (Beachten Sie aber, dass die border-Eigenschaft von Internet Explorer 5 nur schlecht unterstützt wird.)

h2 {
 border: 3px dotted #33333;
}

Beim Einrichten der Rahmen sollten Sie sicherstellen, dass die Innenabstände des Elements genügend Platz zwischen dem Text und dem Rahmen lassen, um die Lesbarkeit zu erhöhen. Ohne den nötigen Zwischenraum würde der Text der Überschrift eingezwängt erscheinen.

Siehe auch

Das Rezept Seitenränder für weitere Informationen zu den möglichen Rahmenstilen und zur Kurzschrift-Eigenschaft border.

  

<< zurück vor >>

 

 

 

Tipp der data2type-Redaktion:
Zum Thema CSS bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an:

Copyright der deutschen Ausgabe © 2007 by O’Reilly Verlag GmbH & Co. KG
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "CSS Kochbuch" denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

O’Reilly Verlag GmbH & Co. KG, Balthasarstr. 81, 50670 Köln