Welcome

Full access to this site requires a valid registration. You can request one here.

Positioning Elements

Schedule: 
02/15/2016 to 02/21/2016

 

Update Notice: I've moved the relevant content for this lesson from the DVD into these pages. I've also updated the directions, corrected various errors and removed as much non-standard terminology as I could find. Updating this lesson took many hours, and no doubt I've missed a few things. I've turned on comments for logged in users. Please feel free to post requests for clarification, suggestions, corrections, or other comments.

 

Overview

In this lesson you will study the properties associated with the box model including:

  • float
  • clear
  • padding
  • border
  • margin
  • outline

The ability to float elements is an essential skill. For example, by creating an image gallery you will learn how to make a grid of images without using table cells. This technique is commonly used for thumbnail images that link to larger versions of the same image.

You will also study the four states of the position property. These states will later be used to create drop down menus in the Navigation Lesson.

Textbook

Read Stylin' CSS, Chapter 3: Positioning Elements (pages 62 - 92). This section explains the box model and shows how to calculate the size of a box. The concept of float and clear is discussed. Finally the position property is explained. This property will come in very handy during the navigation lessons when we learn how to make pop down menus.

Note: The Aslett clearing method discussed on page 119 will be covered in the Layout Lessons.

DVD

The following videos cover topics in this lesson.

  • Box Model: CS 50B DVD > /movies/position1/box-model.mov
  • Border Sampler: CS 50B DVD > /movies/position1/border-sampler.mov
  • How Big is the Box: CS 50B DVD > /movies/position1/how-big-box.mov
  • Shorthand Box Properties: CS 50B DVD > /movies/position1/shorthand-position-good.mov
  • Float: Image: CS 50B DVD > /movies/position1/float-img.mov
  • Float: Clear Image: CS 50B DVD > /movies/position1/float-clear-img.mov
  • Position Property: CS 50B DVD > /movies/position1/position-values.mov