Export (0) Print
Expand All

How to: Position Elements in Design View 

By default, elements in an HTML page or ASP.NET Web page are rendered in the order that they appear in the markup, which is sometimes referred to as flow layout. You can also lay out elements two-dimensionally, positioning elements with horizontal and vertical coordinates anywhere on the page. This layout option takes advantage of the positioning options that are available through styles.

To help you work with static text or to position elements as a group, you can create a layer, which is a div element with positioning information.

You can set positioning for individual elements on the page. You can also set an option to set positioning automatically for all of the elements that you add to the page by dragging or by pasting from the Clipboard.

To position an element with horizontal and vertical coordinates

  1. In Design view, select the element that you want to position.

  2. On the Layout menu, click Position, and then click Absolute or Relative.

  3. Drag the control to where you want it.

    NoteNote

    If the element is set to use pixels for positioning units, which is the default in Visual Web Developer, you can constrain dragging to an invisible grid. For details, see CSS Positioning, HTML Designer, Options Dialog Box.

To position static text or groups of elements

  1. On the Layout menu, click Insert Layer.

    Visual Web Developer inserts a div element with positioning information set.

  2. To move the div element, click the selection symbol, and then drag it to a new position.

  3. To resize the div element, click the selection symbol, and then drag the resize handles.

  4. To add text, click inside the div element, and then type the text.

  5. To add elements, drag them from the Toolbox to the div element.

To reset elements to flow layout

  1. In Design view, select the element that you want to reset to flow layout.

  2. On the Layout menu, click Position, and then click Static or Not Set:

    • Static sets positioning to static, which retains the cascading style sheet (CSS) positioning property but explicitly puts the element into flow layout.

    • Not Set removes all of the positioning information.

To set positioning options for new elements

  1. On the Tools menu, click Options.

  2. Open the HTML Designer node, and then click CSS Positioning.

  3. Under Positioning Options, select the check box.

  4. From the list, select the positioning option that you want to apply to all elements that you drag to the page or paste from the Clipboard.

    For details on what each option means, see CSS Positioning, HTML Designer, Options Dialog Box.

See Also

Community Additions

ADD
Show:
© 2014 Microsoft