How to Wrap Text Around Images


The automated side of Yuku's message board software is extremely limited in where it allows us to place images within a message. Clicking on the image and then clicking on the justification controls on the post composition tool bar allows us to position it either to the left, center or right.

image
Left

image
Center

image
Right


This is the image HTML codes identifying the location of the Freedom icon you see above:

<IMG src="http://whyquit.com/FL.gif">



imageimageTo make things worse, Yuku's tool bar does not allow us to place text to the right or left of an image. But by learning a few simple HTML codes and how they control text and images we can use the HTML tool bar icon to go behind our message and learn to place images to the right or left of text, as I have done here.


Actually, the above two images are both side by side at the beginning of the text. I simply clicked on the HTML tool bar icon and inserted the commands align=left and align=right within the HTML code defining the image's Internet location and changed the paragraph start <P> and stop </P> codes to division start <DIV> and stop </DIV> codes. For some reason image alignment commands do not work within text surrounded by paragraphs start <P> and stop </P> commands but do work when text is enclosed by division start <DIV> and stop </DIV> commands or when text is seperated by line break commands <BR>. This is the way the code looked both prior to and after I changed it. Can you see the difference?

Before

<P align=left>
<IMG src="
http://whyquit.com/FL.gif"><IMG src="http://whyquit.com/FL.gif">To make things worse, it does not allow us to place text to the right or left of an image. But by learning a few simple HTML codes and how they control text and images we can use the HTML tool bar icon to go behind our message and learn to place images to the right or left of text, as I have done here.
</P>

After

<DIV align=left>
<IMG align=left src="
http://whyquit.com/FL.gif"><IMG align=right src="http://whyquit.com/FL.gif">To make things worse, it does not allow us to place text to the right or left of an image. But by learning a few simple HTML codes and how they control text and images we can use the HTML tool bar icon to go behind our message and learn to place images to the right or left of text, as I have done here.
</DIV>


Using line break commands will also work

<BR><BR>
<IMG align=left src="
http://whyquit.com/FL.gif"><IMG align=right src="http://whyquit.com/FL.gif">To make things worse, it does not allow us to place text to the right or left of an image.&nbsp; But by learning a few simple HTML codes and how they control text and images we can use the HTML tool bar icon to go behind our message and&nbsp;learn to place images to the right or left of text, as I have done here.
<BR><BR>

Additional Points

When inserting alignment codes (align=right or align=left) within image (IMG) location html codes it is important to place the alignment code between <IMG and src=. If you attempt to place it at the end of the image address (here, following FL.gif"), you will immediately see the quotations marks disappear both at the beginning ("http://) and end (FL.gif") of the image's Internet address. Although you can put the quotation marks back manually, without both being present the image will not display.

As seen above, there are three ways to create line breaks between text:

1. Paragraph begin <P> and end </P> commands
2. Division begin (DIV> and end </DIV> commands and
3. Line break commands <BR>

Here are a few rules to remember when using these commands:

1. You cannot wrap text around paragraph codes. You will need to either replace them with division codes or line break commands.

2. Except for line break commands, if you ever replace a <P> code at the beginning of a paragraph you will also need to replace the end paragraph command at the end of the paragraph </P> The backslash (/) always signifies a command end code.

3. Using line break commands <BR> between paragraphs is the cleanest way to use images (especially when using a tall image that you want to span more than one paragraph) but do note that using a single <BR> command will only cause whatever is typed to appear on the very next line. In order to create a space between lines you will need to put two line break commands beside each other <BR><BR>.

4. Also note that what you enclose between <DIV align=center> and </DIV> will cause your title, text or image to be centered within your post. Just remember one rule, unless you use a division end command </DIV> everything following the <DIV align=center> command will be centered. You must control all starts and stops by using the proper command.

Lots of HTML codes but just one code to staying free and on this side of the bars ... no nicotine today!

Freedom's Staff

Edited 10 times by JohnPolito Mar 12 09 4:53 PM.