- #30 Defining Absolute Placement Objects
- #31 Formatting AP Divs in the Property Inspector
- #32 Managing AP Divs in the AP Elements Panel
- #33 Defining Div Tags
- #34 Using Rulers, Guides, and Grids
#31 Formatting AP Divs in the Property Inspector
You can move and resize AP Divs using the Property inspector. Defining location and size in the Property inspector is more precise than clicking and dragging with a mouse because you can define exact location, height, and width to the pixel.
To define a location on a page in the Property inspector for a selected AP Div, enter a distance from the left edge of the page (in pixels) in the L (for Left) field, and enter a distance from the top of the page in the T (for Top) field. An AP Div with L and T values of zero will be placed in the upper-left corner of the page (Figure 31a).
Figure 31a Placing an AP Div in the upper-left corner of a page.
Technically, you can create overlapping AP Divs. You might be able to produce some cutting-edge page designs this way and come close to simulating the freedom you have in programs like Illustrator, Photoshop, or InDesign to stack objects on top of each other.
If you do overlap AP Divs, you assign Z-index values to selected AP Divs in the Property inspector to define the AP Divs' "front-to-back" properties. AP Divs with higher Z-index values display on top of AP Divs with lower Z-index values.
Overlapping AP Divs are not universally supported in different browsing environments. They are less reliable than AP Divs in general. And, unless you are pretty expert at CSS, there are a number of pitfalls in designing with overlapping AP Divs that can sink your Web page. For instance, AP Divs often expand in size in different browsing environments in a way that can turn your page into gibberish if overlapping AP Divs are used.
The other definable elements of AP Divs are the following (Figure 31b):
Figure 31b Defining AP Div properties in the Property inspector.
- CSS-P Element: Defines a name for the AP Div for use in scripts or CSS attributes. The name must contain only alphanumeric characters—no spaces—and start with a letter.
- Overflow: Defines how content that is larger than the AP Div will appear in a browser. By default, AP Divs stretch to fit content.
- Clip: Allows a specified amount of content in an AP Div to be "covered up" on the Left (L), Top (T), Right (R), or Bottom (B).
- Z-index: A numerical value for the bottom-to-top order of an AP Div that overlaps others. Higher-value AP Divs appear on top of lower-value AP Divs.
- Vis: Defines visibility. Normally AP Div content is visible, but AP Divs used in scripts are sometimes hidden, to be made visible later by actions of a visitor.
- Bg image: Defines the image that appears as a background in the AP Div.
- Bg color: Defines the background color for an AP Div. If you defined a Bg image, the image will override a background color.
- Class: Applies style using a CSS class. See Chapter 7, "Formatting Page Elements with CSS," for an explanation of how to define CSS classes.