Exercise 8
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.
1) Create a new Web page for exercise 8.
2) This page must contain the XHTML 1.0 Strict DocType, as follows:
<!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 8".
5) This page's <title> must indicate that this is your
exercise 8 page, so it should say something like "John Sky's DM160B
Exercise 8".
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).
7) In one 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 as side-by-side columns beneath it. Apply an ID of "banner" to this div.
8) In another div, place a navigation menu that links to at least five different pages, and to your home page (if the pages you are linking to are your own pages on webhawks, use relative links). Apply an ID of "menu" to this div.
9) In the other 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.
10) Using CSS positioning techniques, 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. This page must demonstrate the use of the "position" property (and can additionally use the "float" property, if you wish). Note that because Internet Explorer 6 for Windows does not support any aspect of fixed positioning, you should do as almost all Web designers currently do and completely avoid using fixed positioning.
11) Absolutely no tables may be used in this page.
12) Save this file as "exercise8.html".
13) 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.
14) View this page (the page on the server, not the page on your disk) in a browser.
Go to:
http://www.webhawks.org/~yourusername/exercise8.html
to view your exercise 8 page.
15) 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.
16) 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.
17) If there are any errors, fix them, re-upload the page, and validate them again.
18) 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.
19) Submit the feedback form. To receive credit for this exercise you must submit thi feedback form before it expires. This exercise is due on 4/21/08 . 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 04/23/08 .