Layout with CSS

1
Layout with CSS

• English 313
• Lee Honeycutt

2
CSS Replaces HTML Tables

• Instead of using table cells, you divide up your
  page into logical sections using ltdivgt tags and
  CSS IDs.
• Then assign exact pixel positions for these
  sections in your external CSS stylesheet.

3
A Problematic Solution

• CSS will eventually replace HTML tables for
  layout, allowing more precise positioning of
  various elements on the page.
• Separates style from content.
• Problem? Not all browsers adequately support CSS
  2 standards, especially Internet Explorer.
• So learn and apply it now, but be aware of
  current limitations.

4
Structuring Pages

• Use ltdivgt tags to divide your page into logical
  sections that correspond to sections of HTML
  résumé.
• Place ltdivgt tags in order that makes sense or
  gracefully degrades when viewed without CSS.
• Use existing HTML elements (ltpgt, lth1gt, lth2gt) to
  reflect structural hierarchy.
• Use comments to identify parts of your page, i.e.
  lt!-- words between tags will not show in browser
  --gt

5
CSS Refresher - Selectors

• Tag selectors - modify existing HTML tags, such
  as lth1gt and ltpgt
• Class selectors - name attribute used to create
  specific instances of existing HTML tags.
• ID selectors - unique (one and only one)
  attribute used to create a unique instance of an
  existing HTML tag. Carry higher weight in the
  cascade.

6
Structuring Example

• lth2 id"objective"gtObjectivelt/h2gt
• ltp id"objContent"gt
• To establish a business position utilizing IT
  skills with special interest in creative
  design.lt/pgt
  
• lth2 id"education"gtEducationlt/h2gt
• ltdiv id"eduContent"gt ltspan class"date"gtMay
  2006lt/spangt
• ltspan class"title"gtBS in Management Information
  Systemslt/spangtltbr /gtIowa State University, Ames,
  IAltbr /gt GPA of 3.99999 on a 4.0 scalelt/divgt
  

7
The Cascade
8
CSS Style

• /IDs for aligning Object header and content.
  Content set two pixels lower vertically to align
  baselines of header and first line of content./
• objective position absolute top 179px
  visibility visible
• objContent position absolute top 181px
  left 150px width 400px height auto
  visibility visible
• /IDs for aligning Education header and content/
• education position absolute top 230px
  height auto visibility visible
• eduContent position absolute top 232px
  left 150px width auto visibility visible

9
Shown in Browser
10
Box Model

• CSS treats individual ltdivgt and ltspangt sections
  as boxes that are made up of
• Margin - invisible space around the border.
• Border - outside edge around content padding
• Padding - space surrounding content
• Content area - area inside container
• First set the position of your boxes, then
  control their appearance.

11
Box Model
12
Setting Position

• Four ways in which you can control position
• Static - elements are left in the HTML flow and
  appear in the order they appear in the code.
• Relative - removes box from flow and specifies
  exact coordinates relative to its original
  position in the flow.
• Absolute - removes box from flow and specifies
  exact coordinates relative to its parent element.
• Fixed - removes box from flow and specifies exact
  coordinates relative to browser.
• Z-index - specifies the stacking order of
  overlapping boxes.

13
Parents and Children

• ltdiv id"eduContent"gt ltspan class"date"gtMa
  y 2006lt/spangt
• ltspan class"title"gtBS in Management
  Information Systemslt/spangtltbr /gt Iowa State
  University, Ames, IAltbr /gt GPA of 3.99999 on a
  4.0 scalelt/divgt

14
Other CSS layout properties

• Color and background image
• Cursor style
• Border style, width, and color
• Height and width of element, plus overflow
• Float and vertical alignment
• Explore these in CSS Dreamweaver Examples on
  weekly lesson page