Santa Clara University

Web Publishing @ SCU

Managing Space Between Elements

When multiple elements are added to the center or right columns of a page, display problems can result from the default positioning of the element content.  A common example is when two image elements or textblocks are added to the right column - the content contained in each element will be displayed in sequence, with no break or spacing in between.  And in the center well, clear divisions between independent blocks of content can be difficult to see, with only white space separating the content blocks.

Managing space with styles

A style setting is available that will help with this issue.  Any element can have a style class applied to it, which - if the class name exists in the site's CSS style sheet - will alter the display of the element.  For our spacing problem, a style class named "spacer" has been defined.  The spacer style is rendered differently depending on where it is used.  In the center content well, the spacer style will add a 10px margin, horizontal dotted line, and 10px padding to the top of the element.  In the right column, the spacer style just adds a 10px margin to the top of an element.

Here's an example:

 

This Rich Text Editor element has the "spacer" style applied.  A single dotted line, with a top margin and padding, has been applied.

How to add the "spacer" style

The option to add a style to an element is available through the element properties menu (look for this icon - icon). Click this icon, and then select "style" from the list. A form will open with select menus for the element, and any components within the element. Select the menu at the top and switch from "use default" to "other". A class name field will appear - enter "spacer" in this field, then publish your changes.

Select the "style" element property...
spacer option


And enter "spacer" as the class name...
spacer menu

Note: to add the spacer without the dotted-line rule, use "spacer noborder" as the class name.

Space to the right or left of an element
The methods listed above will help with spacing above and below elements.  There are circumstances where the page layout may contain elements positioned horizontally - the "two-column" layout option, or a layout element with multiple columns would be examples of this.  There are two style classes available to provide extra space to the left and right side of an element - "spacing-left" and "spacing-right".  If you add the "spacing-right" class to an element, and extra 10 pixels of padding will be applied to the right side.  The "spacing-left" class does the same for the left side.


This is a formatted text block, without a spacer style - the first (or only) element in the right column won't need spacing added to the top.
This is a formatted text block, without a spacer style - the content appears in sequence after the first element, with no spacing in between.
This is a formatted text block with the "spacer" style applied - a 10px top margin has been added.
Printer-friendly format