Thursday, 14 May 2009

Do you want to wrap text around an image?

When using images in your post, do you sometimes get upset with where the text around the image goes? Here is a way to get "If I had a flower for every time I thought of you...I could walk through my garden forever." the text to wrap the image...either to the left or the right. It is simple enough. All you need to do is put a little CSS in your template, then tell the image where to go.

So, basically it is a two step process. But, once you get the CSS code placed in the CSS style sheet, you only have to tell the image where to go from then on when posting images. "And I had but one penny in the world. Thou should’st have it to buy gingerbread."If you notice, I have my flowers to the left and the gingerbread boys to the right, and the text wraps around them.

Here are the steps.
Step 1: Locate the CSS style sheet and paste this code (I put mine under the post section):
/*Wrap text around image
----------------------------------------------- */
.left {
float: left;
margin: 6px;
}

.right {
float: right;
margin: 6px;
}
Step 2:This is what your image tag will be similar to:
<img src="http://farm4.static.flickr.com/3599/3515377006_db67e698de_m.jpg" />
Add class="left" or class="right" to that image tag. It will look like this:
<img src="http://farm4.static.flickr.com/3599/3515377006_db67e698de_m.jpg" class="right" />
Since I added class="right" to that image tag, the image will float to the right and the text will wrap on the left.

One more thing. When using this method to post an image, you will have to use the Edit HTML tab in the posting window...not the Compose tab.

EDIT: Thanks to an email from David Cosier/Fear Healing, I discovered a potential error in this code...it has been corrected. I left out the ----------------------------------------------- */ part of /*Wrap text around image. It really matters!

post signature

No comments:

Post a Comment