Share via

Layout, Style Builder Dialog Box

  • Article

The Layout page of the Style Builder dialog box makes it possible for you to define CSS page layout attributes. Page layout attributes determine how elements will be positioned in the flow of the HTML stream. You can either apply these attributes directly to HTML elements or add them to CSS style rules.

To apply layout attributes directly to HTML elements on your page, open your HTML document in Design view of the HTML Designer and use the Document Outline window to select an element to format. Then choose Build Style from the Format menu to open the Style Builder dialog box, and select the Layout option in the left pane.

Note   On the Format menu, the Build Style option becomes available when you open an HTML document in Design view and set its targetSchema property to a Web browser that supports HTML 4.0 or later and CSS styles.

When you apply styles to elements selected in Design view, CSS style attributes are inserted inline into the HTML markup for these elements. Switch to HTML view to review the new style attributes inserted.

To add layout attributes to a CSS style rule defined in an external style sheet, place the cursor within the curly braces that follow the selector for the style rule. Then choose Build Style from the Styles menu to open the Style Builder dialog box, and select the Layout option in the left pane.

Note   The Styles menu appears when you open an external CSS style sheet for editing. On the Styles menu, the Build Style option becomes available when you place the cursor within the curly braces { } that follow the selector for a style rule.

A CSS style class defined in an external style sheet can be applied to an element within the <BODY> of a Web page (in this case, including the <BODY> itself) by assigning the CSS style selector as the CLASS property for the element.

Options available on the Layout page of the Style Builder dialog box include the following:

Flow Control

This set of attributes controls the flow of elements within the HTML document. The preview areas adjacent to the Flow Control selectors update as you select options. The following attributes can affect both appearance and performance when pages are viewed in browsers:

  • Visibility
    Sets either the hidden (not visible) or visible value for the visibility property. Select <Not Set> (no option chosen), Hidden, or Visible. For example, if you choose Hidden, the following CSS markup is inserted:

VISIBILITY:hidden

**Note  ** When the attribute is <Not Set>, no code is added to the style.

  • Display
    Sets the DISPLAY attribute values for an element. You can specify whether an element displays and whether a displayed element appears as a block element or within the linear flow. Select <Not Set> (no option chosen), Do not display, As a block element, or As an inflow element. A block element typically starts a new line and cannot be larger than its parent container. For example, a styled <H1> element within a <BODY> element cannot be larger than the containing <BODY> element. An inline element typically does not start a new line and is sized according to the height and width of its own content. For example, if you choose "As a block element," the following CSS markup is inserted:

DISPLAY:block

Note   When the value for the attribute is <Not Set>, no code is added to the style.

Tip   Visibility and Display properties are related, but not the same. Hiding an element does not reduce the amount of time required by a browser to display a page. However, a browser ignores an element that does not display. Consequently, a browser will display a page that includes elements that do not display more quickly than if the same elements were merely hidden. Furthermore, when you wrap text around a hidden element, the text appears to wrap around an empty space. Consider these dependencies when selecting layout properties.

  • Allow text to flow
    Sets attributes that determine how text flows around an element. Select either <Not Set> (no option chosen), Don't allow text on sides, To the right, or To the left. For example, if you choose To the right, the following CSS markup is inserted:

FLOAT:left

Note   When the attribute is <Not Set>, no code is added to the style.

  • Allow floating objects
    Sets attributes that control where objects are allowed to float on a page. Select <Not Set> (no option chosen), On either side (objects can float on either left or right sides of page), Only on right (objects can float only on the right side of page), Only on left (objects can float only on the left side of page), or Do not allow (objects cannot float on page). For example, if you choose Only on right, the following CSS markup is inserted:

CLEAR:left

Note   When the attribute is <Not Set>, no code is added to the style.

Content

  • Overflow
    Sets attributes that control the behavior of elements when elements contain more content than fits in the defined height and width of the element. Select <Not Set> (no option chosen), Use scrollbars if needed (scrollbars display if content overflows defined element size), Always use scrollbars (scroll bars always display), Content is not clipped (element expands to accommodate content), or Content is clipped (content that overflows element size does not display). For example, if you choose Content is not clipped, the following CSS markup is inserted:

OVERFLOW:visible

Note   When the value for the attribute is <Not Set>, no code is added to the style.

Clipping

Sets attributes that control which rectangular portion of an element is displayed. For example, you can display only the upper, right corner of an element. Enter values in one or more of the fields (Top, Bottom, Left, or Right) and select a unit option: px (default), pt, pc, mm, cm, in, em, ex, or %.

Only absolutely positioned elements can be clipped. The values that you specify relate to an element's boundaries. For example, if you set a Top clipping value of 40px, the part of the element that falls between 0px (top of the element) and 40px is not visible. For example, if you enter 50 in the Top and Bottom fields and then accept the default unit option, the following CSS markup is inserted:

CLIP: rect(50px auto 50px auto)

Note   If you assign values to fewer than four clipping fields, the remaining fields are assigned the auto value and the unassigned boundaries are not clipped.

Printing Page Breaks

The following attributes control when page breaks occur within elements using the style:

  • Before
    Select <Not Set> (no option chosen), Auto, or Force a page break. For example, if you choose Force a page break, the following CSS markup is inserted:

PAGE-BREAK-BEFORE:always

  • After
    Select <Not Set> (no option chosen), Auto, or Force a page break. For instance, if you choose Force a page break, the following CSS markup is inserted:

PAGE-BREAK-AFTER:always

See Also

Introduction to Cascading Style Sheets | Working With CSS Styles | Background, Style Builder Dialog Box | Font, Style Builder Dialog Box | Text, Style Builder Dialog Box | Position, Style Builder Dialog Box | Edges, Style Builder Dialog Box | Lists, Style Builder Dialog Box | Other, Style Builder Dialog Box | Color Picker Dialog Box