CSS Assignment

For this assignment, you will create a page layout using CSS. This layout must have

  1. a containing block for the entire page that is centered on the screen;
  2. a background image that appears in margins of the containing block;
  3. a banner image across the top of the page;
  4. a horizontal menu of text links running under the banner;
  5. a 3-colum layout with
    1. a narrow, fixed-width column on the left;
    2. a variable-width middle column; and
    3. a narrow, fixed-width column on the right.
  6. a footer at the bottom of the page.

Your page should appear at:

http:www.hu.mtu.edu/~yourusername/css

The CSS Page Content

The header

The header image should convey the title of the page. The design and appearance of this banner is up to you.

Lorem Ipsum CSS Page

The link bar

These links should appear as a series of boxes horizontally across the page. They should highlight when the cursor is over them, and they should change color if they have been visited.

The left column

The top-level items in this ordered list should be enumerated by roman numerals (I, II, III, etc.), and the second-level items should be enumerated with lowercase letters (a, b, c, etc.).

Middle column

This following is what should appear in the content area of the page. The picture should be scaled to a size appropriate for the layout. Clicking on the image should link to a full-sized version of of the picture. The photo should appear off to the right, close to the paragraph it is adjacent to here, and the text should wrap around it. The photo's caption should also appear in an area beneath it. The diagram should appear just like the photo, only it should appear off to the left.

Text rem ipsum dolor sit amet, consectetuer dipiscing elit. Praesent lorem justo, consequat vel, eleifend quis, adipiscing at, risus. Cras aliquam, magna et faucibus aliquet, tellus velit egestas metus, a consectetuer arcu turpis semper dolor. Sed risus enim, gravida ut, vulputate at, porta a, mi. Proin tincidunt, purus vestibulum nonummy scelerisque, sem libero aliquet dolor, eu adipiscing purus nisl vel purus. Etiam interdum egestas dolor. Nunc malesuada orci sed enim. Duis purus elit, blandit id, euismod id, porta convallis, lorem. Sed volutpat nunc vitae mauris. Vestibulum venenatis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam vel nibh eu eros ultricies auctor. Proin id neque non ipsum viverra condimentum. Pellentesque lorem metus, ultricies vitae, facilisis in, aliquam vitae, mi.

Etiam interdum egestas dolor. Nunc malesuada orci sed enim. Duis purus elit, blandit id, euismod id, porta convallis, lorem. Sed volutpat nunc vitae mauris. Vestibulum venenatis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam vel nibh eu eros ultricies auctor. Proin id neque non ipsum viverra condimentum. Pellentesque lorem metus, ultricies vitae, facilisis in, aliquam vitae, mi.

A picture of Midway Atoll, taken several months before the battle.

[Caption for photo]: A picture of Midway Atoll, taken several months before the battle.

Duis purus elit, blandit id, euismod id, porta convallis, lorem. Sed volutpat nunc vitae mauris. Vestibulum venenatis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam vel nibh eu eros ultricies auctor. Proin id neque non ipsum viverra condimentum. Pellentesque lorem metus, ultricies vitae, facilisis in, aliquam vitae, mi.

Nullam vel nibh eu eros ultricies auctor. Proin id neque non ipsum viverra condimentum. Pellentesque lorem metus, ultricies vitae, facilisis in, aliquam vitae, mi. Duis purus elit, blandit id, euismod id, porta convallis, lorem. Sed volutpat nunc vitae mauris. Vestibulum venenatis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Cras aliquam, magna et faucibus aliquet, tellus velit egestas metus, a consectetuer arcu turpis semper dolor. Sed risus enim, gravida ut, vulputate at, porta a, mi. Proin tincidunt, purus vestibulum nonummy scelerisque, sem libero aliquet dolor, eu adipiscing purus nisl vel purus. Etiam interdum egestas dolor. Nunc malesuada orci sed enim. Duis purus elit, blandit id, euismod id, porta convallis, lorem. Sed volutpat nunc vitae mauris.

Proin tincidunt, purus vestibulum nonummy scelerisque, sem libero aliquet dolor, eu adipiscing purus nisl vel purus. Etiam interdum egestas dolor. Nunc malesuada orci sed enim. Duis purus elit, blandit id, euismod id, porta convallis, lorem. Sed volutpat nunc vitae mauris. Pellentesque lorem metus, ultricies vitae, facilisis in, aliquam vitae, mi. Duis purus elit, blandit id, euismod id, porta convallis, lorem. Sed volutpat nunc vitae mauris.

Pellentesque lorem metus.

[Caption for diagram]: Pellentesque lorem metus.

Pellentesque lorem metus, ultricies vitae, facilisis in, aliquam vitae, mi. Duis purus elit, blandit id, euismod id, porta convallis, lorem. Sed volutpat nunc vitae mauris. Cras aliquam, magna et faucibus aliquet, tellus velit egestas metus, a consectetuer arcu turpis semper dolor. Sed risus enim, gravida ut, vulputate at, porta a, mi. Proin tincidunt, purus vestibulum nonummy scelerisque, sem libero aliquet dolor, eu adipiscing purus nisl vel purus. Etiam interdum egestas dolor.

Duis purus elit, blandit id, euismod id, porta convallis, lorem. Sed volutpat nunc vitae mauris. Cras aliquam, magna et faucibus aliquet, tellus velit egestas metus, a consectetuer arcu turpis semper dolor. Sed risus enim, gravida ut, vulputate at, porta a, mi. Proin tincidunt, purus vestibulum nonummy scelerisque, sem libero aliquet dolor, eu adipiscing purus nisl vel purus. Etiam interdum egestas dolor.

The right column

The right column should include a background color or decorative pattern that repeats all the way down to the footer.

The footer

The footer should include the following:

© 2007 by Lorem Ipsum


Creative Commons License
This assignment description and associated
images are licensed by Jim Nugent under a
Creative Commons Attribution-Noncommercial-Share Alike 3.0 License.