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...-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/4...ttom-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...-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/4...ttom-right-div

[KrU$ty]

Yeah, I read that one already. Thanks anyway.