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

Diese blockquote ist mit float: left links ausgerichtet und hat einen Abstand zum Text von 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>

nach oben


Warning: include(mainincludes/footer.php): failed to open stream: No such file or directory in /var/www/web539/html/gehtsgarnet/subdomains/ohne-css/0036.php on line 207

Warning: include(mainincludes/footer.php): failed to open stream: No such file or directory in /var/www/web539/html/gehtsgarnet/subdomains/ohne-css/0036.php on line 207

Warning: include(): Failed opening 'mainincludes/footer.php' for inclusion (include_path='.:/opt/php/5.6.33/share/pear') in /var/www/web539/html/gehtsgarnet/subdomains/ohne-css/0036.php on line 207