Help with modifying quote code

[KrU$ty]

I'm trying to change around the way quotes are displayed. What I want is a top and bottom image that is aligned left and right respectively with the text wrapping around the images.

I got the left image wrapping ok but the right image is giving me trouble. Also, the left (and right) image seems to be having trouble with the padding css I put in. It does padding on the left of the image but not the bottom or right.

Here is the css:


.quote_left {
padding-left:20px;
}

.quote_right {
padding-right:20px;
}
and here is the main html for quotes from the bbcode_quote template. I've bolded the changes:


<div class="bbcode_container">
<div class="bbcode_quote">
<div class="quote_container">
<div class="quote_left"><img align="left" src="/images/quote-left.png" /></div>
<vb:if condition="$show['username']">
<div class="bbcode_postedby">
<img src="{vb:stylevar imgdir_misc}/quote_icon.png" alt="{vb:rawphrase quote}" /> {vb:rawphrase originally_posted_by_x, {vb:raw username}}
<vb:if condition="$postid"><a href="{vb:raw $vboptions.vbforum_url}{vb:if "$vboptions['vbforum_url']", '/', ''}showthread.php?{vb:raw session.sessionurl}p={vb:raw postid}#post{vb:raw postid}" rel="nofollow"><img class="inlineimg" src="{vb:stylevar imgdir_button}/viewpost-{vb:stylevar right}.png" alt="{vb:rawphrase view_post}" /></a></vb:if>
</div>
<div class="message">{vb:raw message}</div>
<vb:else />
{vb:raw message}
</vb:if>
<div class="quote_right"><img align="right" src="/images/quote-right.png" /></div>
</div>
</div>
</div>
Finally here is a link to an example:

http://thepixelpirate.net/showthread.php?178-Test-post-please-ignore

[kh99]

I'm not a CSS expert, but doing a search for "float image to bottom right" I find that there's no good way to do it. There's mention of doing it via javascript or by using a table, but I don't know how either of those would work (I guess there's no reason you couldn't use a table, if you can figure that one out. Here's one of the links I found that talks about the issue: http://stackoverflow.com/questions/499829/css-wrap-text-around-a-bottom-right-div).

As for the padding, your CSS has left padding for quote_left and right padding for quote_right, and that seems to be what's there.

[KrU$ty]

OK, I got as far as getting the image to the bottom right, but the text does not wrap around it. Here is the code:

Example: http://thepixelpirate.net/showthread.php?178-Test-post-please-ignore


.quote_left {
padding:10px;
float:left;
}

.quote_right {
padding:10px;
float:right;
position: absolute;
bottom:0;
right:0;
}<div class="bbcode_container">
<div class="bbcode_quote">
<div class="quote_container">
<div class="quote_left"><img src="/images/quote-left.png" /></div>
<div class="quote_right"><img src="/images/quote-right.png" /></div>
<vb:if condition="$show['username']">
<div class="bbcode_postedby">
<img src="{vb:stylevar imgdir_misc}/quote_icon.png" alt="{vb:rawphrase quote}" /> {vb:rawphrase originally_posted_by_x, {vb:raw username}}
<vb:if condition="$postid"><a href="{vb:raw $vboptions.vbforum_url}{vb:if "$vboptions['vbforum_url']", '/', ''}showthread.php?{vb:raw session.sessionurl}p={vb:raw postid}#post{vb:raw postid}" rel="nofollow"><img class="inlineimg" src="{vb:stylevar imgdir_button}/viewpost-{vb:stylevar right}.png" alt="{vb:rawphrase view_post}" /></a></vb:if>
</div>
<div class="message">{vb:raw message}</div>
<vb:else />
{vb:raw message}
</vb:if>
</div>
</div>
</div>

[Lynne]

I don't think it's going to be easy. Read some of the threads linked here - http://stackoverflow.com/questions/499829/css-wrap-text-around-a-bottom-right-div

[KrU$ty]

Yeah, I read that one already. Thanks anyway.