Exercise 6: CSS Positioning
Resources for this exercise:
- See the Course Schedule for due date. Exercises are due before the beginning of class on the due date.
- See the Homework Frequently Asked Questions (FAQ) page for answers to questions about homework exercises.
- See the CSS Box Model tutorial.
- See the CSS Positioning section of the Resources page.
In this exercise you will use CSS positioning to lay out a page. This page must demonstrate the use of at least one instance each of relative, absolute, and fixed positioning.
1) Create a new Web page for exercise 6.
2) This page must contain the XHTML 1.0 Strict DocType,
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
3) This page must contain links (either buttons or text links) to the HTML and CSS validators. See How to Put HTML and CSS Validate Buttons on Your Page for information on how I want you to to do this. (Use the block of code on this page to make the button links or text links, so that clicking on the links automatically lets you know if the page validates or not.)
4) This page must display your name and say "Exercise 6".
5) This page's <title> must indicate that this is your
exercise 6 page, so it should say something like "John Sky's DM160B
".
6) This page must contain three <div>s (one will be
the page's main content, one will be a navigation menu, and one will be a banner) within a wrapper <div>.
7) Additionally, this page must contain a footer <div>. The footer may be either within the wrapper or outside of the wrapper.
8) In the banner div, place an image (such as a logo). This div will appear across the top of the page, spanning the other two divs that will appear side-by-side under it. Apply an ID of "banner" to this div.
9) In the menu div, place a navigation menu that links to your other exercise pages and to your home page. Apply an ID of "menu" to this div.
10) In the content div, place a headline, an image (obviously not the same image as the one used as your banner logo), and at least a few paragraphs of text. Apply an ID of "content" to this div.
11) The image in the content div must be floated.
12) Using CSS positioning properties, position the three div blocks on the page so that the banner div is across the top, and the other two div blocks appear as two side-by-side columns underneath the banner in a standards-compliant browser such as Firefox.
13) Using CSS positioning, position the footer to be below the menu and content divs.
14) The wrapper must have a background color, so that it is easy to see where the edges of the wrapper are.
15) Absolutely no tables may be used in this page.
16) Save this file as "exercise6.html".
17) Upload your Web page to your public_html folder on the server. Upload your image to your images folder within your public_html folder on the server.
18) View this page (the page on the server, not the page on your disk) in a browser.
Go to:
http://www.webhawks.org/~yourusername/exercise6.html
to view your exercise 6 page.
19) Make sure the HTML on this page validates (using the XHTML 1.0 Strict DocType) with no errors, according to the W3C's online HTML Validator at http://validator.w3.org/. You can easily do this by clicking on your HTML validator button. For more information, see How to Use the W3C HTML and CSS Validators for step-by-step directions.
20) Make sure the CSS on this page validates, with no errors, according to the W3C's online CSS Validator at: http://jigsaw.w3.org/css-validator/validator-uri.html. You can easily do this by clicking on your CSS validator button. See the CSS section of How to Use the W3C HTML and CSS Validators for step-by-step directions.
21) If there are any errors, fix them, re-upload the page, and validate them again.
22) Make sure your home page has a working link to all your completed exercises, including this exercise, and that the HTML and CSS on your home page validates with no errors
23) Submit the feedback form. To receive full credit for this exercise you must submit this feedback form before it expires. This exercise is due on 10/17/11 . Allowing for a one-day grace period, the form will expire at the end of the day following the due date, which means the form for this exercise will expire at 12:00 AM on 10/19/11 .