Export (0) Print
Expand All
Expand Minimize
1 out of 4 rated this helpful - Rate this topic

Position, Style Builder Dialog Box 

The Position page of the Style Builder dialog box makes it possible for you to define cascading style sheet (CSS) positioning attributes. You can either apply these attributes directly to HTML elements or add them to CSS style rules.

To apply positioning attributes directly to HTML elements on your page
  1. Open your HTML document in Design view of the HTML Designer and select the element to format.

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

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

    The Position, 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 positioning 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 Position in the left pane of the Style Builder dialog box.

    The Position, 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 by assigning the CSS style selector as the CLASS property for the element.

Options available on the Position page of the Style Builder dialog box include the following.

Tasks

UI Elements

Position Mode

Sets the mode that determines which subsequent positioning fields become available. Select one of the following options from the drop-down list.

<Not Set>

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

Position in normal flow

Does not change the position of the element; height and width can be specified. If you choose Position in normal flow, the following CSS markup is inserted:

POSITION:static

NoteNote

The preview area adjacent to the Position Mode selector is updated to reflect the mode selections.

Offset from normal flow

Makes it possible for you to specify top and left positions for an element relative to its position in the normal flow; height and width can be specified. An element's normal flow is its position before the style is applied. If you choose Offset from normal flow, the following CSS markup is inserted:

POSITION:relative

Absolutely position

Makes it possible for you to specify absolute top position, absolute left position, Z-index, height, and width for an element. Typically, you absolutely position elements that you want to anchor to a specific position. For example, you might absolutely position a logo so that is does not move as you add and edit other elements. If you choose Absolutely position, the following CSS markup is inserted:

POSITION:absolute

If you select a position mode, the following options are available.

Top

Sets the top position of an element, either as an absolute value or as a value relative to its position in the normal flow. Enter a value and choose a unit option (px, pt, pc, mm, cm, in, em, ex, or %). The default unit option is px. For example, if you type 5 and then accept the default unit option, the following CSS markup is inserted:

TOP:5px

NoteNote

This option is available when you select Offset from normal flow from the Position mode list.

Left

Sets the left position of an element, either as an absolute value or as a value relative to its position in the normal flow. Enter a value and choose a unit option (px, pt, pc, mm, cm, in, em, ex, or %). The default unit option is px. For example, if you type 5 and then accept the default unit option, the following CSS markup is inserted:

LEFT:5px

NoteNote

This option is available when you choose Offset from normal flow from the Position mode list.

Height

Sets the height of an element. Enter a value and choose a unit option (px, pt, pc, mm, cm, in, em, ex, or %). The default unit option is px. For example, if you type 5 and then accept the default unit option, the following CSS markup is inserted:

HEIGHT:5px

Width

Sets the width of an element. Enter a value and choose a unit option (px, pt, pc, mm, cm, in, em, ex, or %). The default unit option is px. For example, if you type 5 and then accept the default unit option, the following CSS markup is inserted:

WIDTH:5px

Z-Index

Sets the z-order for an element. The z-order controls the display of overlapped elements; elements with higher z-order values are displayed in front of those with lower z-order values. To move the element higher in the z-order, enter a positive number to produce a result such as the following example:

Z-INDEX:99

NoteNote

To move the element lower in the z-order, enter a smaller or negative number.

NoteNote

Z-Index and position are related. If you have entered position values that cause elements to overlap, you can control which element appears on top of the other by assigning appropriate Z-Index values. Assign a higher Z-Index value to the element that you want to appear on top of the other element.

See Also

Did you find this helpful?
(1500 characters remaining)
Thank you for your feedback

Community Additions

ADD
Show:
© 2014 Microsoft. All rights reserved.