CSc 337 - Web Programming > Assignments > Assignment 3

Due: 27 Jan 2012, 11:59pm

Using this HTML page provided for you, style the page in two distinct manners.

You will be writing two CSS files, named floatstyles.css and absolutestyles.css with the purpose of modifying the page we provide for you in two different ways. You will be formatting 4 different groups of nerdy facts. Note: you cannot make any modifications to the HTML page provided. All changes must be made in the CSS files.

The requirements/steps for this homework is as follows:

1) Each fact has a class named "fact1" through "fact9". These classes should be colored as follows:

Paragraph backgrounds

1. fact1: #DC143C
2. fact2: #4B0082
3. fact3: #1E90FF
4. fact4: #B0E0E6
5. fact5: #00C957
6. fact6: #FFD700
7. fact7: #8B4513
8. fact8: #FF9912
9. fact9: #FFF

Text colors

1. fact1: white
2. fact2: white
3. fact3: black
4. fact4: black
5. fact5: black
6. fact6: black
7. fact7: white
8. fact8: black
9. fact9: black

2) There is an additional class called "hideme". Use CSS to cut down on facts by hiding these elements. Feel free to enjoy some colorful facts prior to this step!

IMPORTANT: From here you will need two different CSS styles. Use what you have up to this point in both files.

3) There should be a layout using floats in the floatstyles.css file. This file, as stated, will contain all the color and hidden styles that you made from steps 1 and 2. It should have the first 3 fact categories (StarWars, Battlestar Galactica, and StarTrek respectively) floating left and then the final category UNDER these and stretched across the screen. (See screenshot)

Part 3: how your page should look with floatstyles.css

4) The other layout (absolutestyles.css) will consist of three absolutely positioned categories and one fixed category. This file, as stated, will contain all the color and hidden styles that you made from steps 1 and 2. The absolute categories should be positioned, within a reasonable margin, based on the screenshots. Please note, the screenshot that is captioned scrolled implies that we have scrolled down the page. Do not initially style your page like this - this screenshot is meant to demonstrate how your page should look if you scroll down (demonstrating the fixed category).

Part 4: how your page should look with absolutestyles.css

The widths and heights should be similar to those in the screenshots. We are looking for a ballpark size, again, within reason. This goes for positioning as well. We reserve the right to deduct points for woefully inaccurate sizes, positioning, and orderings. We expect your final product to look very similar, if not the same, as the screenshots provided.

Your css file must be valid according to W3C standards. Validation will be done through the following site: http://jigsaw.w3.org/css-validator/. Be sure to, under "More Options", set the profile to "CSS level 3"---any CSS3 features that have been officially recommended are allowed.

• Use the opacityrgba value for the background attribute in part 4.
• The sitepoint CSS reference has details about and examples using each CSS property.

As detailed on the homework submission page, this homework must be on the class web server in a folder titled homework3 for it to be graded.