Home » images » layout instructions

layout instructions

Document Actions
Note on html code for layout of images.
Within the html tag (e.g. <img src="http://www.dogwoodinitiative.org/images/graphics/LP_0507"> add the following tags:

style="margin: 5px 0px 5px 7px; float: right; display: block;" border="1"

The border is a thin black line.  If you don't want a border, remove that tag.  The margin creates space around the picture as follows: top, right, bottom, left.  The float determines where the picture appears (right side, left side, middle.  The tag tells the text to wrap around it.

So the image code above would, with the layout tags given here, become:

<img src="http://www.dogwoodinitiative.org/images/graphics/LP_0507" style="margin: 5px 0px 5px 7px; float: right; display: block;" border="1" >

Further notes: there are other tags to add.  The most useful can change the size of the picture from its default size.  Those tags are vsize="" for the vertical size and hsize="" for the horizontal size. The numbers you insert are pixels.  Note that it's easy to change the proportions by mistake; if you have picture editing software, you can confirm the starting size of the picture, and follow those proportions (e.g. a 100 x 80 picture could be shrunken to 75 x 60, by inserting the following tags into the <img src= ... > code:

vsize="80" hsize="60"

Subscribe to "Make Waves", our e-newsletter.

"At first people refuse to believe that a strange new thing can be done, then they begin to hope it can't be done, then they see it can be done, then it is done and all the world wonders why it was not done centuries before."

- The Secret Garden, Frances Hodgson Burnett