30.05.2008
Zitate und Anreisser im Text hervorheben
Längere Texte kann man auflockern und attraktiver gestalten, indem man ab und zu ein Textzitat einstreut, welches optisch hervorgehoben wird. Auch Kurzinhaltsangaben, sogenannte "Anreisser" dienen diesem Zweck. Folgendes Beispiel soll dies verdeutlichen:
Elwetritsche
Vor vielen hundert Jahren verliefen sich eine handvoll Hühner, Gänse und Enten im Pfälzer Wald - und kehrten nie zurück. Sie gründeten eine eigene neue Familie und so entstanden ELWETRITSCHE: Lustige, bunte und geheimnisumwitterte Fabelwesen aus dem Pfälzer Wald.
Nur bei Vollmond anzutreffen
Heute sind die Elwetritsche in freier Wildbahn nur sehr schwer auszumachen. Nur in dunklen Vollmondnächten lassen sie sich wahrnehmen und belauschen. Hierzu bedarf es seitens uns Menschen festen Glauben, grosse Geduld und ein gesteigertes Einfühlungsvermögen, das am besten nach einigen Gläsern besten Weines an einem Wochenende erreicht wird.
Jagd mit Leiter, Laterne, Sack und Ui-ju-jui
Die Elwetritschenjagd - nach den alten Gesetzen des Brauchtums durchgeführt - dient dazu, interessierten Menschen ein Gefühl der Wahrheitsfindung zu vermitteln und damit die Voraussetzung für ein glückliches, zufriedenes Leben im Glauben mit viel Humor zu schaffen.
Fangen und freilassen
Die Jagd wird durchgeführt nach dem Grundsatz : "Fangen und freilassen". Man benötigt dazu eine Leiter (mindestens 12 Sprossen), eine Laterne und einen Sack (am besten einen alten Kartoffelsack). Weiterhin eine stattliche Anzahl von Elewtrische-Treibern. Die mit ihren, bis ins Mark gehenden Elwetrisch-Treiberrufen Ui-ju-jui sollen die lustigen Gesellen aus ihren Verstecken locken.
(Quelle: Friedhelm Kreuzer)
Die Gestaltung derartiger "Pullquotes" ist recht einfach. Wir verwenden hierzu das eigens dafür vorgesehene Element blockquote und formatieren es entsprechend. Die Eigenschaften dürften selbsterklärend sein:
blockquote {
width: 200px;
color: #243927;
font: bold italic 1.7em Times New Roman;
text-align: center;
float: left;
margin: 5px;
}
Da die "Anreisser" jedoch alternierend sowohl rechts- als auch linksbündig angeordnet werden sollen, definieren wir noch eine zusätzliche rechts-gefloatete Klasse:
.right {
float: right;
}
Schließlich soll der erste Zitat-Buchstabe noch besonders hervorgehoben werden, wozu wir first-letter verwenden und eine abweichende Farbe wie Schriftgröße hinterlegen:
blockquote:first-letter {
color: #8f0e07;
font-size: 1.5em;
}
Für die Textbox, Überschrift und Absätze wurden folgende Angaben verwendet:
#box {
margin: 20px auto;
width: 540px;
background:#f7fede;
font: 0.9em Verdana;
text-align: left;
padding: 10px;
}
#box h5 {
font-size: 1.3em;
margin: 0.8em 0;
}
#box p {
margin: 0.8em 0;
}
Bauen wir unseren "Elwetritschentext" im HTML-Teil zusammen:
<div id="box">
<h5>Elwetritsche</h5>
<p>
Vor vielen hundert Jahren...
</p>
<blockquote>
Nur bei Vollmond anzutreffen
</blockquote>
<p>
Heute sind die Elwetritsche...
</p>
<blockquote class="right">
Elwetritschenjagd mit Leiter, Laterne, Sack und Ui-ju-jui
</blockquote>
<p>
Die Elwetritschenjagd ...
</p>
...
</div>