Pull Quotes mit Bildern

(Auszug aus "CSS Kochbuch" von Christopher Schmitt)

Problem

Eine Pull Quote soll auf beiden Seiten mit Bildern, beispielsweise geschweiften Klammern, versehen werden, wie in der folgenden Abbildung gezeigt.

Pull Quote mit Bildern

Abbildung: Eine Pull Quote mit Bildern.

Lösung

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

<blockquote>
  <p>Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti.</p>
</blockquote>

Danach definieren Sie die Stile für die Pull Quote. Dabei platzieren Sie ein Bild im Hintergrund des blockquote-Elements und das andere im Hintergrund des p-Elements:

blockquote {
 background-image: url(bracket_left.gif);
 background-repeat: no-repeat;
 float: left;
 width: 175px;
 margin: 0 0.7em 0 0;
 padding: 10px 0 0 27px;
 font-family: Georgia, Times, "Times New Roman", serif;
 font-size: 1.2em;
 font-style: italic;
 color: black;
}
blockquote p {
 margin: 0;
 padding: 0 22px 10px 0;
 width:150px;
 text-align: justify;
 line-height: 1.3em;
 background-image: url(bracket_right.gif);
 background-repeat: no-repeat;
 background-position: bottom right;
}

Diskussion

In diesem Beispiel gibt es zwei Grafiken von geschweiften Klammern, von denen eine in der linken oberen Ecke und die andere in der rechten unteren Ecke platziert werden soll. In CSS lässt sich aber immer nur ein Hintergrundbild pro Block-Level-Element definieren.

Diese Einschränkung können Sie umgehen, indem Sie die Bilder als Hintergrund verschiedener Elemente definieren. (Anmerkung: Leider hat Internet Explorer für Windows bis Version 6 Probleme bei der Platzierung von Hintergrundbildern bei anderen Elementen als body. Siehe hierzu meyerweb: complexspiral.) In unserem Fall sind das einmal das blockquote-Element selbst sowie dessen Kindelement p:

blockquote {
 background-image: url(bracket_left.gif);
 background-repeat: no-repeat;
 float: left;
 width: 175px;
}
blockquote p {
 background-image: url(bracket_right.gif);
 background-repeat: no-repeat;
 background-position: bottom right;
}

Wenn Sie nun die Breite und die Innen- und Außenabstände der blockquote- und p-Elemente richtig einstellen, haben Sie freie Sicht auf die Bilder:

blockquote {
 background-image: url(bracket_left.gif);
 background-repeat: no-repeat;
 float: left;
 width: 175px;
 margin: 0 0.7em 0 0;
 padding: 10px 0 0 27px;
}
blockquote p {
 margin: 0;
 padding: 0 22px 10px 0;
 width: 150px;
 background-image: url(bracket_right.gif);
 background-repeat: no-repeat;
 background-position: bottom right;
}

Ein Vorteil dieser Lösung besteht darin, dass sich die Bilder (der geschweiften Klammern), wie in der nächsten Abbildung gezeigt, bei einer Größenänderung des Textes selbst repositionieren können.

Auch bei Größenänderung des Textes bleiben Bilder in Ecken fixiert

Abbildung: Auch bei einer Größenänderung des Textes bleiben die Bilder in den Ecken fixiert.

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

Das Rezept Dynamische visuelle Menüs für ein weiteres Beispiel für die sogenannte "Gummiband-Technik". Wenn Sie ein Gummiband an beiden Enden auseinanderziehen, bleibt das Band an sich intakt. Auf ähnliche Weise bleibt die Präsentation der Bilder auch intakt, wenn Sie den Text vergrößern.

  

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