Blockquote alignment

  • jinsan

    (@jinsan)


    21 years, 2 months ago

    hi,

    I’m trying to align the gif within a blockquote. I sometimes find that if the text is too little the image disappears. How can I fix it so it will show completely regardless of the amount of text and how can I align it to the right.

    Here’s my code so far:

    blockquote, blockquote p {
    background: #388 url(‘images/quote-l.gif’) left top no-repeat;
    text-indent: 0px;
    margin-bottom: 12px;
    margin-top: -1px;
    padding: 20px;
    color: #fff;
    }

    blockquote div {
    background: transparent url(‘images/quote-r.gif’) bottom no-repeat;
    padding: 4px 3px 4px 3px;
    right: 25px;
    }

    Here’s an example post:

    http://sekhu.net/wp/2004/06/21/class-of-herbal-high-2004/1/

    Thanks in advance

Viewing 2 replies - 1 through 2 (of 2 total)
  • ejm

    (@llizard)

    21 years, 2 months ago

    I’m not sure what

    right: 25px;

    is doing in the “blockquote div” specs. Did you have a position defined at some point? But I’m guessing you want the closed quotes image to go on the bottom right? “right” was missing from the css.

    And to get that image to appear, you may have to define the height. Obviously you don’t want the blockquote height to be flexible. So maybe put the right closing quote image in its own div.

    Here’s what might work:

    blockquote, blockquote p {
    background: #388 url("quote-l.gif") left top no-repeat;
    text-indent: 0px;
    margin-bottom: 12px;
    margin-top: -1px;
    padding: 20px;
    padding-top:50px;
    color: #fff;
    width:60%;
    }

    blockquote div {
    background: transparent url("quote-r.gif") bottom right no-repeat;
    padding: 4px 3px 4px 3px;
    margin-top:20px;
    height:40px;
    /*right: 25px;*/
    }

    [...]

    <blockquote>Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah

    <div>&nbsp;</div></blockquote>

    Of course, you’ll want to play with the margins and the heights to match your images.

    Hope that helps.

    This site may also be of use:
    http://www.htmlhelp.com/reference/css/

    Thread Starter jinsan

    (@jinsan)

    21 years, 2 months ago

    thanks for your help seems to have done the trick – the 25px was a test 🙂

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Blockquote alignment’ is closed to new replies.