Wie Sie position und Stil in css blockquote

Hallo Jungs! Ich verlange, dass etwas CSS Hilfe mein styling blockquote Regel. Mein gewünschtes Ergebnis ist, um die öffnung Zitat oben den zitierten text, und das schließende quote unter dem zitierten text.

Diese Bild zeigt genau das, was ich verlange - Website-design

Dies ist meine aktuelle live-WIP-link - Live-link

Mein CSS:

blockquote {
color: #e33e00;
font-style: italic;
font-family: GeoSlb712XBdBT;
padding:20px;
padding-left: 15px;
border-left: 3px solid #F63;


}

blockquote p:before {
content: '"';
font-size: 30px;
top:20px;
position:absolute;

}

blockquote p:after {
content: '"';
font-size: 30px;
}

Wenn jemand helfen kann, wäre ich sehr dankbar.

InformationsquelleAutor Mr Revs | 2012-08-08
  1. 1

    DEMO

    Blick auf den code, den ich Hinzugefügt ( es ist 4 Leerzeichen eingerückt )

    Müssen Sie position: relative; zu den blockquote p und dann war es einige absolute Positionierung auf der :before und :after verschieben der :before bis 15px und die :after unten 30px.

    Größe der rechten Seite, um die quote zu wachsen und zu schrumpfen und zu sehen, dass die Zitate immer auf die oberen und unteren

    und natürlich, Sie könnte wie 35px 20px und (oder mehrere) hinzufügen mehr Platz zwischen den Anführungszeichen und der <p> zitiert.

    EDIT: Hinzugefügt, den folgenden code zusätzlicher code um das Problem zu lösen ist eingerückt 8 Räume

    blockquote {
    color: #e33e00;
    font-style: italic;
    font-family: GeoSlb712XBdBT;
    padding:20px;
    padding-left: 15px;
    border-left: 3px solid #F63;
}


        blockquote p { position: relative; }

blockquote p:before {
content: '"';
font-size: 30px;
position:absolute;
        top:-15px;
        left:0px;
}

blockquote p:after {
content: '"';
font-size: 30px;
        position:absolute;
        bottom:-30px;
        left:0px;
}

    • Absolut genial! Hut ab vor Ihnen, sir! 🙂
    • Froh, in der Lage zu helfen! =)
    InformationsquelleAutor Xhynk
  2. 0

    Wie diese http://www.visibilityinherit.com/code/css-blockquotes-how-to.php. Oder verwenden Sie display inline block mit den anderen. Ich versuchte, post code, kann aber nicht Einzug richtig offenbar.

    InformationsquelleAutor Eric
Schreibe einen Kommentar