Layout, Style Builder Dialog Box

  • Article

[This documentation is for preview only, and is subject to change in later releases. Blank topics are included as placeholders.]

The Layout page of the Style Builder dialog box makes it possible for you to define cascading style sheet (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

  1. Open your HTML document in Design view of the HTML Designer and use the Document Outline window to select an element to format.

  2. Click Style on the Format menu to open the Style Builder dialog box.

  3. Click Layout in the left pane of the Style Builder dialog box.

    The Layout, Style Builder dialog box appears in the right pane.

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

  1. Open an existing external style sheet and place the insertion point within the curly braces ({ }) that follow the selector for the desired style rule.

  2. Click Build Style on the Styles menu to open the Style Builder dialog box.

  3. Click Layout in the left pane of the Style Builder dialog box.

    The Layout, Style Builder dialog box appears in the right 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 insertion point 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> element of a Web page (in this case, including the <BODY> element 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.

Tasks

UI Elements

Flow Control

This set of attributes controls the flow of elements within the HTML document. The preview areas adjacent to the Flow Control selectors are updated 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 is displayed 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.

    Note

    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 appear. Consequently, a browser will display a page that includes elements that do not appear 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 <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 the left or the right side of the page), Only on right (objects can float on only the right side of the page), Only on left (objects can float on only the left side of the page), or Do not allow (objects cannot float on the 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 appear if content overflows the defined element size), Always use scrollbars (scroll bars always appear), Content is not clipped (the element expands to accommodate content), or Content is clipped (content that overflows the element size does not appear). 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. Likewise, 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 example, if you choose Force a page break, the following CSS markup is inserted:

    PAGE-BREAK-AFTER:always

See Also

Reference

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

Color Picker Dialog Box

Concepts

Working with CSS Overview

Other Resources

Other, Style Builder Dialog Box