CSS Layouting

Transcript

1. CSS
   CSS
   LAYOUTING
   

   View Slide

2. THE BOX MODEL
   THE BOX MODEL
   

   View Slide

3. Margin
   Padding
   Width
   Border
   

   View Slide

4. Works great...
   Don’t apply left, or right padding to
   elements with defined widths
   Floated elements with borders are
   wider than you think they are.
   Old IE has it’s own idea of a box model
   that is unlike any other with many bugs
   

   View Slide

5. CSS3 can normalize
   .selector {
   box-sizing: border-box;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   }
   Gets the box model to be more like IE6.
   

   View Slide

6. This is better...
   Borders, and horizontal paddings all
   all contained within the width.
   Supported by a majority of browsers,
   including the lovely IE8.
   

   View Slide

7. FLOATS
   FLOATS
   

   View Slide

8. .float {
   float: left;
   margin-right: 20px;
   margin-bottom: 20px;
   }
   .float .content
   A basic float
   

   View Slide

9. .float {
   float: left;
   width: 150px;
   margin-right: 20px;
   margin-bottom: 20px;
   }
   .float .content
   Another Common float
   .content {
   margin-left: 170px;
   }
   

   View Slide

10. Some caveats...
    Float without a width and the width of
    the interior content will be the width.
    Long text within a float requires that
    you set a width. Otherwise it’s 100%.
    A tall floated item must be cleared, or
    you will end up with floats within floats.
    

    View Slide

11. .float {
    float: right;
    margin-left: 20px;
    margin-bottom: 20px;
    }
    .float
    .content
    Uncleared floats
    .content
    .float
    

    View Slide

12. Clear your floats...
    No need to use extra markup to clear
    your floats. Self-clearing is the only way.
    

    View Slide

13. .selector {
    overflow: auto;
    *zoom: 1;
    }
    Self Clearing Floats
    .selector:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }
    

    View Slide

14. Mixin
    Don’t use clearfix as a mixin in SASS or
    LESS. Use it as a class name and save.
    

    View Slide

15. .float {
    float: left;
    margin-left: -50px;
    margin-right: 20px;
    margin-bottom: 20px;
    }
    .float .content
    Crazy floats
    

    View Slide

16. Positioning
    Positioning
    

    View Slide

17. Things to remember...
    Absolutely positioned elements are
    positioned relative to the nearest
    relatively positioned element, or the
    body element if none.
    Fixed position elements are
    positioned relative to the body
    element every time.
    

    View Slide

18. Body
    Parent
    Child
    .parent {
    position: relative;
    }
    .child {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    }
    Fixed Positioning
    

    View Slide

19. Body
    Parent
    Child
    .parent {
    position: relative;
    }
    .child {
    position: absolute;
    top: 0;
    left: 0;
    }
    Absolute Positioning
    

    View Slide

20. Z-index
    Z-index defines the layer that you
    want an element to appear on.
    IE6 & 7 have issues with z-index.
    Everyone else does it properly.
    

    View Slide

21. Z-INDEX
    Using z-index
    .selector:before {
    position: absolute;
    z-index: -1;
    top: -20px;
    opacity: 50;
    font-size: 75%;
    content: “Z-INDEX”
    }
    Z-INDEX
    Z-INDEX
    .selector:after {
    position: absolute;
    z-index: -2;
    top: -40px;
    opacity: 25;
    font-size: 50%;
    content: “Z-INDEX”
    }
    

    View Slide

22. Fin.
    Fin.
    

    View Slide