2. css box model Think of all HTML elements as boxes when thinking about design / layout Example 1 (for Part 2): http://www.ambientage.com/blog/091labs/ http://www.w3.org/TR/CSS2/box.html
3. css box model - display Some elements can be Block level (e.g. h1, p, ul, div…..) Inline level (e.g. a, strong, em, span….) CSS display property can change these ul li{display: inline }/*Changes li to display inline */ Control Full listing of display properties, support & examples: http://www.quirksmode.org/css/display.html
4. css positioning Boxes can be positioned in 3 ways Normal Flow How we have positioned things until now Absolute Positioning a box is removed from the normal flow entirely and assigned a position with respect to a containing block Floats a box is first laid out according to the normal flow, then taken out of the flow and shifted to the left or right as far as possible. Content may flow along the side of a float
5. element positioning The position property has 4 possible values: p { position: static } It’s a normal box laid out according to the normal flow, i.e. it behaves in the same way as all elements we’ve seen until now p { position: relative; top: 100px; left: 100px } Position calculated according to normal flow. Box is offset relative to its normal position When using relative positioning, the space left by the element’s block remains open – as if the element was positioned there.
6. element positioning p { position: fixed; top: 100px; left: 100px; } Causes the element to remain in a fixed position in the view port, i.e. it will not move when the document is scrolled. ( * IE6) p { position: absolute; top: 100px; left: 150px; } The box's position (and possibly size) is specified with the 'top', 'right', 'bottom', and 'left' properties Boxes are taken out of the normal flow and positioned relative to the viewport this means the space where they would have appeared is not left open See ugly positioning example
7. element positioning: float * When elements are floated they float to the specified margin (left or right). For example: #sidebar { float: right;} It will be floated to the right margin, and other elements will wrap around it. Valid values for this property are: left | right | none# In layouts, using {clear: both; } will help. Lots.
8. some layout schemes Liquid (uses % widths) Elastic (elements use em measures => relative to text size) Fixed width, centered * (e.g. content 960px wide) Overview & some samples: http://www.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one-for-you/
9. what are you doing? A grid is your friend http://960.gs See examples…
10. some css resources List of some best practices http://net.tutsplus.com/tutorials/html-css-techniques/30-css-best-practices-for-beginners/ CSS Reset http://meyerweb.com/eric/tools/css/reset/index.html Some layout articles http://www.alistapart.com/topics/design/layout/(take a look at all A List Apart articles, not intro level, but well worth a read) Good front-end dev web articles generally http://24ways.org/(archives) W3C Specs…. http://www.w3.org/TR/CSS21/
