TABLES AND LAYOUTS

Vertical List (accordion)

The Vertical List is a way to make tables using an unordered list in combination with CSS (Cascading Style Sheets). Vertical List is a flexible tool for structuring page content in row blocks and formatting these blocks. You can insert Vertical List anywhere in your page. The vertical list consists of header and content sections that form rows. You can format the headers one way and the content another way, so that they can be easily recognized.

To insert a Vertical List :

Position the text marker where you want to insert the Vertical List .
Click the Vertical List icon () on the Toolbar.
Select the number of rows to be inserted. Note that a Vertical List may contain only rows. You can add, delete or merge rows at any time, using the Vertical List submenu (accessed by right-clicking in the Vertical List after insert).
Right-click in the CSS List and select Vertical List Properties from the menu and then Properties from the Vertical List submenu to change the default Vertical List attributes.

Vertical List Properties

Use this window to change the Vertical List attributes.

To load predefined settings or save current settings and use them later for another object, use the Presets option (at the top left corner). For more information see Presets.

Tabs

Each tab is associated with separate set of formatting attributes. The settings in Container tab are general settings. They will be applied for all Vertical List items as default. If you want to set separate formatting for certain item(s), you can take one of the sections, associate this section with these certain items (using the Apply to rows drop-down menu) and set specific formatting for it.

For example, by default section I formats all odd rows (means the headers), while section II formats all even rows (means the content rows).

Container

This tab contains also few special attributes:

ID (edit box) - Assigns a name to the CSS List. This name must be unique in a page.
Title (edit box) - Offers advisory information about the CSS List.
Float (drop-down menu) - Allows you to wrap text around the CSS List element. Select between None, Left and Right.
Add ID's for Rows (check box) - Check this box if you want the ID to be inserted in each CSS List item.

Section I, Section II, Section III and Section IV

The four sections here allow you to define separate formatting for certain sections within your Vertical List. For example, if you want to set certain formatting for the first item in your list, take Section 1, select First Item Only from the Apply to rows drop-down menu, then set the formatting attributes below.

Settings

The formatting attributes below control the vertical list layout for selected section or for the container in general (depending on which tab you have selected).

Size Settings

Width (edit box) - Set the width.
Height (edit box) - Set the height.
Width and height are set in px (pixels) as default. In case you need to set them in % (percent of page or table width), make sure to include % sign.
Line Height (check box and number selection box) - Sets the distance between lines. Check the box and set specific height if you need to set line height different to the default.

Padding

Set padding (spacing) for the vertical list items. For more information see Padding Properties.

Margins

Set margins for the vertical list items. For more information see Margins Properties.

Border

Set borders for the vertical list items. For more information see Border Properties.

Border Radius

The border-radius property allows you to create round corners to the vertical list items. For more information see Border Radius.

Visibility

Overflow (drop-down menu) - Specifies whether the content of the CSS List Table is clipped when it overflows the element's box (which is acting as a containing block for the content). Values have the following meanings:

Visible - Content is not clipped, i.e., it may be displayed outside the CSS List Table. Hidden - Content is clipped and that no scrolling mechanism should be provided to view the content outside the clipping region; users will not have access to clipped content. Scroll - Content is clipped and if the users browser uses scrolling (such as a scroll bar or a panner), that mechanism should be displayed for the CSS List whether or not any of its content is clipped. Auto - The behavior of the 'auto' value is user browser-dependent, but should cause a scrolling mechanism to be provided for overflowing CSS Lists.

Display (drop-down menu) - This property can be used to control if an element is to be displayed or not. None - The element will not be displayed. Block - The element will be displayed as a block-level element, with a line break before and after the element. Inline - The element will be displayed as an inline element, with no line break before or after the element. Inline-block - The element will be displayed as an inline block element. List-item - The element will be displayed as a list. Use Default to set default display behavior.

Background

Sets background for the vertical list items. For more information see Background Properties.