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
- Do not change anything in the HTML file.
- Change ONLY the CSS file.
- Do not edit the background image in any way.
- Do not use other or additional images of any kind.
- Change the CSS as necessary to make the displayed page match the appearance of the design example.
- Follow all the instructions below.
- Upload ALL THREE files to your Web site and send me the URL of the HTML page, via e-mail, by the deadline.
Design Example
Your CSS file should cause the HTML file to display like this:
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.)
Instructions
- 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.
- Do not change the body declaration.
- 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.
- For Box B, you must add the h1 and p elements to the CSS file and style them.
- For Box C, you should adjust the font-size and line-height.
- 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.