Login

How to Position Graphics and Images on a Web Page

A standard Public Action website comes installed with the online editor called "FCKeditor".

The FCKeditor provides a "Insert/Edit Image" icon and dialog (see the video below for more details) . However, positioning an image properly requires some web authoring skills that simply are not automated. The web authoring skills we are discussing is called "Cascading Style Sheets" (CSS).

As scary as CSS sounds, follow the examples below and you will quickly master basic image positioning in a web document.

CSS Examples:

  • Right alignfloat:right;
  • Right align and add 4 pixel of space for you text to wrap: float:right;margin-left:4px;
  • Left alignfloat:left;
  • Right align and add 4 pixel of space for you text to wrap: float:left;margin-right:4px;

Explanation:

Each CSS command must end with a semicoln.

You can use multiple CSS commands (aka command set).

Each CSS command is divided in to 2 parts. 1) Layout instruction 2) Layout value.

In the first example above (float:right;), float is the instruction, right is the value.

 

Putting it together.

Invoke the "Insert/Edit" image dialog. Click on the "Advanced" tab. Enter a CSS command in the "Style" field.