AIM Class5

esse quam videri
Jump to: navigation, search

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


Example code walkthrough

Absolute Positioning

Absolute vs. relative: the pros and cons


Example code walkthrough

Fixed Positioning

Definition and example

Pros and cons

Example code walkthrough


Overlapping elements (intentional and accidental)


Example code walkthrough

Liquid Layouts

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


Three Column Layout

A three column layout without tables, just with CSS.


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)


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

Assignment 4: Positioning

Quiz 3


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