Upgrade to Pro — share decks privately, control downloads, hide ads and more …

CSS Layouting

CSS Layouting

The deck for an internal presentation at Cantina about the basics of laying things out with CSS.

Matthew Crist

March 27, 2012
Tweet

More Decks by Matthew Crist

Other Decks in Technology

Transcript

  1. CSS
    CSS
    LAYOUTING

    View full-size slide

  2. THE BOX MODEL
    THE BOX MODEL

    View full-size slide

  3. Margin
    Padding
    Width
    Border

    View full-size 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 full-size 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 full-size 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 full-size slide

  7. FLOATS
    FLOATS

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  16. Positioning
    Positioning

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size 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 full-size 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 full-size slide