{June 28, 2011

W 

% Jacqui completed

W 

% Divya completed

W 

% Marco completed

W 

% Robert completed

Outline

  1. The natural flow of a page
  2. Historically through tables
  3. Floats and Clear
  4. Grids
  5. Absolute, Relative and Fixed Positioning
  6. Display (block, inline, inline-block, none)

Examples

  1. Exercise solution with Float
  2. Exercise solution with absolute positioning
  3. Example of display
  4. Recap of html/css basics
  5. Updated recap of html/css basics and boxing

Exercise

Choose one of the Scandinavian countries (link to other countries at the bottom) and construct its flag in two ways: using absolute positioning and using floated divs. Apply the links to both from one post assigned to exercise 4. The size of the flag is up to you.

f
4 Lessons    { June 28, 2011    J   b 0   
W 

% Sehee completed

W 

% Amy completed

W 

% fernando completed

W 

% Aary completed

W 

% Aary completed

W 

% Jessie completed

W 

% zack completed

W 

% Peter completed

W 

% Divya completed

W 

% Jacqui completed

W 

% Robert completed

W 

% Elspeth completed

Outline

  1. Everything is in a box whether you know it or not
  2. Turn border to 1px
  3. Border applied to p tag. Inheritance.
  4. div, span
  5. display inline and block
  6. float for wrapping
  7. Widths

Example

  1. The example we coded up in class
  2. Horizontal centering
  3. Vertical centering

Exercise

Using Frank Stella, Josef Albers and Karel Martens as inspiration, create a page of web box art. Keep the principles of classes, inheritance and float in top of mind. Experiment wildly in code (not in your sketchbook), starting a new html file if one breaks or seems at a stopping point. Add a post with the category exercise 3 that links to 1 or 2 finished pieces. We’ll look at aesthetics and your style sheets as a class first thing tomorrow morning.

f
4 Lessons    { June 28, 2011    J   b 0   
W 

% Amy completed

W 

% Stephen : ) completed

W 

% Aary completed

W 

% Elspeth completed

W 

% Robert completed