Alison Davis's Lizard Web Site
Description
The complete page can be viewed at http://bio.research.ucsc.edu/~barrylab/Alison/
I made this web site at the request of a friend. She emailed me a PowerPoint slideshow of a web page she had designed. She then asked me to create it so that it looked pretty much like the slides she had sent.
I looked at the design and realized that they only way I could do the things that she wanted is if I broke away from a table-based layout. Thus this web site is one of my earlier table free CSS designs.
A lot of work was done with absolute and relative positioning. The main trick to the page was learning that defining a container with a relative position, redefined the absolute anchor point of all the elements inside of that container. This allowed me to center the layout on the page no matter what the window size was. Looking back at it, the code is a little rough and I would like to clean it up a bit. However, the principles are sound and it was a good early break into CSS layout and positioning.
I use this page as a practice assignment for my CHum 284 students to help them better understand the principles behind absolute and relative position and CSS design.