How to have an image top left and bottom right.

Question

Can someone please tell me what I am doing wrong here? What I have are quote images. I want to wrap the text in between these quotes. The open quote is fine and displays correctly. The image is top left and the text wraps around and below it. The closing quote however will not render properly. It goes below the paragraph tag.

Thanks

      <div id="box1">
        <div class="info">adfda</div>
        <div class="post">
          <img style="float:left" src="quotes-open.jpg" alt="" />
          <p>lskg;alsjglkajg jlg; ;lkj g;lk aglkj;lgkjlkjg alkjs glkjhaslkj hjkas hglkj asg hagl</p>
          <img style="float:right" src="quotes-close.jpg" alt="" />
        </div>
      </div>

.post p {
  line-height: 1.2em;
  margin: 0 0 20px 0;

}

Anyone??

Answer 1

It goes below because the p tag is a block-level element.

Try moving both images above the paragraph, or set the <P> tag to float as well and set a fixed width to it.

Answer 2

First of all, if it's a quote, use the <blockquote> element. If you absolutely wanted two quotes, you could make one quote the background image of the blockquote, and the other the background image of the enclosed <p> element. With the right padding, this should work just fine.

Answer 3

You can move the trailing close quote image to a place some where inside your <p> (you'll have to play with the positioning of it however; safe bet is about 10-15 words away from the end of the last sentence) So from your example you would have:

<div id="box1">
    <div class="info">adfda</div>
    <div class="post">
        <img style="float:left" src="quotes-open.jpg" alt="" />
        <p>lskg;alsjglkajg jlg; ;lkj g;lk aglkj;lgkjlkjg alkjs glkjhaslkj hjkas hglkj 
           asg hagl lskg;alsjglkajg jlg; ;lkj g;lk aglkj;lgkjlkjg alkjs glkjhaslkj hjkas hglkj asg hagl
           <img style="float:right" src="quotes-close.jpg" alt="" />
           lskg;alsjglkajg jlg; ;lkj g;lk aglkj;lgkjlkjg alkjs glkjhaslkj hjkas hglkj asg hagl
        </p>
    </div>
</div>

I think you'll have better luck with something like what Stephen suggested:

HTML:

<div>
  <div class="info">adfda</div>
  <div class="post">
    <blockquote>
      <p class="closeq">lskg;alsjglkajg jlg; ;lkj g;lk aglkj;lgkjlkjg alkjs glkjhaslkj hjkas hglkj asg hagl</p>
    </blockquote>  
  </div>
</div>

CSS

.post blockquote { background: url(quotes-open.jpg) no-repeat top left; /*padding*/ }
.post blockquote p.closeq { background: url(quotes-close.jpg) no-repeat bottom right; /*padding*/ }

Notes

.post blockquote: gets the opening quote set as a background and position to the top and the left. You'll want to adding some padding to the element so as to not crowd the text or overrun it.

.post blockquote p.closeq: I went ahead and made it to where you have to explicitly tell where you want the closing quotes. This is because you may want a quote with more than one paragraph. Again here you'll want to play with the padding to make sure your text doesn't run over the closing quote.

Answer 4

<blockquote>
     <p>This is the quote</p>
     <p class="last-child">This is the last paragraph</p>
</blockquote>

blockquote { 
   background:url(./quote-open.gif) no-repeat top left; 
   padding:10px 0 10px 30px;
}

blockquote p {
   padding:0 30px 0 0;
}

blockquote p:last-child, blockquote p.last-child { 
   background:url(./quote-close.gif) no-repeat bottom right;
}`

Play around with the padding to make it look how you want.

There are a lot of ways to do this... search Google and explore. Here's a link with a bunch of examples, use Firebug to inspect the ones you like and see how they did it: http://www.smileycat.com/design_elements/pull_quotes/

Answer 5

A simple solution:

<!-- HTML: -->
<blockquote><div>
Your text
</div>
</blockquote>

/* CSS: */
blockquote {
  background: url('link-to-open-quote.gif') left top;
}

blockquote div {
  background: url('link-to-closing-quote.gif') right bottom;
  padding-bottom: 40px; /* To prevent the text from flowing over the quote */
}

Answer 6

<blockquote>
    <q>This is the quote</q>
    <q>This is another quote</q>
    <q>Etc...</q>
</blockquote>

blockquote {
    padding-bottom: 10px; 
    background: transparent url(end-quote.gif) no-repeat 100% 100%;
}

blockquote q:first-child {
    display: block;
    padding-top: 10px;
    background: transparent url(start-quote.gif) no-repeat 0 0;        
}

You could also do this the opposite way, using <blockquote> as the opening quote and q:last-child as the closing quote.