Exercise 5

FOCUS Layout and positioning in CSS

PURPOSE Show your competency in page layout and element positioning.

VALUE 2 points (see Grading): 1 point for exactitude in matching the design example, 1 point for best practices in your CSS choices.

DETAILS You will find one HTML file, one CSS file and one background image in this folder. Download all three files. Make changes in the CSS file to position and style each one of the four divs according to the requirements and instructions below.

Requirements

Design Example

Your CSS file should cause the HTML file to display like this:

Screenshot at 1024 x 768

See a full-size screenshot in a new window. (Note that it is okay to have a vertical scrollbar on the finished product.)

Note the alignment indicated by the red line in the image below. Your CSS should produce the same alignment. (The red line will NOT be on your page.)

Screenshot detail with alignment

Instructions

  1. There are four divs in the HTML file: box-a, box-b, box-c and box-d. (These are labeled in the text as Box A, Box B, Box C and Box D, so you can see a one-to-one relationship.) You must make changes to each div in the CSS file.
  2. Do not change the body declaration.
  3. In all four divs, focus your attention on position, margin, padding and width. Sometimes it is important to change these, or to add or delete one or more of these. Each of the four divs requires different things.
  4. For Box B, you must add the h1 and p elements to the CSS file and style them.
  5. For Box C, you should adjust the font-size and line-height.
  6. No colors need to be changed in any div. However, you must delete the background-color declaration for Box B and Box D.

A brief explanation: Absolute Positioning (Sitepoint).

Note that we did not read anything about absolute positioning in Cederholm.