Export (0) Print
Expand All
0 out of 2 rated this helpful - Rate this topic

Aligning and Layering HTML Elements in Design View

Visual Studio .NET 2003

In Design view, as you edit an HTML page or panel whose pageLayout property set to Grid Layout, a positioning grid appears to help you align elements precisely. Its horizontal and vertical guidelines can be either visible or invisible, depending upon whether the Show Grid option is enabled. When the Snap to Grid feature is enabled, elements dragged across or inserted onto the Design view surface will automatically align themselves (snap) to the nearest positioning grid guidelines.

Note   Elements will snap to the positioning grid whether or not the grid is visible.

To display the Design view positioning grid and activate Snap to Grid

  1. Open a Web document for editing in Design view.
  2. Set the pageLayout property of the document to GridLayout.
  3. On the View menu, choose Toolbars and make sure Design is checked.

    The Show Grid and Snap to Grid buttons appear.

    1. To display the positioning grid, select the Show Grid button or press CTRL+G.
    2. To activate Snap to Grid, select the Snap to Grid button or press CTRL+SHIFT+G.

To set the distance between lines in the positioning grid

  1. On the Tools menu, select Options.

    The Options dialog box opens.

  2. From HTML Designer in the left pane, choose Display.

    The Display options for the HTML Designer are displayed in the right pane.

  3. Under Default Grid Setting, enter values for Horizontal Spacing and Vertical Spacing. The default value for each is 8 pixels.

To align elements manually

  1. Select the objects that you want to align.
  2. On the Format menu, choose Align.
  3. Choose one of the following options:
    Option Result
    Lefts Aligns the left edges of the selected objects. The left edge of the leftmost object is the alignment source.
    Centers Aligns the centers of the selected objects along a vertical plane. The center of the rightmost object is the alignment source.
    Rights Aligns the right edges of the selected objects. The right edge of the rightmost object is the alignment source.
    Tops Aligns the top edges of the selected objects. The top edge of the topmost object is the alignment source.
    Middles Aligns the middle points of the selected objects along a horizontal plane. The center of the topmost object is the alignment source.
    Bottoms Aligns the bottom edges of the selected objects. The bottom edge of the bottommost object is the alignment source.
    to Grid Aligns elements to the Positioning Grid, as if the Snap to grid option were selected.

You can change the layer of certain HTML elements to make them display in front of or behind other elements.

To cause HTML elements to overlap

  1. Set the targetSchema property of your HTML document to a Web browser that supports HTML 4.0 and later.
  2. In Design view, select the desired elements.
  3. On the Format menu, select Order, and choose Bring to Front or Send to Back.
    Note   Overlapping elements were not supported in HTML 3.2. If the targetSchema property of your HTML document is set to "Internet Explorer 3.02 / Navigator 3.0," indicators () appear in the upper-left corners of overlapped elements. These elements will display as if they had not been positioned.

As you design an HTML document, you can lock some elements in place while continuing to add and move others.

To lock an HTML element in position, or unlock an HTML element

  1. In Design view, select an element to lock or unlock.
  2. On the Format menu, choose Lock Element.

    If the element was unlocked, a Design_Time_Lock: True attribute is added to its inline style. As you continue to work on the Design view surface, the locked element will remain in its current position.

    If the element was locked, the Design_Time_Lock attribute is removed from its inline style. You can now adjust the position of the element.

    Note   Elements that existed on the page before the pageLayout property was set to GridLayout cannot be locked.

You can decide the default settings for Show Grid and Snap to Grid.

To set default Show Grid and Snap to Grid settings

These settings determine whether the Show Grid and Snap to Grid features will become active by default whenever the pageLayout property of a new Web document is set to GridLayout.

Note   The positioning grid and Snap to Grid are available only in Design view.
  1. On the Tools menu, select Options.

    The Options dialog box opens.

  2. Expand the HTML Designer options and select Display.
    1. To set the default showGrid property for Web documents in Grid Layout, select or clear the Show Grid check box.
    2. To turn the Snap to Grid feature on or off by default when Web documents are in Grid Layout, select or clear the Snap to Grid check box.

See Also

Display, HTML Designer, Options Dialog Box | Editing HTML Pages in Design View | Positioning HTML Elements in Design View | Selecting Multiple Controls | Setting the targetSchema Property of an HTML Document

Did you find this helpful?
(1500 characters remaining)
Thank you for your feedback
Show:
© 2014 Microsoft. All rights reserved.