CS-081 Assignment 7

For this assignment you are to start working with CSS layout features. In particular, you are to format your list of navigation links so it looks and operates somewhat like the one designed in class.

In Assignment 6, you were told to include a list of “navigation links” in your blog’s page. According to the principle that you can make your web page look any way you want using CSS, it really doesn’t matter where in your document that navigation list appears. But for this assignment, it has to be right after the h1 element. If it is not there already, move it there before proceeding.

If you want to change the color scheme for your page, do so now. But you must keep a gradient background image for the h1 element. You can alter the image, but there has to be one there, and it has to have a gradient that goes from a color to transparent.

Create a new stylesheet for this assignment. Despite the problem with this naming scheme mentioned in class, call this one layout.css, and put a link to it in the head of your blog’s index page. All of the requirements below are to be done using rules in this stylesheet.

Here are the requirements for the assignment:

• Set a background image on the page’s body. Make the image wider than the widest screen people will use, and give it a colored background covering the leftmost 25% of the image, with the right 75% of the image transparent. You may use somewhat different percentages if you want to experiment, but do not use 50%. Set this image’s horizontal position using the same percentage value as the width of the colored part of the image. Tile the image vertically. You should get the solid colored bar on the left side of your web page, which should shrink and grow in width as you resize the width of the browser window. Proceed only when you have gotten this part of the assignment working. Be sure your code is still valid XHTML and CSS, and that it works across browsers.
• Set the left margin of the next part of your web page (presumably a list of blog entries) to match the width of the colored bar. The navigation list should now be inside the colored “faux column” and all the rest of your content should be on the right side of the page.
• Set the width of the navigation links list to match the width of the faux column.
• Convert the a element for each item in the list to display:block so the anchor completely fills it’s li element. Adjust borders, paddings, margins, and background colors of the list, the list items, and the anchors to get an appearance you like. Apply typographic changes to anchors to make them look “good.” Remove the underlines using the text-decoration property. Test and validate your code.
• Use the :hover pseudo-class for the anchors to give them a different appearance when the user hovers over them.

Test, Verify, and Validate

Carefully test, verify and validate your assignment before submitting it, as described in previous assignments.

Save and Submit

When you have tested, verified, and validated your code, be sure log out so your code will be saved to the server, and send me an email message saying your assignment is ready. I will copy it from the server to the Unix computer in my office (babbage), and will check it out from there.

My email address is:

Christopher.VickeryATqc.cuny.edu

The Subject Line of your email must say CS-081 Assignment 7, exactly like that, in order to avoid my spam filters.

Always include CS-081 in the subject line of your email messages to me, even if you are not submitting an assignment, because of the spam filters.

Be sure to sign your email so I know who sent it!