COM271, Week 6

CSS for positioning

Syllabus | Table of Pages | Assignments | References and Useful Links
←Review, Week 5 | Review, Week 7→

Answer these questions by reviewing the notes for week 6 and by creating a page that does what is called for; when it works, copy your html and css codes, labeling each, and present a text version of these under your positioned divs. Make a print style sheet for this page; hand in the printed version of your page.

For both problems below, to render the text version, copy the html for the structure. Make a header, <h4>HTML:</h4>, and under it paste a copy of your html into a paragraph. You will have to convert the brackets into character codes and add line breaks to create a readable version of the html.

Also make a header for your CSS, <h4>CSS</h4>, and paste a copy of only the rules for your two divs into a paragraph, again adding line breaks as needed.

Post this page to your class website by Oct. 16, with a link from your site navigation.

  1. Write the html structure and css rules to show
    • a 100px-wide div with no border or padding that is contained within a div
    • be rendered exactly half outside of the right border of its containing div
  2. Change the css rules and redraw the figures to show
    • the addition of 15px of padding and a 3px border to the "contained" div
    • adjust its positioning to get it to still be exactly half outside of the right border of its containing div.

Note that the final page will have TWO images. Underneath the first image will be HTML: and CSS: code sections. Underneath the second image will be CSS: code modifications.

These questions are worth 5 points each, to be added to your total for weekly reviews. At the end of the course, total review points will be added, divided by 100, and that fraction will be applied to 20% of your grade (maximum points from reviews is 20% of grade). See Assignments and Grading.