Home > Positioning elements

Positioning elements

In principle, elements in the project are positioned in containers, whereby you have the possibility to use in different container types an absolute positioning (free positioning) or relative positioning (one below the other/side by side).

1. Absolute positioning (Free positioning) - free layout

The container types Sequence, Swap container and Container (Free positioning) use the Absolute positioning (Free positioning), in which Sub-elements can be positioned freely after selection with the help of the mouse (drag and drop) or the keyboard arrows. When inserting new elements into a container with free positioning, the elements are centered  within the container. With the help of the Position options X and Y in the main toolbar or in the properties dialog of the element, you can then precisely position elements. Similarly, you can move selected items using the keyboard's arrow keys. Furthermore, there is the possibility to move elements with the help of the mouse, whereby the elements are shifted in 5 px steps. Pressing the Alt key simultaneously moves in 1 px increments.

In addition following the keyboard shortcuts are also available to you as auxiliary functions which are also offered as buttons in the Inspector:

  1. Maximize (Alt + M): With the help of the Maximize button, the selected element is maximized and centered on the size of the parent container.
  2. Center horizontally  (Alt + H): The center horizontal button is used to position the selected element horizontally centered.
  3. Center vertically (Alt + V): The center vertical button is used to position the selected element vertically centered.

    Please note:
    For elements that are located within a container with a free positioning, the functions Alignment and Margin are not available. If several elements are selected, the corresponding position settings in the toolbar are applied to all selected elements.     

    2. Relative positioning (Vertical/Horizontal) - linear layout

    When creating a container, the default layout is the free layout, which can be changed in the properties settings to the linear layout type Vertical/Horizontal. According to the setting of the Direction function in the Layout section, the elements inserted in the container (Vertical/Horizontal) are arranged side by side (horizontally) or one below the other (vertically). In addition, it is possible to position the inserted elements more precisely by adjusting the Padding function of the container or by using the Margin and the Alignment functions of the inserted element.

    3. Special cases of positioning 

    For functional or technical reasons, some container elements have a special behavior regarding the positioning of sub-elements. The following container elements have a special behavior in positioning:
    1. Overflow container: Within an overflow container, fixed size elements can only be positioned one below the other.
    2. Sequence: Within a sequence, only one element is displayed at a time, whereby the element in the sequence can be freely positioned like in a container (free positioning). The functions margin and alignment are not available for sub-elements of the sequence.
    3. Swap container (navigation, condition): In a swap container only one element is displayed at a time. The display of further sub-elements of the swap container is controlled by display conditions or the navigation function. Elements in a swap container can be freely positioned like in a container with a free layout. The functions margin and alignment  are not available for sub-elements.

    Please note:
    The different element positioning of the different container types leads to the different presentation of the elements within a container when changing the layout type.

    See also

    Scope of your license(s)
    PROVISIO contact information
    System requirements
    Starting the SiteCaster Editor
    Creating a new project
    Project page (Content view, Inspector)
    Menu bar and toolbar
    Inspector (Overview)
    Inspector (Media library)
    Adding, selecting and editing elements
    Adjusting the size of elements
    Page templates
    Element templates
    Standard elements
    User settings
    User rights
    SiteCaster and SiteRemote
    Key combinations
    About us

    Back To Top