CS-081 Assignment 7

For this assignment you are to demonstrate your mastery of CSS table-based layout and the elements of CSS typography. To demonstrate your mastery of CSS table-based layout, you will turn the navigation list into a horizontal row of “tabs” with virtually no change to the XHTML code for the blog index page. For the typography part, you are invited to experiment with the various CSS text properties discussed in class (and in various parts of the textbook) to create a “pleasing” appearance for the blog index page.

1. Move the navigation list into position and style it as a table.

   You do have to make one change to the XHTML for your blog index page: move the navList ul from the end of the document to a position between the h1 and the blogEntries ol. You could accomplish the same thing by absolutely positioning the blogEntries ol below the navigation list, but then you would also have to position the blog entries list below that. Just moving the XHTML element seems easier at this point.

   Remove from your stylesheet all css rules that appply to the navigation list, its list items, and the anchors within the list items. You need a clean slate for this project.

   Create a background image of a rectangle with rounded corners on the top and with a transparent background. The dimensions are somewhat arbitrary, but the rectangle has to be large enough to hold the longest text in your anchors. This size, in turn, depends not only on the actual characters in the text of your anchors, but also on their font-size, padding, margins, etc. That is, you may find you want to change this image as you progress through the assignment.

   Style the navigation list, its list items, and their anchors to give an effect like that shown in the following screenshot:

   

   As demonstrated in class, the tabs should totally change appearance when the mouse hovers over them:

   

   To get this layout to work, you will need to have each list item in the navigation list act like a table cell: display:table-cell;. As discussed in class, table cells have to be inside table rows, and table rows have to be inside tables. But the CSS specification explicitly says that a sequence of adjacent table cells (such as the list items in the navigation list) will automatically be wrapped in an anonymous table row element so that they all appear in a horizontal row. Furthermore, this anonymous table row, if it is not already inside a table, will automatically be wrapped inside an anonymous table element. So all it takes to get the list items to get displayed as table cells is simply to add one CSS rule to them that declares them to be displayed like table cells.

   But of course nothing is really that simple. You need to use margins and padding, and perhaps some judicious settings of heights and widths of the navigation list, the list items, and the anchors to get the effect we are looking for. In particular, note that the images with the rounded corners on top for the “tabs” should be used as a background for the list items. Think about the stacking order of nested elements. The list items are inside an ordered list, so they appear in front of any background you set for the list. Likewise, the anchors are inside list items, so they appear in front of (obscure parts of) the list items. An important fact that makes this assignment relatively easy to do is that the background of the anchors will be transparent unless you set it to a specific value. So the screen shot shows the yellow tabs showing through the background of the anchors when the mouse is not hovering over them (no background specified for the anchors), but the background is set to blue for the a:hover pseudo-class, which covers the background images of the list items and blends with the background color of the unordered list.

   Table cells do not have margins, but they do have padding, text-alignment, and vertical-alignment for moving the content around inside the inside of the cells. Also, if you have an element that is displayed as a table with the separated borders model (border-collapse:separate, the default setting), you can use the border-spacing property to create pretty much the same thing as margins between the cells. You could set the unordered list a table element to try out this option; but you can do the assignment without using it.

2. Develop the typography of the page.

   Use a mixture of typographic properties to format the text in various parts of the blog page in a “pleasing” way.

   For this assignment, you must use all of the following typographic properties in your blog page: font family, font size, font weight, font style, font variant, line height, letter spacing, first line, and first character. But please (please!) realize that moderation is the key to success. A hodge-podge of different text effects all over the page is a hallmark of bad design. Rather, I suggest you limit yourself to no more than two different font families and no more than three font sizes on the entire page. The font style and font variant properties work best for headings (your blog should include two or three heading levels), or perhaps the dateline elements, which are paragraphs that act in many ways like subheadings in our blog design. Line height, first line, and first character would make sense for the paragraphs in the blog entries. Character spacing can be used effectively in both headings and paragraphs.

3. Be sure your page works in all browsers, has all “green circles” from Firefox, and passes both W3C validator tests with no errors or warnings. When you use IE-8, be sure “compatability view” is not turned on.

I will check your assignment by copying it from Maple to Babbage; to submit the assignment, send me an email with your name in the message body saying it is ready for me to look at. Send your email to me by midnight on the due date (November 25). My email address is:

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