Resources for class, 2/25

The CSS Box Model:

http://www.w3schools.com/css/css_boxmodel.asp

The position declaration:

http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

Positioning elements with CSS:

http://www.barelyfitz.com/screencast/html-training/css/positioning/

CSS Positioning Tutorial below. Note -- there are a couple glitches in the directions. Step 11 should say "{h3}Sidebar" instead of "{h2}Sidebar." Step 17 is completely erroneous, and will result in a file where the bottom of the content in the sidebar will push down all the content in the "Maincontent" div from the second header. Instead of following the directions on the pdf, do the following:

For the CSS rules for the "maincontent" div, add a "float left" property. In order for the text in the "maincontent" div to have some space between it and the sides of the div, add 20 pixels of padding to the left and right margins. Add 5 pixels of padding to the left and right margins of the "sidebar" div as well. Finally, add the "clearfloat" class to a "br" tag just before the footer, following the directions at the bottom of page 14.

http://www.box.net/shared/e1xxy2tyib

The start.html file to begin the tutorial:

http://www.box.net/shared/fefsodgohv

Follow this tutorial to page 17 only – disregard the last three pages.