CSS Templates und Ideen für Zitate

0 | 14989 Aufrufe
Sie können diese Wikiseite nach der Anmeldung auf Webmasterpro bearbeiten. Helfen Sie mit und verbessern Sie "CSS Templates und Ideen für Zitate" mit Ihrem Wissen!

Anzeige Hier werben

Zitate können mit CSS schön vom restlichen Text abgesetzt werden. Hier stellen wir ein paar Ideen, Techniken und CSS-Templates vor.

Zitatblöcke

Zitatblöcke werden in HTML semantisch mit dem <blockquote>-Tag ausgezeichnet.

Firefox2Unterstützt3Unterstützt
IE6Nein7Nein8Unbekannt
Opera9Unterstützt9.5Unbekannt
Safari3Unterstützt3.1Unbekannt
Kompatiblität von content, before und after

Zitate mit Grafiken

Zitatblöcke können mit kleinen Anfangs- und Endgrafiken ausgezeichnet werden um den visuellen Eindruck einer Direkten Rede zu geben.

 
HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<html>
<head>
    <style type="text/css">
    BLOCKQUOTE {
        text-align: justify;
    }

    BLOCKQUOTE:before {
        content: url(http://www.thm-online.org/upload/blockin.png);
        margin-right: 0px;
    }
    BLOCKQUOTE:after {
        content: url(http://www.thm-online.org/upload/blockout.png);
        margin-left: 0px;
    }
    </style>
</head>
<body>
    <blockquote>
        Vor dem Meer und der Erd' und dem allumschließenden Himmel,
        War im ganzen Bezirk der Natur ein einziger Anblick,
        Chaos genannt, ein roher und ungeordneter Klumpen:
        Nichts mehr, als untätige Last, nur zusammengewirrte
        Und mißhellige Samen der nicht einträchtigen Dinge.
        Niemals kreisete jetzt ein welterleuchtender Titan,
        Noch erneuere Phöbe des Monds anwachsende Hörner.
        Auch nicht schwebte die Erd' in rings umgossenen Lüften,
        Wägend sich selbst durch eignes Gewicht; noch streckte die Arme
        Weit um den Rand der Länder die mächtige Amphitrite.
    </blockquote>
</body>
</html>

Auf Webmasterpro verwenden wir für ein Zitat einen eingerückten Block, mit einer etwas helleren Schriftfarbe und dem Bild eines Anführungszeichens. Durch das Anführungszeichen kann der Abschnitt visuell schon vor dem lesen als Zitat indentifiziert werden.

Nein, meine Texte les ich nicht, so nicht, stöhnte Oxmox. Er war mit Franklin, Rockwell und dem halbtaxgrauen Panther Weidemann in Memphis (Heartbreak Hotel) zugange. Sie warteten auf die fette Gill, um bei der Bank of Helvetica die Kapitälchen in Kapital umzuwandeln. Oxmox liess nicht locker.

Zitate ohne Grafiken (Für Foren/Kommentarsysteme)

Dieses Zitat-CSS-Template soll dazu dienen Texte in Forenbeiträgen und Nachrichten zu strukturieren, in denen Benutzer häufig Textstellen anderer Benutzer zitieren um sie besser kommentieren zu können.

 
HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<html>
<head>
    <style type="text/css">
    blockquote {
        margin-bottom: 0.5em;
        margin-top: 0.5em;
        margin-left: 0.1em;
        padding: 0;
        color: rgb(153, 0 ,0);
        padding-left: 0.6em;
        border-left: solid 4px;
        background-image: none;
    }
    </style>
</head>
<body>
    <p>
        Heinz schrieb:
    </p>
    <blockquote>
        Nein, meine Texte les ich nicht, so nicht, stöhnte Oxmox. Er war mit
        Franklin, Rockwell und dem halbtaxgrauen Panther Weidemann in Memphis
        (Heartbreak Hotel) zugange. Sie warteten auf die fette Gill, um bei der
        Bank of Helvetica die Kapitälchen in Kapital umzuwandeln. Oxmox liess
        nicht locker.
    </blockquote>
    <p>
        Das ist doch nur ein Blindtext, was du da geschrieben hast.
    </p>
</body>
</html>

Durch den kleinen Abstand zum Text wird dieser auch nicht zu sehr aufgebläht.

Inline Zitate

Innerhalb des Textes werden Zitate semantisch mit dem <cite>-Tag ausgezeichnet.

Firefox2Unbekannt3Unbekannt
IE6Unbekannt7Unbekannt8Unbekannt
Opera9Unbekannt9.5Unbekannt
Safari3Unbekannt3.1Unbekannt
<q>

Durch die Verwendung von <q> kann man geschachtelten Anführungszeichen automatisch verschiedene Anführungszeichen zuweisen.

Beispiel: Im Zitate-Artikel rät Webmasterpro, das cite-Element auf jeden Fall zu benutzen.

 
HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
q {
    /*  »  « ›  ‹       */ 
    quotes:   "\203A" "\2039" "\00BB" "\00AB"; 
}

cite {
    /*  „  “ ‚  ‘       */
    quotes:  "\201E" "\201C" "\201A " "\2018";
    /*  “  ” ‘  ’       */
    /*quotes: "\201C" "\201D" "\2018" "\2019";*/
    font-style: normal;
}

cite:before {
    content: open-quote;
}

cite:after {
    content: close-quote;
}

Inspiration: schöne Zitate

Bild zu CSS Templates und Ideen für Zitate
Zitat auf Mercurytide
Bild zu CSS Templates und Ideen für Zitate
Zitat von ecmanaut

Hilfen

In unserer Übersicht über praktische Unicodezeichen finden Sie verschiedene Anführungszeichen zur Gestaltung von Zitaten.

Bild zu CSS Templates und Ideen für Zitate
Bild zu CSS Templates und Ideen für Zitate
Bild zu CSS Templates und Ideen für Zitate

Wikiseite bearbeiten

Diese Seite kann von jedem registrierten Benutzer bearbeitet werden. Bisher haben 3 Personen an der Seite "CSS Templates und Ideen für Zitate" mitgewirkt.

Sie haben einen Fehler entdeckt oder möchten etwas ergänzen? Dann können Sie nach der Anmeldung "CSS Templates und Ideen für Zitate" hier bearbeiten.

Mitarbeiter