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.

Pull Quote mit Rahmen

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:

border-left: 1em solid #999;
border-right: 1em solid #999;

Lösung

Verwenden Sie das Element blockquote, um den Inhalt der Pull Quote zu kennzeichnen:

<blockquote>
  <p>&laquo;Ma quande lingues coalesce, li grammatica del.&raquo;</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

  

<< 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