Pull Quotes mit Rahmen
(Auszug aus "CSS Kochbuch" von Christopher Schmitt)
Problem
Sie wollen eine Pull Quote an der Ober- und Unterseite mit Rahmen versehen, wie in der folgenden Abbildung gezeigt.
Abbildung: Eine Pull Quote mit Rahmen.
Um anstelle der Ober- und Unterseite die linke und rechte Rahmenseite zu definieren, verwenden Sie die Eigenschaften border-left und border-right:
Lösung
Verwenden Sie das Element blockquote, um den Inhalt der Pull Quote zu kennzeichnen:
<blockquote>
<p>«Ma quande lingues coalesce, li grammatica del.»</p>
</blockquote>
Danach gestalten Sie den Text und die Rahmenseiten mit Hilfe von CSS-Regeln:
blockquote {
float: left;
width: 200px;
margin: 0 0.7em 0 0;
padding: 0.7em;
color: #666;
background-color: black;
font-family: Georgia, Times, "Times New Roman", serif;
font-size: 1.5em;
font-style: italic;
border-top: 1em solid #999;
border-bottom: 1em solid #999;
}
blockquote p {
margin: 0;
padding: 0;
text-align: left;
line-height: 1.3em;
}
Diskussion
Mit Hilfe der Eigenschaften float und width können Sie festlegen, ob und wie der Hauptinhalt die Pull Quote umfließen soll:
float: left;
width: 200px;
Durch eine Änderung der Vorder- und Hintergrundfarben der Pull Quote können Sie diese vom umgebenden Text absetzen:
color: #666;
background-color: black;
Passen Sie die Eigenschaften border-top und border-bottom farblich an den Text in der Pull Quote an:
border-top: 1em solid #999;
border-bottom: 1em solid #999;
Beachten Sie bitte, dass der Internet Explorer bis zur Version 5.5 wegen seines Boxmodell-Fehlers das Ergebnis etwas anders darstellt als CSS2-konforme Browser. Detaillierte Informationen und einen Workaround finden Sie im Rezept Besondere Werte für Internet Explorer 5.x für Windows.
Siehe auch
- Den Abschnitt Seitenlayouts, in dem Sie weitere Techniken für das Seitenlayout finden, die die Eigenschaft float verwenden,
- das Rezept Überschriften mit Rahmen, um Überschriften mit Rahmen zu versehen,
- die Rezepte Scheinbar unpassende Dinge kombinieren, um Kontraste zu erzeugen und Kontraste verwenden, um den Blick zu führen für weitere Informationen zum Design mit kontrastierenden Elementen.
<< 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