WEB EDITOR
Working with: Css List Table
The Css List Table is a mechanism of creating table using unordered list in combination with CSS (Cascading Style Sheets). Css List Table is very flexible tool for structuring your page in areas or blocks. You can insert Css List Table anywhere in your page.
To insert a Css List:
- Position the text marker where you want to insert the Css List.
- Click the Css List Table icon (
)
on the Main Toolbar.
- Select number of rows to be inserted. Note that Css List Table may contain only rows. You can add, delete or merge rows at any time, using the CSS List submenu (accessed by right-clicking in the Css List Table after insert).
- Right-click in the Css List and select Css List Properties from the menu and then Properties from the Css List submenu to change the default Css List attributes.
Css List Properties
Use this window to change the default Css List attributes.
Presets
Use this combo box to select preset (predefined template) for your Css List. You can also save your settings as new template (using the Save As Preset window) and use it later for other Css Lists.
Tabs
Each tab is associated with separate set of formatting attributes. The settings in UI Style tab are general settings. They will be applied for all Css 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 list items combo box) and set specific formatting for it.
UL Style
Along with formatting attributes, this tab contains also few special attributes:
- ID (edit box) - This attribute assigns a name to the Css List. This name must be unique in a page.
- Add ID's for List Items (check box) - Check this box if you want the ID to be inserted in each Css List item.
- Title (edit box) - This attribute offers advisory information about the Css List.
- Float (combo box) - This attribute allows you to wrap text around the Css Listelement. You can select between None, Left and Right.
Section 1, Section 2, Section 3 and Section 4
The four sections here allows you to define separate formatting for certain sections within your Css List. For example, if you want to set certain formatting for the first item in your Css List, you can take Section 1, select First Item Only from the Apply to list items combo box, and set the formatting attributes below.
Formatting Attributes
The formatting attributes below control the Css List Table layout for selected section or for the UL Style in general (depending on which tab you have stepped).
- Width (check box and edit box) - If checked, this attribute will set the Css List Table width. Make sure to define width value either in px or in %.
- Height (check box and edit box) - If checked, this attribute will set the Css List Table height. Make sure to define height value either in px or in %.
- Padding (T, R, B, L) (number spin box) - These four attributes will set top, right, bottom and left padding.
- Border (Top) (number spin box, combo box and color picker) - Use the three attributes (border size, type and color) to set the top border for the Css List element.
- Border (Right) (check box, number spin box, combo box and color picker) - Check the checkbox if you want to set the right border separately. Use the three attributes (border size, type and color) to set the right border for the Css List Table.
In case unchecked, the top border settings will be used instead.
- Border (Bottom) (check box, number spin box, combo box and color picker) - Check the checkbox if you want to set the bottom border separately. Use the three attributes (border size, type and color) to set the bottom border for the Css List Table.
In case unchecked, the top border settings will be used instead.
- Border (Left) (check box, number spin box, combo box and color picker) - Check the checkbox if you want to set the left border separately. Use the three attributes (border size, type and color) to set the left border for the Css List Table .
In case unchecked, the top border settings will be used instead.
- Background Color (button and color picker) - This attribute will set background color for the Css List Table.
- Background Image (edit box and button) - This attribute will set background image for the Css List Table.
- Repeat (combo box) - This property determines how the specified background image is repeated. The repeat value will repeat the image both horizontally and vertically. The repeat-x value will repeat the image horizontally while the repeat-y value will repeat the image vertically. Use no-repeat value if you don't want the background image to be repeated.
- Position (combo box) - This property gives the initial position of the specified background image.
- Overflow (combo box) - This attribute 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 - This value indicates that content is not clipped, i.e., it may be rendered outside the Css List Table. Hidden - This value indicates that the 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 - This value indicates that the content is clipped and that if the user agent uses scrolling mechanism that is visible on the screen (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 agent-dependent, but should cause a scrolling mechanism to be provided for overflowing Css Lists.
- Display (combo box) - This property can be used to control if an element is to be displayed or not. None - This value indicates that the element will not be displayed. Block - This value indicates that the element will be displayed as a block-level element, with a line break before and after the element. Inline -This value indicates that the element will be displayed as an inline element, with no line break before or after the element. Inline-block - This value indicates that the element will be displayed as an inline block element. List-item - This value indicates that the element will be displayed as a list. Use Default to set default display behavior.
- Line Height (check box and number spin box) - This property sets the distance between lines. Check the box and set specific height if you need to set line height different than the default one.