AIM Class5

---

Class Goals

1. Introduce more advanced CSS concepts
2. Have students experiment in class with advanced CSS

---

Introduction to positioning, float and clear in CSS

Questions about reading from chapters 10 and 11?

Review of the box model

Relative Positioning

Review of document flow

Examples

Example code walkthrough

Absolute Positioning

Absolute vs. relative: the pros and cons

Examples

Example code walkthrough

Fixed Positioning

Definition and example

Pros and cons

Example code walkthrough

Z-index

Overlapping elements (intentional and accidental)

Examples

Example code walkthrough

Liquid Layouts

What does it mean to have a "liquid layout"?

Examples

Three Column Layout

A three column layout without tables, just with CSS.

Examples

Example code walkthrough

Class Assignments

1. Make an XHTML and CSS site that intentional overlaps images in an interesting way
2. Make your own version of a three column layout (using example code)

Homework

Complete and improve upon the in-class assignments and link them to your class portfolio

Assignment 4: Positioning

Quiz 3

Reading

ZEN: Chapter 2 (pages 78-83), Chapter 3 (pages 85-121)