Web Design and Implementation (4002-409)


16 December 2003

Today's Topic: CSS Positioning

The table-based approach to layout that you learned in 320/741 (or on your own) was cutting edge back when David Siegel pioneered it back in 1997. But browsers have come a long way since then, and markup has evolved to match that.

Using tables for layout has two major problems. The first is that it ties together content and presentation, which are two components that are best left separate. The second is that it results in bloated, slow-loading code.

We’ll discuss the importance of separating content and presentation, as well as the specifics of the CSS box model and cross-browser challenges for CSS-based positioning.

Project Group Assignments

Group 1: Circle
Nicholas Hawkins
Josephine Leow
Kimberly Mitchell
Olga Olin
Qing Quan
Jennifer Rohrig

Group 2: Triangle
Michael Ashman
Sarah Begonis
Jay Bibby
Christine Chriscaden
Maria Morris
Amy Moyer

Group 3: Oval
Brendyn Alexander
Philip Charles
Michael Delaney
Frederic Lindenhovius
Shawn Snyder
Brian Tepfenhart

Group 4: Rectangle
Shad Ali
Jordan Fripp
Erhardt Graeff
Sean Hannan
Ryan Munding

In-Class Exercise: CSS Positioning

Using the commandments example I provided in class, create your own page with CSS positioning and formatting. You can change as much or as little of the original as you’d like, but make sure that you’ve got a good sense of how the positioning properties work.

When you’re done, upload the file to your rit.edu web space on Grace, and add a weblog entry that points to it and describes what you changed and anything important you’d like to remember about how you created the page. If you don’t already have a category for in-class exercises, make sure you add one to your weblog, and assign it to this entry.

ITS Form for Increasing Disk Quota

If you need to increase the amount of disk space allotted to you on Grace (the default is 20MB), you can fill out this form (it’s a PDF file; print it out and fill it out in paper form), and bring it to me for a signature. I’ll pass it on to the IT office for approval.