How to get image top left and bottom right
Can someone please tell me what I am doing wrong here? I have images of quotes. I want to wrap the text between these quotes. The open quote is beautiful and displays correctly. The image is at the top left, and the text flows below and below it. The closing quote, however, will not display properly. It's below the paragraph tag.
thank
<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 ??
source to share
You can move the close-shot trailing image to a location somewhere inside yours <p>
(you'll have to play with positioning it, but the safe bet is around 10-15 words from the end of the last sentence) So, from your example, you would:
<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 be lucky 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 starting quote as background and position at the top and left. You need to add some padding to the element so as not to crowd or overload the text.
.post blockquote p.closeq
A: I went ahead and headed to where you need to explicitly indicate where you want the quotes to close. This is because you might want a multi-paragraph quote. Again here you will want to play with the padding to make sure your text doesn't run through the final quote.
source to share
<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 can also do it in the opposite way, using both the <blockquote>
starting quote and the q:last-child
closing quote.
source to share
<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 with the add-on to make it look the way you want it.
There are many ways to do this ... google and research. Here's a link with a bunch of examples, use Firebug to test the ones you like and see how they did it: http://www.smileycat.com/design_elements/pull_quotes/
source to share
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 */
}
source to share