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

Problem Solving: Keeping Up with CSS Developments
Designers are constantly pushing the limits of what can be done with CSS and how it can
be used to lay out Web pages. New techniques of using CSS are being developed all the
time. Employers expect designers to keep up with the latest techniques and know when
they should rely on older techniques. At Web sites such as www.csszengarden.com , design-
ers contribute CSS page layouts that they have created, demonstrating new and innovative
ways to use CSS. Online magazines such as webdesignermag.co.uk discuss best practices
as well as innovative techniques for using CSS. Visit sites like this regularly to keep up to
date with the latest innovations.

Gage wants you to add the word AVAILABLE below TICKETS. You will create a second
AP div in the home page for this content.

To create a new AP div in the home page:

◗

1. In the Layout category of the Insert panel, click the Draw AP Div button.
◗

2. In the home page, draw a new AP div the approximate width and height of the
tickets AP div directly below the TICKETS text. The new AP div overlaps the
TICKETS AP div. See Figure 4-33.

Figure 4-33 Second AP div drawn in the home page

new AP div overlaps
the tickets AP div

Trouble? If you cannot draw the new AP div in front of the TICKETS AP div, the
Prevent overlaps check box in the AP Elements panel is probably checked. Expand
the CSS panel group, click the AP Elements tab to display the AP Elements panel,
click the Prevent overlaps check box in the panel to uncheck it, click the selection
handle to select the AP div you just drew, press the Delete key, and then repeat
Steps 1 and 2.
Trouble? If the AP div is not positioned or sized correctly, you need to move or
resize it. Click the AP div's selection handle to select the AP div, and then drag
the AP div to the correct position or drag a resize handle to resize it.

◗

3. Click in the new AP div to make it active, and then type AVAILABLE .
◗

4. Select the AVAILABLE text. You'll format the text in the new AP div.
◗

5. In the HTML pane of the Property inspector, click the Format button, and then
click Heading 2 . If you cannot see the formatted text, it may be over a similarly
colored area of the background.