Ana Connell - Burbank Real Estate Expert asked for this tutorial.
And since she's not the first to ask me, I thought I'd get this one up as quickly as possible. Earlier today, she wrote:
"I would love to know how you type around an image that's been added to a post. I know it's possible because I see it all the time, just don't know how! I've noticed it in your and Laurie Manny's posts and really like the overall presentation it creates.
Right now I add an image and can only start my text either beside the image (on the very bottom of the image), or below it. Hope I've explained this well enough! If you have any questions, shoot me an email or give me a call, thank you!"
So, let's wrap some text around an image.
The image you see to the right has already been added to this post in a way that makes it wrap around the text in the post. The video below will show you have we did it, but the graphic is what you will see when you add a graphic and then click on appearance. I personally like putting my images on the right of the post. I think it makes for easier reading to keep the left edge justified.
Now, to make this work the way Ana wants it to work, we need more text.
If you have a small amount of text and your image is large, there is very little you can do to make the text "flow" around the image. The best that can happen is that the image sits to the right or to the left. But if you have enough text, as I'm attempting to provide here by rambling on and on and on, then you can make the text flow above and below the image as well as to either side.
Here's the video. Enjoy.
blockquote {margin: 0pt 0pt 0pt 30px; padding: 10px 0pt 0pt 20px; width:500px; background: transparent url(http://www.realestateshows.com/jeff/quotes.gif) no-repeat scroll left top; font-size: 120%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; color: #356D9E; line-height: 1.2em;} h2 { color:#356D9E!important; font-family:Trebuchet MS,Arial,Helvetica,sans-serif; font-size:20px!important; font-size-adjust:none; font-stretch:normal; font-style:normal; font-variant:normal; font-weight:normal; letter-spacing:0pt; line-height:24px;a margin:9pt 0pt 0px; padding:6px 0pt 0px; } h3 { color:#356D9E!important; font-family:Trebuchet MS,Arial,Helvetica,sans-serif; font-size:20px!important; font-size-adjust:none; font-stretch:normal; font-style:normal; font-variant:normal; font-weight:normal; letter-spacing:0pt; line-height:24px; margin:9pt 0pt 0px; padding:6px 0pt 0px; } a { color:#356D9E; text-decoration:underline; } p{ margin-top:2px!important;} a:hover { color:#ffffff; text-decoration:none; background:#356D9E; border 1px solid #DDA603 }
Jeff-
that I have actually learned how to do this text wrapping around the images. I couldn't say thank you enough, but thank you anyway.
Comments (92)Subscribe to CommentsComment