TERMINALFOUR (T4) Tip 6: Floating Images

Intended Audience:

TERMINALFOUR WEB MAINTAINERS, END-USER MODERATORS, PRIMARY WEB COORDINATORS and CONTRIBUTORS

TIP: Using the Edit Media Attributes dialog box makes positioning images next to text easier.

Explanation: At some point, you will want to float a picture either left or right next to some text. You will need to use one of these unique CSS classes: “image-left” , “image-right”, “clear-all”, or “clear-both”.

NOTE: A brief tutorial on “clear- all” and “clear-both” is located here.

After, inserting images and not using the classes you might get something like this:

floating-images

To get images in your pages to correctly position next to your text, follow these simple steps:

  1. Insert the image
  2. Double-click on the image
  3. Wait for the dialogue box
  4. In the class field: “image-left” or “image-right”

add float classes in the class field

After completing step four, you should get something that looks like this:

floating-images4

*Note: Use this guide to resize images correctly and consistently.

0


Posted: July 10, 2015


Category: UF/IFAS Webteam, WCMS Updates
Tags: TERMINALFOUR Tips


Subscribe For More Great Content

IFAS Blogs Categories