Christian Montoya

Teaching Web Design, part 3

Week 3 of Intro to Web Design at Cornell was all about CSS positioning. I think the foray into the world of CSS-P is going quite well, judging by the looks on my students' faces.

If you recall from my previous entry in this series, the students submitted an XHTML-only version of their sites last Sunday. For this sunday it is up to them to take those sites and add in the necessary CSS to acheive the looks they want. Over the course of this week we have covered a lot of material with CSS, such as width and heights, the different kinds of positioning, and the behavior of floats. In section yesterday, we focused on an exercise that dealt with absolute & relative positioning as well as z-index.

In the exercise we gave them four divs, each with an image-slice of the Cornell homepage. We gave them a bare CSS file with some absolute positioning and various z-indexes applied that needed fixing. We also provided a background image that gave them a couple boxes to serve as a "guide" for where the slices should go.

After a lengthy explanation of the difference between absolute and relative positioning and the use of z-index, with lots of hand-waving and references to the third dimension, and with the assurance that my students really didn't have any more questions on the matter, I gave them the green light to start working. As they went about attempting the solution on their computers, I worked at it on mine, so they could see some changes I was making and get hints. I gave them the pixel values they needed to place their slices and answered any questions they had. I went slowly so as to give them a chance to try things for themselves, but not too slow because I needed them to get through it within the time we have for section. It was fun (and probably more for me than for them)… changing the z-indexes to positive values to show them the slices that were hidden from the start, recommending relative positioning so as not to lose the document flow, and so on. In the end they were mostly able to follow along, and we had something very close to the solution, save for mysterious gutters between the background guide and the slices.

At this point I showed them the last step:

* { margin:0; padding: 0; }

The universal selector. I explained what it meant and why those gutters were there before it was applied. I also explained that I used the universal selector when I was in the course, and even though I no longer use it (I attack each element individually nowadays), I told them it would be very useful at their level.

One last thing I made sure to explain to my students was that the topics we covered yesterday would probably not solve all the layout possibilities they wanted to accomplish with their own sites. I told them the same thing I've been telling them every week: use your books. I hope they listen.

Another successful day of section? I'll find out after Sunday.

Thank you for reading • Published on September 16th, 2006 • Please take a moment to share this with your friends