Fun with CSS

(originally posted 3/4/09 on Amandarama! LIBR240 blog)

Another part of the assignment mentioned in the last post was creating CSS stylesheets. This was in two parts: one part was to create a mini-website with 3 pages and use CSS to create a consistent layout for each page; the other part was to create a css stylesheet to modify the sample html file at www.csszengarden.com. Both of these took a lot of time!

I tried to keep it simple for the mini-webpage. I had three html files: a home index page that I created from scratch, an “about” page that I modified from a previous assignment, and a subtopic page that included a table, for which I was also able to use a modified version of an earlier assignment. I created a simple layout with a masthead, two columns (one of which was a navigation sidebar) and a footer. The footer is the same on every page and gives a copyright-type statement at the bottom of the page. For the headers I used a background image and kept this and the font styles the same, but I used the h1 element to have different text on the masthead of each page. The content area includes two columns: the sidebar and the main content. The sidebar is the same for each page. The main content, of course, differs. Basically, I just had to create divisions and give them the same ids for the same sections of the layout on each page.

The biggest challenge came when I wanted to make sure the footer was at the bottom of the index page, which had less content than the other two pages. I was able to find a trick to accomplish this online: add an extra, empty div element within the content div, and set the content’s height to 100%. This worked, and I was pleased with the result. I ended up adding an image to the page so this workaround may not be necessary, but it is good to know. The finished product is up on our class server. (note 10/5/09 – site taken down when class ended in Spring 09).

The Zen Garden file was much trickier. Basically, the idea behind this is to show the capabilities of css by having a bunch of different designers create a stylesheet for the same html file. I can make whatever changes I want to the sample css file or start from scratch, as long as I don’t edit the html file. I spent some time mapping out the different levels of divisions provided in the html file, and then sketched out some layout ideas. I decided to edit the sample css file instead of starting completely from scratch, but this did add some time because I kept having to hide sections of the code to get a sense of what my styles were doing to the page. I liked the margins on the sample file so I kept those for the most part, but I put my own backgrounds, fonts, and layout of divisions into the file. I decided to go with an old book theme, so I tried to pick fonts that fit with this. I found a creative-commons licensed photo of an old book and cropped it down to a banner-sized section. This is what I used for the background for the header. I sampled colors from this photo to use for the background, text color for headings, and links.

The hardest part of creating this css file was trying to make it display correctly on Internet Explorer. I was using IE7 and was still having trouble with the margins. It turned out that when I resized the browser window to make it larger (working on a very wide screen), my nice maroon border disappeared and was replaced with a wide swath of white. This did not happen in Firefox on the same (wide) monitor, so it’s definitely an IE issue. The workarounds for the standared IE bugs did not fix the problem, and I did not see anything about this issue online, so I either need to decide having an IE-compatible webpage doesn’t matter that much, or change my layout completely in such a way that the margins will not be an issue. I didn’t want to change my styles, so although IE is a very common browser, I’m just going to hope most people do not have a fancy wide monitor. The css validates, so it is frustrating that the most common browser is not standards-compliant.

Anyway, you can find my zengarden page on the class server. (note 10/5/09 – page has been removed from the class server since class ended)

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s