Week #3

1. post a link to your homework on the comments section of this blog post!


2. An overview of Visual Formatting Model--- THINK INSIDE THE BOX!
   
   
   
   1. Box
      Model: The box model defines how elements are displayed. Every
      CSS element forms a "box" composed of these components:
      
      
      
      • Content - The actual content of the element such as text or
        an image. When using the width property, you are defining the
        width of the content.
      
      
      • Padding - Define the space around the content using the padding-top,
        padding-right, padding-bottom, padding-left properties.
      
      
      • Border - Define a stroke around the content and padding using
        the border-top, border-right, border-bottom, border-left properties.
      
      
      • Margin - Define the space around the combined content, padding
        and border using the margin-top, margin-right, margin-bottom,
        margin-left properties.
      
      
      
      
   
   
   
   2. IE/Win
      Box Model Quirks
      
      
      
      1. Diagram:
         Comparison between W3C and IE/Win box models.
      
      
      
      
   
   
   3. Margin
      Collapsing: When two or more vertical margins meet they will collapse
      to form a single margin with the height of the larger of the two margins.
      The vertical margins of nested elements will also collapse if they
      are not separated by padding or borders.
   
   
   4. Boxes: Block vs. Inline vs. Anonymous
      
      
      
      1. Block elements are elements such as <div>, <p>,
         or headers <h1>…<h6>. When their content is
         displayed the next element within the document structure will
         be positioned below it, not next to it. The vertical distance
         between boxes is calculated by the boxes vertical margins.
      
      
      2. more on the box: Inline elements are elements such as <a>. <strong>,
         <em> or <span>. Their content is displayed horizontally,
         within lines. Horizontal spacing between inline elements can be
         adjusted using padding, borders and margins. Vertical spacing
         has no affect on inline elements.
      
      
      3. Inline
         Elements and Padding
      
      
      4. Anonymous
         Boxes: A block or inline box that has not been explicitly
         defined as an element. You cannot style anonymous block or line
         boxes since there is nothing to connect to. (see link example)
      
      
      
      
   
   
   
   


3. CSS Positioning
   
   
   
   1. Static or Normal
      Flow: Normal flow is the default scheme used for positioning.
      Block boxes flow vertically starting at the top of their containing
      block with each placed directly below the preceding one. Inline boxes
      flow horizontally from left to right.
   
   
   2. Relative:
      Relatively positioned elements are positioned within the normal flow
      and then moved using x and y coordinates. Elements that come after
      a relatively-positioned element behave as if the relatively-positioned
      element was still in its ‘normal flow’ position - leaving
      a gap for it.
   
   
   3. Absolute:
      An absolute positioned box is moved out of the normal flow entirely
      using x and y coordinates. Absolutely positioned boxes can overlap
      other elements on the page. Control the stacking order with the Z-index.
      The higher the Z-index, the higher the box is in the stack. Elements
      that come before or after an absolutely positioned box ignore it completely.
      an example of absolutely positioned DIVs
      
      
      1. Fixed:
         Fixed positioned elements are moved out of the normal flow entirely
         - relative to the viewport. This means that they don't move if
         the page is scrolled. Win/IE5 and Win/IE6 do not support this
         positioning method at all.
      
      
      
      
   
   
   4. Floating
      : A floated box is taken out of the flow and shifted to the left or
      right until it touches the outer edge of its containing box or another
      floating box. Block-boxes in the normal flow behave as if the floated
      box wasn't there. Paragraphs of text (line boxes) next to a floated
      box can flow down the right side of a left-floated box and down the
      left side of a right-floated box. More good info on floats
      
      
      
      1. Clearing:
         Elements following a floated element will wrap around the floated
         element. To stop this from happening the "clear" property
         can be applied to "clear" a vertical space for all elements
         following the float.
      
      
      
      
   
   
   
   


4. Layout
   
   
   
   1. Horizontally Centered
      
      
      
      1. Example
      
      
      
      
      
   
   
   2. Liquid: Dimensions are set using percentages, allowing layouts to
      scale to fit the browser window. On some monitors layouts can feel
      stretched and line heights can get too long or too short.
      
      
      
      1. Three-Column
         using floats
      
      
      2. Two-Column using
         absolute-P
      
      
      
      
   
   
   3. Elastic: Dimensions are determined by the width of elements using
      ems. This is relative to the font size, not the browser width.
      
      
      
      1. good article about the debate
      
      
      2. Elastic example
      
      
      3. The px to em Calculator
      
      
      
      
   
   
   4. Elastic-liquid hybrid: Widths are set in ems and maximum widths
      are set as percentages.
      
      
      
      1. Hybrid example
         
      
      
      
      
   
   
   5. Other Sample
      CSS Layouts
   
   
   
   


5. PHASE ONE: Site Definition
   
   
   
   1. Outline of the development process; what is going to happen at each
      step; everyone's jobs (both the clients' and yours); and a timeline.
      
      
   
   
   2. A few useful Articles:
      
      
      
      • The
        Development Process
      
      
      • Web
        Development Life Cycle
      
      
      • Web
        Development Process
      
      
      
      
   
   
   
   




6. lets discuss the positioning Exercises

Homework

CLIENT WORK

1. Get Your Clients to fill out the Client survey- its due in class next week.
   


2. do all 4 of the DARPA CSS POSITIONING EXERCISES
   
   
3. Choose one, and make your Bill of Rights page liquid, elastic, or elastic liquid hybrid.

TECHNICAL PREPARATION

• Read Chapter 2 from the book CSS Mastery