lesson content

• understanding the CSS box model
• working with positioning
• setting up site navigation
• basic list styling

lesson notes

• understand your layout as a collection of boxes - boxes within boxes
• use width in combination with margin and padding to set up spacing between the different HTML elements
• DIVs should be use to divide content into meaningful chunks, not used as ‘quick fixes’ for layout reasons
• understand all standard HTML tags as boxes in themselves
• class and IDs can be assigned to a DIV tag as well as most other HTML tags
• lists should be used where suitable to display content
• site menus are almost always best set up using lists
• for horizontal menus - use: “display: inline;” in your CSS (applied to the list item)

download PDF

• ↓ CSS box model
• ↓ tiled backgrounds
• ↓ paper textures

net talk

• alistapart.com From Table Hacks to CSS Layout: A Web Designer’s Journey (by Jeffrey Zeldman)
• 456bereastreet.comInternet Explorer and the CSS box model
• brainjar.comCSS positioning

net references

• w3.org Box Model
• tantek.com box model hack
• thenoddleincident.comlittle boxes