Lesson 2

Set the Position and Size of an AP Element

 

Sample Solution

OBJECTIVE:
In this lesson, you will use the Property Inspector to position and size AP elements on the home page of The Striped Umbrella website.

 

Set the Left and Top Position of an AP Div

  1. Click the AP Div border to select the AP Div element
  2. Type 520px in the L text box in the CSS-P Element section (of the Property Inspector), then press [Tab]—the AP Div moves automatically to the position you specified
  3. Type 260px in the T text box, then press [Enter]
  4. Save your work, then compare your screen to the Sample Solution
    [TIP:  The AP Div may appear in a different position on your screen, depending on your screen size

Summary:  You adjusted the upper-left corner position of the AP Div.

 

Set AP Div Height and Width

  1. Click the AP Div border to select the AP Div
  2. Type 200px in the W text box, then  press [Tab]—the AP Div automatically adjusts its width to the dimension you specified
  3. Type 175px in the H text box, then press [Tab]—the AP Div automatically adjusts to the height you specified—notice that the upper-left corner stays in the same position
  4. Save your work, then compare your screen to the Sample Solution

Summary:  You adjusted the height and width of the AP Div.


Set the Z-Index Value for an AP Div

  1. Draw another AP Div anywhere on the page, select it, then name it 'background'
  2. Select the background AP Div, then adjust its size and position by setting the following properties in the Property Inspector:
     L: 510px, T: 250px, W: 205px, and H: 180px
    The new AP Div is now positioned on top of the contest AP Div, temporarily blocking all but its right and lower borders
  3. Click the Background color button next to the Bg color text box, then change the background color of the background AP Div to dark blue, #009
    [TIP:  You can also select the color number in the text box and type the new color number]
  4. Change the Z-Index value of the background AP Div to 1 (in the Property Inspector)
  5. Click the contest AP Div to select it, by clicking its right or lower border
  6. Change the Z-Index value of the contest AP Div to 2 (in the Property Inspector), then save your work
    The background AP Div is now positioned behind the contest AP Div to act as an outline—the contest AP Div does not have content yet—you can see the background AP Div above it and to the left

Summary:  You added a new AP Div named background to the home page, and specified its dimensions and position on the page using the Property inspector.  You set the background color of the background AP Div, then adjusted the vertical stacking order.