Machen Sie große Zitate mit

Lesezeit: 2 Minuten

Vor einigen Jahren habe ich das Tag verwendet, um ein Zitat auf meiner Website zu erstellen (mit großen Anführungszeichen).

Jetzt möchte ich das Gleiche tun, aber es funktioniert nicht mehr. Das einzige, was ich bekomme, sind kleine “” und nicht die großen.

Wie bekomme ich die alten, großen zurück?

Vielen Dank!

Benutzer-Avatar
EnigmaRM

Ich glaube du suchst so etwas:

Blockzitat-Beispiel

blockquote {
    font-family: Georgia, serif;
    font-size: 18px;
    font-style: italic;
    width: 500px;
    margin: 0.25em 0;
    padding: 0.35em 40px;
    line-height: 1.45;
    position: relative;
    color: #383838;
}

blockquote:before {
    display: block;
    padding-left: 10px;
    content: "\201C";
    font-size: 80px;
    position: absolute;
    left: -20px;
    top: -20px;
    color: #7a7a7a;
}

blockquote cite {
    color: #999999;
    font-size: 14px;
    display: block;
    margin-top: 5px;
}

blockquote cite:before {
    content: "\2014 \2009";
}

Wirf den Code in a JSFiddle zum Spielen.

Habe ein Tutorial dazu gefunden von: http://www.webmaster-source.com/2012/04/24/pure-css-blockquote-styling/

  • Genial! Ich habe versucht, es auf andere Weise zu beheben, aber das ist viel besser. Danke, wirklich, danke!

    – Matt

    1. Mai 2013 um 22:37 Uhr

Hier ist eine reine CSS-Lösung, die unten rechts sowohl ein großes Anfangszitat als auch ein großes Schlusszitat hinzufügt:

blockquote {
    font-family: Georgia, serif;
    position: relative;
    margin: 0.5em;
    padding: 0.5em 2em 0.5em 3em;
}
/* Thanks: http://callmenick.com/post/styling-blockquotes-with-css-pseudo-classes */
blockquote:before {
    font-family: Georgia, serif;
    position: absolute;
    font-size: 6em;
    line-height: 1;
    top: 0;
    left: 0;
    content: "\201C";
}
blockquote:after {
    font-family: Georgia, serif;
    position: absolute;
   /* display: block; don't use this, it raised the quote too high from the bottom - defeated line-height? */
    float:right;
    font-size:6em;
    line-height: 1;
    right:0;
    bottom:-0.5em;
    content: "\201D";
}
blockquote footer {
    padding: 0 2em 0 0;
    text-align:right;
}
blockquote cite:before {
    content: "\2013";
}
<div>
    <blockquote>
        It is not the critic who counts; not the man who points out how the strong man stumbles, or where the doer of deeds could have done them better. The credit belongs to the man who is actually in the arena, whose face is marred by dust and sweat and blood; who strives valiantly; who errs, who comes short again and again, because there is no effort without error and shortcoming; but who does actually strive to do the deeds; who knows great enthusiasms, the great devotions; who spends himself in a worthy cause; who at the best knows in the end the triumph of high achievement, and who at the worst, if he fails, at least fails while daring greatly, so that his place shall never be with those cold and timid souls who neither know victory nor defeat.
    <footer>
        <cite>
            Teddy Roosevelt
        </cite>
    </footer>
    </blockquote>
</div>

1176910cookie-checkMachen Sie große Zitate mit

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy