Thursday, February 14, 2013

References for 2/14 class: Box Model and Positioning with CSS

The CSS Box Model:

The position declaration:

Positioning elements with CSS:

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.

The start.html file to begin the tutorial:

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

No comments: