[kkmatheso]

I am trying to put a picture on my blog with a quote next to it located in the middle of bordered box. I am using html (I know ridiculous, but I its what i learned in school 25 years ago. Have researched online but everything is CSS . Am I up a creak without a paddle?

I can't get the box to be next to the picture (instead of extending behind it). I would take a bordered picture with the blockquote alone next to it, but once I bordered the picture I couldn't get the blockquote to wrap on the right.

<span style="color:blue;font-family:Comic Sans MS, Georgia, Arial;font-size:x-large;">I</span><span style="color:black;font-family:'Comic Sans MS', Georgia, Arial;font-size:large;">t's amazing what a smile can do for your day, whether it is given or received...it changes everything, even if it is only for a moment in time.   Below are some pictures that did that for me....made me smile (and sometime laugh out loud) and filled a moment of my day with joy!  Hope they do the same for you!</span>

<a href="http://joyinthestorm.files.wordpress.com/2012/03/friends-dont-let-you-be-silly-alone.jpg"><img class="alignleft size-full wp-image-121" title="friends dont let you be silly alone" src="http://joyinthestorm.files.wordpress.com/2012/03/friends-dont-let-you-be-silly-alone.jpg" alt="" width="320" height="301" /></a><blockquote style="border:solid blue 3px;font-family:Comic Sans MS, Georgia, Arial;font-size:14px;color:black;padding:5px;">Love this picture, especially because if you look close, it looks like the one girl in the sailor dress is shutting her eyes really tight, as if she is saying "I can't believe I am doing this." While the other one is just letting it loose and loving it. Which one are you....either way, what a blessing to have friends who would never let us be silly alone!</blockquote>

[exiles.prx]

I am not exactly sure I understand what you are trying to do. It sounds like you want the block quote to the right of the picture, which it seems to be in the image you provided. So I am unsure what the problem is here unless I am missing something...

Without fully understanding the issue the only help I can give is, you will have to use CSS to float items, style text, position items, etc.

[kkmatheso]

Yes I want it to the right as it is. However, you will notice that there is a blue box going around the quote on the top right and left, but the left side extends behind the picture. I want it to end on the left of the quote (preferably with a little padding).

[exiles.prx]

Add a margin-left to push the box away from the picture.

[Valkerion]

can you also provide us with a link to your site with a sample post, if what exiles said didn't help

[kkmatheso]

Valkerion, on 08 March 2012 - 03:20 AM, said:

can you also provide us with a link to your site with a sample post, if what exiles said didn't help

I am not sure what you mean "link with sample post" Here is the link to the page (it was in the code I pasted above too) My link Is that what you wanted.

Sorry if I am ignorant in the lingo. Like I said, it has been 25 years and I only know html.

[exiles.prx]

Update your block quote style to mimic the style below:

<blockquote style="border:solid blue 3px;font-family:Comic Sans MS, Georgia, Arial;font-size:14px;color:black;padding:5px; margin-left: 350px;">

The CSS in red is the style that will push the quote border to the right and will become visible.

[kkmatheso]

exiles.prx, on 08 March 2012 - 06:54 AM, said:

Update your block quote style to mimic the style below:

<blockquote style="border:solid blue 3px;font-family:Comic Sans MS, Georgia, Arial;font-size:14px;color:black;padding:5px; margin-left: 350px;">

The CSS in red is the style that will push the quote border to the right and will become visible.

YEAH!!!! that was what I needed. Thank you SO much!

Also, what would I change so that the padding around the text is the same all the way around? I thought the 5px would be all the way around, but it doesn't seem to be doing that. If you look at the link now (http://wp.me/P2gfrX-1V) it looks like the bottom is not the same. In the big scheme it doesn't really matter (I am a bit of a perfectionist...but I can live with it), just curious if you knew. This is my code for the box now:

<blockquote style="border:solid blue 3px;font-family:Comic Sans MS, Georgia, Arial;font-size:14px;color:black;margin-left:350px;margin-right:150px;padding:15px;">

Thanks again

[aklo]

Quote

Also, what would I change so that the padding around the text is the same all the way around? I thought the 5px would be all the way around, but it doesn't seem to be doing that. If you look at the link now (http://wp.me/P2gfrX-1V) it looks like the bottom is not the same. In the big scheme it doesn't really matter (I am a bit of a perfectionist...but I can live with it), just curious if you knew. This is my code for the box now:

<blockquote style="border:solid blue 3px;font-family:Comic Sans MS, Georgia, Arial;font-size:14px;color:black;margin-left:350px;margin-right:150px;padding:15px;">

Thanks again

It is because of this

p {
margin-bottom: 12px;
}

Basically now your bottom white space = 15px + 12px
Hmm I think you can override it using inline style

Find the <p> tag within your <blockquote> tag.

<p style="margin-bottom:0px;">

or you can also place this in your style sheet:

blockquote p {
margin-bottom:0px;
}

[kkmatheso]

I don't have a p style in my blockquote, just a blockquote style

<blockquote style="border:solid blue 3px;font-family:Comic Sans MS, Georgia, Arial;font-size:14px;color:black;margin-left:350px;margin-right:150px;padding:15px;">

where would I put it?

[exiles.prx]

Quote

Find the <p> tag within your <blockquote> tag.

<p style="margin-bottom:0px;">

or you can also place this in your style sheet:

blockquote p {
margin-bottom:0px;
}

That will fix the bottom, but if you want to be certain that the margins are the same on all sides you should use margin: 0px.

kkmatheso, place the code below in your <head></head> tags:

<style type="text/css" rel="stylesheet">
    .blockquote p {
        margin: 0px;
    }
</style>

[kkmatheso]

thanks, but, I am using free blog with html (no style sheet)

[aklo]

Edit: Didn't noticed you have no <p> tag within your <blockquote> tag... exiles way should work.

This post has been edited by aklo: 08 March 2012 - 05:56 PM