Diese Seite wird bereits seit mehreren Jahren nicht mehr gepflegt. Ich lasse sie aber zu Dokumentationszwecken vorerst weiterhin im Internet. Wenn die Zeit es zulässt, gestalte ich sie vielleicht mal komplett neu, aber das kann ich derzeit noch nicht sicher zusagen.

Beispiele für gut gelungene Zitatformatierungen

Sie sehen hier einige Beispiele für besonders gut gelungene Zitatformatierungen. Wegen der Übersichtlichkeit wurden diese Beispiele vom Originalartikel ausgegliedert. Hier kommen Sie wieder zum Artikel „Zitate richtig darstellen“.

Hinweis: Natürlich müssen Sie alle Beispiele an Ihre Webseite anpassen. Ich habe jedoch die relevanten HTML und CSS-Angaben aus den Beispielen herausgefilter, damit Sie eine Ausgangsbasis für Ihre Anpassungen haben.

Freistehendes Zitat bei Big Cartel (externer Link)

Ein sehr schönes Beispiel (bis auf den fehlenden Kontrast zwischen Hintergrund und Schriftfarbe) mit einer Serif-Schrift, einem kleinen Zitat-Bild und einer ansprechenden Darstellungsart für die Autoren- und Quellenangabe.
HTML / CSS für dieses Beispiel anzeigen

Freistehendes Zitat bei Shaun Andrews (externer Link)

Es gibt zwar keine Quellenangabe, aber das Zitat wird in eine aufwendig grafisch umrandete Box eingefügt und kursiv angezeigt. Zudem hat es links und rechts einen deutlichen Einzug, so dass es sich stark von der Umgebung abhebt.
HTML / CSS für dieses Beispiel anzeigen

Umsetzung der einzelnen Beispiele

Big Cartel-Beispiel:

HTML:
<blockquote>
  <p>
     Zitattext
   </p>
</blockquote>
<p>
  <cite>
    Autorenname <a href="http://www.zitatquelle.de/">www.zitatquelle.de</a>
  </cite>
</p>
CSS:
blockquote {
    margin-top: 2em;
    padding: 8px 40px 1em 40px;
    background: url(zitatbild.gif) no-repeat top left;
}
blockquote p {
    margin-bottom: 1em;
    font-style: italic;
    color: #918862;
    background: none;
}
cite {
    display: block;
    margin-left: 40px;
    font-weight: bold;
    background: none;
}

Shaun Andrews-Beispiel:

HTML:
<blockquote>
  <p>
    Zitattext
   </p>
</blockquote>
CSS:
blockquote {
    text-align: center;
    padding: 15px;
    margin: 0 auto;
    color: #666;
    font-style: italic;
    width: 60%;
    margin-bottom: 15px;
    background: #FFF2F5 url("rahmenbild.gif") repeat 0 0; 
}
blockquote p {
    background: #fff;
    margin: 0;
    padding: 5px;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc; 
}

zum Seitenanfang