Better Blockquotes "Classy Quote"

  • Anonymous

    #575

    Hi

    Better Blockquotes “Classy Quote”: http://css-tricks.com/examples/Blockquotes/#

    Hmm, anyone know how to show the “closequote1.gif”?

    blockquote {
    font: 14px/20px Italic Times, serif;
    padding: 8px;
    background-color: #faebbc;
    border-top: 2px solid #e1cc89;
    border-bottom: 2px solid #e1cc89;
    margin-left: 60px;
    background-image: url(http://localhost:8888/wp-content/uploads/2011/02/openquote1.gif);
    background-position: top left;
    background-repeat: no-repeat;
    text-indent: 23px;
    }
    blockquote span {
    display: block;
    background-image: url(http://localhost:8888/wp-content/uploads/2011/02/closequote1.gif);
    background-position: bottom right -100px;
    background-repeat: no-repeat;
    }

    Using margin-right: xx px; is ok for right margin, but it don’t show “closequote1.gif”

    Admin

    Syahir Hakim

    #12949

    Did you download the image file?

    Kim

    #12950

    The file and link to closequote1.gif is okay.

    Right now I’m using a simpel link on this page:

    http://www.nørrebo.dk/?page_id=2367

    It just seems to me that “right” is like the

    blockquote area in sprite_master.png (570px)

    and its better to control Blockquote “right”

    side with style.css

    jrothra

    #12951

    I love the idea of the close quote, but I can’t get it to work. I haven’t changed any of

    blockquote span {
    display: block;
    background-image: url(images/blockquote-closequote2.png);
    background-position: bottom right;
    background-repeat: no-repeat;
    }

    It’s based on the code give above combined with looking at the Classy Quote site mentioned. I’ve created two alternate close quote images. Both flip the original image, but one is the same exact size, one is only the close quote:

    blockquote-closequote1.png

    blockquote-closequote2.png

    Did I mis-code something?

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

Do NOT follow this link or you will be banned from the site!