Class Activities

Layout

  • Basic Layout

    • inline vs block elements
    • display: inline; Element appears on the same line as other content. Ignores width, height.
    • display: block; Element blocks up entire line. Accepts width, height.
    • display: inline-block; Element appears on same line as other content. Accepts width, height.
    • centering elements
  • Creating columns

    • Change display to inline-block, set widths, vertical-align to the top.
.column {
  display: inline-block;
  width: 200px;
  vertical-align: top;
}
  • Browse main/sub/breadcrumb nav examples
  • Practice using css to create top navigation
  • Use class to highlight current section

Homework


Due next class Assignment 5: Navigation and Cards