How to Modify Absolute-Positioned (AP) Divs in Adobe Dreamweaver CS6 - dummies

How to Modify Absolute-Positioned (AP) Divs in Adobe Dreamweaver CS6

By Jennifer Smith, Christopher Smith, Fred Gerantabee

Each Absolute-Positioned (AP) Div you draw in Adobe Dreamweaver CS6 is listed automatically in the AP Elements panel (choose Window→AP Elements to display it). The AP Elements panel can help you select, hide, and show any AP Divs on the page. This panel is handy when you have lots of AP Divs on the page and want to navigate among them accurately.

Most of all, because you can modify the properties for any AP Div from its corresponding ID style, the panel helps you figure out which ID style belongs to an AP Div.


The AP Elements panel is often grouped with the CSS Styles panel, just in case you’re looking for it.

To modify a box (AP Div), follow these steps:

  1. Choose Window→AP Elements to open the AP Elements panel.

  2. In the panel, locate and select apDiv1 to highlight it on the page.

    The Property inspector displays its size and position in addition to other properties.

  3. Using the text boxes in the Property inspector, change the box width by entering a number into the W field and change the box height by entering a number in the H field.

  4. Click the swatch next to Bg Color and choose a color from the pop-up Swatches panel to set a background color for the box.

    For additional properties, such as border or padding, add them in the CSS Styles panel.

  5. If the CSS Styles panel isn’t already visible, open it by choosing Window→CSS Styles.

  6. Double-click the #apDiv1 ID style that controls the box.

    The CSS Rule Definition dialog box appears.


  7. Select the Border category from the left to change the border.

  8. In the Style column, use the Top drop-down list to set a border style (such as Solid) to all four sides.

    Use the Top drop-down list under the Width category to select a border thickness (for example, medium) for all four sides. Use the topmost Color Picker under the Color column to assign a border color to all four sides.

    To assign different values to any or all sides for style, width, or color, deselect the Same for All check box under their respective columns.

  9. In the Box category on the left, under Padding, set the padding for all four sides of the box to the thickness you want (for example, enter 5 px in the text boxes).

  10. Click OK to exit the panel and apply the changes.

    You see how the CSS properties you applied affect the apDiv1 box on the page.

To hide a box shown under the AP Elements panel, click the column to the left of its name (under the Eye icon) until a closed Eye icon appears. To make the box reappear, click the Eye icon until the box opens again.

You may notice the Prevent Overlaps check box, deselected by default, at the top of the AP Elements panel. Because AP Divs can easily overlap each other, selecting this check box overrides that behavior by forcing boxes next to each other and preventing the creation of new boxes on top of each other.