Using CSS for Page Layout Working with Floating and AP - New Perspectives on Adobe Dreamweaver CS5, Comprehensive - page 200

Using Absolutely Positioned Div Tags
With absolute positioning, div tags can be positioned anywhere on the screen with accu-
racy and reliability, and they remain in place relative to the top and left margins of the
page (or top and left margins of the object in which they are placed) regardless of how a
user resizes the browser window. AP divs (absolutely positioned divs) can be stacked on
top of one another so that their content overlaps. They can be animated, made visible or
invisible, and have their stacking order (the order in which they overlap) changed. You
can also use CSS styles to customize the display attributes of an AP div just like with a
regular div tag.
Gage wants you to add some promotional text outside of the content area in the home
page. You will use AP divs to place the text in the upper-left corner of the browser win-
dow so that the content maintains a consistent position. This text is designed to promote
ticket sales and will link to the tickets page.

Drawing AP Divs
You draw an AP div in a page in Design view. The borders of each AP div you draw are
visible in the Dreamweaver environment to make them easier to work with. The borders
do not appear in the browser window.
You will draw an AP div in the home page. The AP div will contain a link to the
tickets page.

To draw an AP div in the home page:

◗

1. If you took a break after the previous session, make sure the NextBest Fest site is
open in Dreamweaver, the workspace is reset to the default Designer configura-
tion, and the index.html page is open in Design view.

◗

2. On the Application bar, click View , point to Rulers , and then click Show . The rul-
ers appear along the top and left sides of the Document window.

You can also press the
Ctrl+Alt+R keys to show
or hide the rulers.

◗

3. If the units on the ruler are not pixels, right-click a ruler, and then click Pixels .
◗

4. In the Layout category of the Insert panel, click the Draw AP Div button. The
pointer changes to .

◗

5. Position the pointer approximately 10 pixels below the top of the page and
approximately 10 pixels from the left border of the page, and then drag to draw
an AP div approximately 100px wide and 50px high. The rectangular AP div
appears in yellow in the upper-left corner of the page when you release the
mouse button. See Figure 4-20.

Figure 4-20 AP div drawn in the home page

click to draw
an AP div

selection handle

new AP div