karenak Crown



Here's the Categorian Beginner's First Aid Kit - Example 2



How to position text and images


Here are a few examples for the positioning of text and images in your blog posts.


Set two images side by side

Noting could be simpler:

You merely type one img tag after the other. If you want some space between them, you use "style" and "margin".

<center>
<img style="margin-right: 10px;" src="...path to the image..."> <img src=" ... Path to the image ...">
</center>


Set two images on either side of text

To set two images on either side of text, we use "style" with "float" and "margin" again.

Text alongside floating images should always be ended by adding

<br style="clear: both;" />

Thus all following elements will be placed BELOW the images.
<img style="float:left; margin-right: 10px;" src="...Path to the image..."> <img style="float:right; margin-left: 10px;" src=" ... Path to the image ..."> and here follows your text...<br style="clear : both;" />


Clear can be used with left, right and both.

Thank you Brian (Airtoob) for telling me about the "clear" - very useful indeed :-)




For your banner


A banner always looks nicer if you place your profile or welcoming text beside your image.

<img style="float:left; margin-right: 10px;" src="...Path to the image..."> ... your banner text...<br style="clear: left;" />





>>>> Part Seven