Export (0) Print
Expand All
Expand Minimize

Layout, Style Builder Dialog Box 

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.

NoteNote

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

NoteNote

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

NoteNote

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

NoteNote

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

NoteNote

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

NoteNote

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

NoteNote

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)
NoteNote

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

Community Additions

ADD
Show:
© 2014 Microsoft