Index

  1. What brings us here today...
  2. A new wave of design possibilities
  3. Other benefits
  4. What do you mean, NO TABLES?
  5. When tables are used correctly...
  6. Tables can look good too
  7. Use table headers (<th>)
  8. Table borders and backgrounds
  9. Alternating row colors
  10. Tableless Layout
  11. Benefits:
  12. Sidenote: Favelets
  13. Basic Example
  14. Wired News
  15. Wired News
  16. CSS Zen Garden
  17. Approach #1: Absolute positioning
  18. Absolute positioning on Wired News
  19. Absolute positioning on Wired News
  20. Absolute positioning on Wired News
  21. Absolute positioning on Wired News
  22. Positioning Context
  23. Absolute positioning has:
  24. Approach #2: Floats
  25. Floats on Stopdesign
  26. Floats on Stopdesign
  27. Breaking out of "float mode"
  28. Floated CSS layouts have:
  29. Real-world Example
  30. The perfect candidate
  31. By the way...
  32. Our example
  33. Microsoft.com
  34. Microsoft.com
  35. Microsoft.com
  36. Step #1: Break it down
  37. Step #1: Break it down
  38. Step #1: Break it down
  39. Step #1: Break it down
  40. Step #1: Break it down
  41. Step #1: Break it down
  42. Step #1: Break it down
  43. Step #1: Break it down
  44. Variation on these three
  45. Step #2: Organize the HTML
  46. Step #3: Restructure HTML
  47. Step #4: VALIDATE!
  48. Step #5: Work from the outside, in; top, down
  49. MS header: opposing floats
  50. MS header: opposing floats
  51. MS header: opposing floats
  52. Step #6: Column structure
  53. Step #6: Column structure
  54. Step #6: Column structure
  55. Step #6: Column structure
  56. Faux columns
  57. Faux columns
  58. Faux columns
  59. Faux columns
  60. Step #7: Navigation column
  61. Challenge #8: Components of Main column
  62. Challenge #8: Components of Main column
  63. Challenge #8: Components of Main column
  64. Challenge #8: Components of Main column
  65. Subcolumns
  66. Step #9: Closing off with the Footer
  67. Step #9: Closing off with the Footer
  68. Further work
  69. The NEW Microsoft.com
  70. The NEW Microsoft.com
  71. Advantages
  72. Thank You