Css layout

1,158 views

Published on

1 Comment
1 Like
Statistics
Notes
No Downloads
Views
Total views
1,158
On SlideShare
0
From Embeds
0
Number of Embeds
540
Actions
Shares
0
Downloads
14
Comments
1
Likes
1
Embeds 0
No embeds

No notes for slide

Css layout

  1. 1. CSS LayoutLim BoreyPhnom  Penh  .  Sunday  3rd  February  2013  WebDesignMeetup @limborey www.limborey.com
  2. 2. Content WebDesignMeetup •  Box Model •  Positioning –  Relative –  Absolute –  Fixed •  Grid System
  3. 3. Box Model WebDesignMeetup Padding   Margin   Content   Border   #myBox { margin: 10px; padding: 5px; width: 70px; }
  4. 4. Box Model WebDesignMeetup
  5. 5. Positioning WebDesignMeetup •  2 types of virtual formatting elements –  Block-level element: div, p, h1, … –  Inline element: span, strong, … •  3 basic positioning schemes –  Relative –  Absolute –  Fixed
  6. 6. Positioning: Relative WebDesignMeetup •  If you relatively position an element, it will stay exactly where it is.
  7. 7. Positioning: Absolute WebDesignMeetup •  absolute positioning takes the element out of the flow of the document, thus taking up no space
  8. 8. Positioning: Fixed WebDesignMeetup •  Is a subcategory of absolute positioning. •  The difference is that a fixed element’s containing block is the viewport. This allows you to create floating elements that always stay at the same position in the window
  9. 9. Floating box WebDesignMeetup •  A floated box can either be shifted to the left or the right until its outer edge touches the edge of its containing box or another floated box. •  floated boxes aren’t in the normal flow of the document, thus block boxes in the regular flow of the document behave as if the floated box wasn’t there.
  10. 10. Floating box WebDesignMeetup
  11. 11. Floating box WebDesignMeetup
  12. 12. Floating box WebDesignMeetup
  13. 13. Grid System WebDesignMeetup Case  study:  Twi?er  Bootstrap’s  grid  system  

×