The purpose of this project is to demonstrate what you have learned about the effective use of CSS and other web design techniques during the first half of this course. Just as with the CSS Zen Garden project, you will be given an HTML document to format with CSS. You will also submit a final Design Report in which you discuss your goals and technical implementation of the project.

Every class member will have some input in final grading of this project. After the project submission date, the full class will review and vote on their favorite submissions.

Design Report

For this project, I knew I wanted to creating a minimalist design that focused on alignment and color scheme because I knew that would be the type of web design I do most often. I had a rough idea in my head of what I wanted the page to look like, so it was just a matter of finding a picture for the header and creating a color scheme around the header image.

The picture I chose was one I took myself while visiting Portugal two years ago. The picture is of a 150-year old coffee shop called “Pasteis de Belem.” To add depth to the photograph, I gave it a “hard light” overlay in Fireworks, and put it on a black background. This effect gave the photo an edge, and the altered colors in the photo took on a green tint. I then tilted the photo on an angle, and cropped the image to the header height and width. This allowed me to capture the interesting designs on the tile, lettering, and railings.

After I had settled on a header image, I used the eyedropper to choose the green/aqua tones used in the backgrounds of the text. The last color I chose was the warm brown background which is complimentary to the green tones.

While designing the CSS for this project, I realized that a 1 pixel thick white border was needed to set the header image and text apart from the background. I did not want the site to look like a giant table or chart, so I chose not to put a border between the sidebar and the requirements, and relied upon the subtlety of the contrasting colors.

The mot influential aspect of my design was the use of the typographically rich titles in place of the regular text ones. Using these titles made my project look more professional and clean.

The first real challenge I came in contact with was the placement of the block quote. I knew I did not want it in the header image, but I was not sure how to float it to where I wanted it. I ended up using absolute positioning to move the block quote into place in the right hand column. This looked perfect in Firefox, but when I opened the page up in Internet Explorer, I noticed that the block quote was about 25 pixels too high and was overlapping with the header image.

To solve the this problem, I split the difference between the two browsers and changed the y value to something that was too low in Firefox and too high in Internet Explorer, but at least it wasn’t overlapping anything.

The next challenge I faced in this project was that, for some reason, my entire left sidebar was three times as wide in Internet Explorer as it was in Firefox, and as a result, would not float into place, and dropped to the bottom of the page. At first, I thought that perhaps I had made the width of the sidebar too wide and while Firefox had allowed overlapping, Internet Explorer would not. However, after adjusting the margins, padding, and width extensively, nothing could alter Internet Explorer’s perceived width of the sidebar.

I did some research online, and while people seemed to have similar problems, their hacks would not work for my problem. My first breakthrough was when I discovered the *html tag on crowstobrnaby.com. When you use a css tag that is under *html, only Internet Explorer will be able to read it.

After discovering this, I went back and added a *html tag for my block quote. Now, Firefox can read one location for the block quote, and Internet Explorer can read a different location for the block quote, and they can both be perfectly placed.

After this victory, I decided to go ahead and use the *html tag to absolutely position all the elements in my page for Internet Explorer. This was working sufficiently, but the layers were in the wrong order. For example, my requirements text was in the right place but it was being covered up by the sidebar’s inflated right margin. I did some more searching and discovered the z-index tab on www.codeave.com. This tag allows you to choose what order the layers go in. For example, since I knew I wanted the requirements to go “on top” of the sidebar and description, I used the z-index of 1. When I discovered this, I was very pleased, and now I can confidently submit the Firefox and Internet Explorer interpretations of my Mini Zen Project.

This project has proved to be one of the most challenging, enjoyable, and useful projects I have ever done at school. I really appreciated the opportunity to play with the technology, and face the real issues in web design. Now that I have completed this project, I look forward to learning more about CSS on my own.