How to position elements
To position elements in relation to each other in a template, wrap those elements in a Table or Box (see Table and Boxes) and/or use the Spacing property of the elements. The Spacing property can also be used to indent elements or create a hanging paragraph or image; see Spacing. Guides help to align elements as well; see below.
Where to use Tables and Boxes
Tables, Positioned Boxes and Inline Boxes can help position elements in relation to other elements. It depends on the which element is best to use.
In the Email context, Tables are the most reliable way to position text and images; see Designing an Email template and Table.
In the Web context, Inline Boxes (Div elements in fact) are the preferred way to position elements; see Inline Box and Creating a Web template with a Wizard.
Tables should only be used to display data in a tabular format, not to position text and images. Tables (and often, Positioned Boxes) used in web pages to position elements make those pages less accessible to users with disabilities and to viewers using smaller devices.
In Print in Connect, content that doesn't fit on a page, automatically flows over to the next page, just like in text processors such as MS Word. This applies to anything that is part of the main 'text flow' (where the cursor appears blinking when you start a new section): text, images, tables, inline boxes...
To position elements in relation to each other within this text flow it is best to use spacing (see below).
Tables and Boxes are useful in a Print section to insert and align text content at a specific location (see Table and Boxes). Note that table cells and Div elements grow longer to fit bigger content, but the size of Positioned Boxes and Inline Boxes isn't adjusted when their content grows too long. A Div element that doesn't fit in the remaining space on a page will be moved to the next page as a whole.
Spacing
Boxes, tables, paragraphs and many other elements have a margin and padding.
The margin is the white space around an element, outside the border. It is used to position an element in relation to the other elements, by putting more space between the element and its surrounding elements.
The padding is the space between an element's content and its border. It is used to position the content of the element inside the border.
To learn how to set an element's spacing properties, see Spacing.
Use a negative left margin to create a hanging paragraph or image.
Guides
Guides are horizontal and vertical lines used to help in designing templates. They can only be used in Print sections. Positioned Boxes (and any other objects that have their position set to absolute) will snap to guides when moved within a few pixels of them.
To add a guide, press the Insert Horizontal Guide or Insert Vertical Guide buttons on the Toolbar.
To move a guide, click and drag it to a new location. Double-clicking the guide brings up its Edit dialog where its exact position can be adjusted.
To delete a guide, double-click on it and press the Delete button.
Using the CSS position property
An element can be positioned independently of the text flow by changing its position property to absolute or to relative (to its parent).
When an element is placed inside another element, such as a Box, changing its position property to absolute positions the element absolutely inside its 'parent'.
With the position property of an element set to absolute, the top or bottom and left or right properties position the element inside its parent with exact values: pixels (px), centimeters (cm), etc. Negative values are allowed.
For an explanation of all values that the position property can possibly have, see http://www.w3schools.com/css/css_positioning.asp.
Where to use it
In Print sections, setting the position property to absolute can be very useful. It takes the element out of the text flow, so that the element stays where it is on the page. On (which are only used in Print sections) elements are always positioned absolutely; if not, they must be located inside an element that has an absolute position.
In Web sections, setting the position property to absolute may sometimes be useful for elements inside a Div element, but in general, elements should not be positioned absolutely. Designs for the Web should be flexible so that they display nicely on a variety of devices and screen sizes.
In Email sections, do not use this property. Use Tables instead (see Designing an Email template and Table).
How to use it
In the Formatting dialog the position property can often be found on the first tab, under Positioning. To open the Formatting dialog, right-click the element and click the respective element on the shortcut menu. Alternatively, select the element (see Selecting an element) and on the Format menu click the respective element.
This property isn't present in one of the tab menus of the style rule editor, but you can add it and specify a value after clicking the Advanced button in the style rule editor (see Styling templates with CSS files).
|