CSS Templates und Ideen für Zitate
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.
Zitate mit Grafiken
Zitatblöcke können mit kleinen Anfangs- und Endgrafiken ausgezeichnet werden um den visuellen Eindruck einer Direkten Rede zu geben.
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.
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.
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.
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
Hilfen
In unserer Übersicht über praktische Unicodezeichen finden Sie verschiedene Anführungszeichen zur Gestaltung von Zitaten.
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.
-
arbeitet seit längerem als Webdesigner und vor allem -entwickler. Er ist Webmaster von Webmasterpro.de und leitet den Flashcounter-Service.
-
hat keine Beschreibung angegeben. Eine Beschreibung kann man unter dem Punkt "Profil bearbeiten" im Kontrollzentrum eintragen.
-
David Danier arbeitet seit mehr als neun Jahren im Bereich Web Programmierung und ist unter anderem Geschäftsführer der Webagentur Team23 GbR, sowie Webmasterpro.de.
fertig?
fehlt noch was?
Re: fertig?
ja. Wollte das nochmal ganz neu machen: Bilder rein. Mehrere Stile, Links auf CSS Techniken.
Re: fertig?
Hab den trotzdem mal veröffentlicht, kann ja auch so noch verbessert werden. Find den aktuellen Stand auf jeden Fall veröffentlichungswert und ist ja auch schon ne Weile nix passiert am Artikel. Baustellen-Tag hab ich erhalten. ;-)