select a page...

• Home
• Comparison of CSS & Tables
• Doctypes & Divs
• Classes and Ids
• Float & Clear
• Instructions for a Div Layout

resources...

• W3C Schools
• Zvon: CSS Properties List
• Stop Design Article
• Noodle Incident
• Why Tables for Layout is Stupid: Problems defined, solutions offered

CSS Layouts: Replacing the Table…

Techrangers^SM Present Tech Time...

Welcome to CDWS Techrangers^SM present Tech Time. This specific session will handle an advanced understanding of CSS and its implementation process by taking a layout and making it into a tableless design.

Getting Started

• Please sign in.
• Meet the Techrangers.

Part I: Replace the table, why?

• Comparison of Advantages and Disadvantages
• CSS Zen Garden

Part II: Basic Foundation

• Use of the Proper Doctypes
• What is a Div?
• The difference between a Class and ID
• Learning how to Float…
• The Importance of Clear: Both

Part III: Dividing the Layout for a Div Design…

• Instruction
• Sample Files
  • Plain Text
  • Header Div
  • Content Div
  • Footer Div
  • Overall Layout

Part IV: Coding with CSS and XHTML

• Padding and Margin Example
• Instructions for Part 2
• Final Site

Techrangers ^SM | Last Updated: October 22, 2004