This post will show you how to place images to better effect than simply stuffing them in alongside your text.
This text should appear to the left of my Cognitive Hazard icon. But since I can’t think of anything to write here, I’m going to quote something instead.
“Shimrod gave his head a smiling shake. ‘We use different magics. When first I wandered the world, such creatures were new to me. I enjoyed their frolics and pretty fancies. Now I am more settled, and I no longer try to fathom fairy logic. Someday, if you like, I will explain the difference between fairy magic and sandestin magic, which is used by most magicians.’”
The orange-haired boy-man spoke with vivacity: “It is all very well to ordain tasks by magic, but some intelligent or skillful agency must ultimately do the specified work. In such remedial work as this no entity, be it man, sandestin, halfling, demon, or other creature of controllable power, understands all the intricacies. Therefore, it cannot be done on the instant.”
This placement of the image is accomplished by adding the following tidbit of HTML to the interior of the <img> tag: align="right".
When I told WordPress to insert the image, it came up with this:
<img src='http://discoverymap.com/wordpress/files/2007/07/cognitive.jpg' alt='Cognitive Hazard' />
But if you add the code discussed above, it will look like this:
<img src='http://discoverymap.com/wordpress/files/2007/07/cognitive.jpg' alt='Cognitive Hazard' align='right' />
Other values for the align property are: “left”, “top”, “bottom”, and “middle”. Just remember: it’s the image you’re aligning, not the text around it. However, you’re aligning it relative to the text!
- An image aligned for “top” will start the text at the top of the image, then continue it after the image.
- An image aligned for “bottom” will start the text at the bottom of the image.
- An image aligned for “middle” will start the text at the midpoint of the image, then continue it after the image.
Experiment with this and see what you like, but in general I think you’ll find that “left” and “right” work best.
If you align your image to the left, you may find that your text butts right up against the image. While it may still be legible, this isn’t an ideal circumstance. To combat this bothersome habit of Web browsers, add this bit of code: hspace='5'.
This will cause the browser to give the image five pixels of horizontal space on both sides of the image. Aligning images to the right doesn’t usually cause this issue, as English is a left-to-right language, so all your text that meets an image on the right is going to look “ragged” (because the lines wrap) and probably won’t touch the image. The image to the left of this text uses the following code:
<img src='http://discoverymap.com/wordpress/files/2007/07/cognitive.jpg' alt='Cognitive Hazard' align='left' hspace='5' />