WEB EDITOR

Working with: DIV

As you may already know, the DIV element can be declared anywhere in the body of your HTML document. In general, the DIV element provides you with mechanism for structuring your pages in areas or blocks. Hidden div on the other hand, is a mechanism to hide certain content in your page, and to display it only when specific link/button is pressed.

Div Properties

Use this window to change the default Div attributes.

• ID (edit box) - This attribute assigns a name to the DIV. This name must be unique in a page.
• Title (edit box) - This attribute offers advisory information about the Div.
• Presets (combo box) - Use this combo box to select preset (predefined template) for your Div. You can also save your settings as new template (using the Save As Preset window) and use it later for other Div's.

Layout

The attributes in this section control the Div element layout.

• Width (check box and edit box) - If checked, this attribute will set the Div element 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 Div element 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 Div 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 Div element.
  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 Div element.
  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 Div element.
  In case unchecked, the top border settings will be used instead.
• Overflow (combo box) - This attribute specifies whether the content of the Div element 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 Div box. 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), that mechanism should be displayed for the Div 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 Div's.

• Float (combo box) - This attribute allows you to wrap text around the Div element. You can select between None, Left and Right.
• Opacity (check box and number spin box) - This attribute will set blending effect for the content of the Div element.

Background

The attributes in this section control the Div element background.

• Color (button and color picker) - This attribute will set background color for the Div element.
• Image (edit box and button) - This attribute will set background image for the Div element.
• 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.

Position

The attributes in this section control the Div element position on the page.

• Position (combo box) - This attribute will set the position type - static, absolute or relative.
• Left (edit box) - This attribute will set starting left position for the Div element.
• Top (edit box) - This attribute will set starting top position for the Div element.
• Z-Index (edit box) - This attribute allows you to use the divs in your page as layers and sets the layer position for certain Div.

Tag

Use this edit box if you need to define any additional custom attributes for the Div element.