Wednesday, April 1, 2015

Floating Images Using a Little HTML Code

Canvas Tips: Floating Images

Have you tried to insert a nice image along with your text only to find that now you have too much spacing between your lines and it looks something like this:


A bit messy, isn't it? Well, you can use a small piece of HTML code to make it look much more professional. Ready to try?

While editing your page, go ahead and type in your text. When you are ready, be sure to place your cursor at the beginning of the text you wish the image to appear. Then, insert your image. It will look ugly, just like it does on top. 

Next, you want to use the HTML Editor, so click on that link at the top right hand side of the page just above the Rich Content Editor tool bar. 

Find the code for your image. It will look something like this:

<p><img src="/courses/1269086/files/55297486/preview" alt="Koala.jpg" width="158" height="119" />

You want to type the following code - style="float: left; padding-right: 8px;" in between the <p><img and the src=".

The code will look something like this now (note I have bolded the float HTML code so you can more easily see it in this example): 

<p><img style="float: left; padding-right: 8px;" src="/courses/1269086/files/55297486/preview" alt="Koala.jpg" 

Be sure to type it exactly like it's shown above (except for the bolding, of course). When you go back to your Rich Content Editor, you picture and text will look like this:


It looks much neater now and takes up less room. You can change the size of the photo by clicking on it while in Rich Content Editor and then clicking on one of the white boxes and dragging it to the desired size. You can also move it around in the text by clicking and then dragging it and dropping it to a new area of the text. 

Other changes you can make:
  • Have the image float to the right by changing left to right in the code after "float.

  • Change how how much space you want between image and text by changing the px number (I used 20 for this example) after the code padding-right:


I hope you give it a try! Let us know how it worked for you.


No comments: