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

Kein Beitragsbild

Ex Webdesigner und Gründer von Dr. Web, heute ist Sven als Schriftsteller...

 Sponsorenliebe

Endlich smarte Buchhaltung!

We Billing

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

Ex Webdesigner und Gründer von Dr. Web, heute ist Sven als Schriftsteller und Blogger (Conterest) unterwegs. Hol dir sein gratis eBook Wie du mit wenig Zeit viel für dein Blog herausholst. Die Blogpflege Fibel.

Schreibe einen Kommentar

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