Aligning Pictures

If you have, or plan to put a lot of pictures on your Web site, making them all appear exactly where you want can be a daunting task.  There are definitely a few things to remember when aligning pictures that will make you task headache free, and keep your pictures where they should be.

First of all, if you need help inserting pictures, click here.

Method 1:
Using the alignment buttons on your toolbar ()
 The alignment buttons will align your picture, or justify it to the left, center, or right.  This is best used when the picture is on a line all by itself and isn't surrounded by any text.  The picture below is centered, and on a line of its own before and after the surrounding text.

This is an example of some text that may or may not appear before any particular picture you would place on you WebMedley Web page. This is an example of some text that may or may not appear after any particular picture you would place on you WebMedley Web page.

Method 2:
Using the alignment setting in the pictures' properties ()

When you insert a picture along with text, you will probably want the text to wrap around that picture.  This can be done by setting the alignment setting in the properties of the picture.  If you click on your picture, and click the properties button, you will see a box similar to this one. This particular graphic has its alignment set to "right".  Setting the alignment to either "left" or "right" will cause the text to "wrap around" or begin at the top of the picture.

Here's what some of the other alignments in the list will do: 

Absbottom	Aligns the bottom of the image with the bottom of the current line
Absmiddle	Aligns the middle of the current line with the middle of the image.
Baseline	Aligns the bottom of the image with the baseline of the current line.
Middle	Aligns the baseline of the current line with the middle of the image.
Texttop	Aligns itself with the top of the tallest text in the line (this is usually but not always the same as top).
Top	Aligns itself with the top of the tallest item in the line.

Method 3: Absolute Position ()
Absolute position is a powerful design feature in WebMedley, but one that should be used sparingly.  This feature applies an "x" and "y" coordinate to your image in order to place the image on your screen.  Absolute positioning also uses layering technology which causes the image to "float" above the rest of the content on the page, covering up anything 'behind' it.  Absolute positioning allows you to drag and drop an image anywhere on the page you want to.  This feature is intended to be used for placing pictures outside of the content area (the dotted line surrounding your content in the editing screen).  If you leave an image in the content area after it is absolute positioned, different browsers may interpret the 'X' and "Y" coordinates differently, causing the image to "drift" and cover up nearby text, giving your page a sloppy look.  The absolute position typically should only be used for placing pictures in the column to the right and/or the left of the content area.

Also, because absolute positioning measures the x axis in pixels from the left side of your window, if your template is not left aligned (some webmedley templates are centered on the page instead of left aligned), it will throw off the measurements on anyone viewing the page with a larger window or a higher resolution.  With a template that is designed to be viewed in the center of the browser window, it becomes almost impossible to judge how many pixels off the left side of the window the template will appear based on factors such as computer resolution settings, window size, and browser configuration.  For this reason, we don't recommend using absolute positioning with any template that is not 'left aligned' meaning that the left side of your template is always flush against the left side of your window.  The template for the webmedley.com site you are currently looking at, for example, is not left aligned, but instead is center aligned.