Difference between revisions of "AIM Class5"
esse quam videri
(→Introduction to positioning, float and clear in CSS) |
|||
| Line 12: | Line 12: | ||
Questions about reading from chapters 10 and 11? | Questions about reading from chapters 10 and 11? | ||
| + | Review of the box model | ||
| + | |||
| + | ===Relative Positioning=== | ||
| + | Review of document flow | ||
| + | |||
| + | |||
| + | ===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=== | ===Z-index=== | ||
| + | Overlapping elements (intentional and accidental) | ||
| + | |||
| + | Examples | ||
| + | Example code walkthrough | ||
===Liquid Layouts=== | ===Liquid Layouts=== | ||
Revision as of 20:28, 23 August 2006
Class Goals
- Introduce more advanced CSS concepts
- Have students experiment in class with advanced CSS
Contents
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
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
Three Column Layout
Class Assignment
Homework
Reading
ZEN: Chapter 2 (pages 78-83), Chapter 3 (pages 85-121)
