About positioning page elements

Microsoft Office FrontPage 2003

You can use absolute positioning to place an element at an exact location on a page. An element placed using absolute positioning remains at a fixed location relative to the top-left corner of the page. It floats on top of, or sits behind, text or other page elements.

You can place the element by dragging it to the location you want, or you can specify coordinates, which are relative to the upper-left corner of the page or frame the element is in, as shown in the example below.

The position of page elements

Callout 1 The x- and y-coordinates of a page element

Callout 2 The position of the page element in Microsoft FrontPage

Callout 3 The position of the page element in a Web browser

If an absolutely positioned element is placed in a position box, the coordinates are relative to the upper-left corner of the position box, rather than the page.

You can specify the coordinates of the page element relative to the upper-left corner of its container, in pixels. You can also specify the dimensions of a position box by using the following units:

  • Pixels (px)
  • Font size (em)
  • X-height of the font (ex)
  • Inches (in)
  • Centimeters (cm)
  • Millimeters (mm)
  • Points (pt), where one point is equal to 1/72 of an inch
  • Percentage of the page height or width (%)

For example, you can set a position box to be the same width as the page (set Width to 100%), and 20 pixels high (set Height to 20 px).

When viewed at different screen resolutions, the element might not be placed as you intended, although the element still appears at the pixel coordinates you specified. When the screen resolution changes, so does the layout, since other page elements such as text are displayed differently.

Note  Adding page elements by using absolute positioning with DHTML may cause either the DHTML effect or the absolutely positioned element to behave unexpectedly.

ShowRelative positioning

Use relative positioning to place page elements inline with text. Regardless of the changes you make to the page above or below this point, the layout of the relatively positioned element remains intact. You can use relative positioning for animation and DHTML effects.

ShowFloating

You can create a floating page element that lets other elements, such as text, wrap around it. A floating element is removed from the flow of text, and is aligned left or right. You can also specify the height and width of the floating area of the element. For example, the figure below shows how text flows around a paragraph that floats to the right, creating a sidebar of text that is aligned to the right of the page regardless of the layout of text around it.

Text wrapping around an image

ShowStacking

You can use positioning to overlap elements. The z-order refers to an element's position in a stack of elements, which includes the page itself. The main page layer is zero; a positive z-order means that the element is in front of the main layer, and a negative number means the item is behind it. Using a negative number, you can even position elements "underneath" the page layer.

Overlapping page elements

Working with positioned elements

After you position your page elements, you can work with them in the following ways:

ShowSelecting a positioned element

You can select some page elements by clicking them directly or by using the menu commands. Many types of page elements, such as graphics, form fields, and other objects, are indicated with an anchor icon when you show all nonprinting characters. The anchor is displayed in the text flow where you originally inserted the element. To select the object, you select the corresponding anchor icon.

ShowGrouping page elements

You can combine the types of positioning to achieve a variety of results, such as to keep a group of page elements together as a unit. For example, you can add a position box to a page, and inside the box, add multiple page elements using absolute positioning to lay them out. The result is a position box that is positioned with respect to the text flow on the page, but the layout of the elements inside the box is always preserved, regardless of any changes you make to the rest of the page. Even when the window is resized, the layout of the elements inside the position box remains the same.

Absolutely-positioned elements grouped in a position box

Callout 1 Grouping page elements

Callout 2 Layout of grouped elements is preserved, even when the Web browser window is resized

Show Ensuring that positioned items are displayed properly

To view the properties of a page element, position the mouse pointer over it. The properties are displayed as a ScreenTip.

Page layout can vary when viewed at different screen resolutions, even though an absolutely positioned element always appears at the same coordinates you specify. To ensure the page is displayed well to all site visitors, you should test it at different screen resolutions.

Note  Positioning works with Web browsers that support cascading style sheets (CSS) 2.0, such as Microsoft Internet Explorer 4.0 and later, and Netscape Navigator 4.0 and later. When viewed in earlier browser versions, positioned content is aligned left, and is located inline with the text rather than uniquely positioned.