Sven Lennartz 12. September 2003

Zitatkästen, Einschübe und Infoboxen – Teil 3

Kein Beitragsbild

von Sven Lennartz

Ein guter Text will gut gestaltet sein. Schwierig wird’s, wenn man viel zu sagen hat. Eine praktische Methode, um zusätzliche Informationen unterzubringen, bieten Zitatkästen, Einschübe und Infoboxen. CSS bietet uns die Möglichkeit, das Design der Zitate quasi von außen für alle Zitate zu verändern. Und besonders schwierig ist das auch nicht.

Blockquote ist das HTML-Element unserer Wahl für das Zitat. Eine recht simple Sache:

 <p>Text</p>
<blockquote>
<div> Text</div>
</blockquote>
<p>Text</p>

Die Kunst besteht nun darin, eine Grafik sowohl am Anfang des Zitats, als auch an dessen Ende zu unterlegen. Live Beispiel im neuen Fenster.



Ein Zitat als Blickfang

Das erreichen wir durch Verschachtelung. Gewissermaßen verbinden wir unser <blockquote> doppelt mit einer CSS-Codierung. Die Hintergrundgrafiken, die wir dort benutzen, richten sich dann entsprechend aus.

      blockquote {
background: transparent url(../webdesign/images/zitat-anfang.gif) left top no-repeat; }
       blockquote div {
padding: 5 35px; background: transparent url(../webdesign/images/zitat-ende.gif) right bottom no-repeat; }

Padding sorgt für geeignete Abstände der Grafiken zum Text. Größter Vorteil: Verwendet man ein externes CSS lassen sich die Zitat-Grafiken jederzeit nach Belieben auswechseln.

Sven Lennartz

Sven Lennartz

Ex Webdesigner, Gründer von Dr. Web und Smashing Magazine. Heute ist Sven als Schriftsteller und Blogger unterwegs. Schau was er jetzt macht…
Dr. Webs exklusiver Newsletter
Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Kennst du schon unseren Newsletter?

Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.