/*---------------------------------------------------------------------------------------------------------------------------------------------------------------- OBJECT: html & body De absolute basis structuur van elke website, de en tags ----------------------------------------------------------------------------------------------------------------------------------------------------------------*/ html, body{} html{} body{min-width:1232px;} /*---------------------------------------------------------------------------------------------------------------------------------------------------------------- OBJECT: frame Het raamwerk van deze site heet 'frame', het is het skelet van de site en bevat de grote layout indelingen zoals de header en de footer ----------------------------------------------------------------------------------------------------------------------------------------------------------------*/ .frame{position:relative; width:1232px; margin:0px auto 0px auto; display:block; } /*---------------------------------------------------------------------------- Header ----------------------------------------------------------------------------*/ header.frame{height:100px;} header.frame nav{height:38px; width:1236px; position:absolute; top:0px; left:0px; background:url('/images/mainnav.png') repeat-x top left;} header.frame h1 a{width:545px; height:64px; top:50px; left:380px; position:absolute; display:block; text-indent:-4000px; overflow:hidden; } /*---------------------------------------------------------------------------- Section ----------------------------------------------------------------------------*/ section.frame{} /*---------------------------------------------------------------------------- footer ----------------------------------------------------------------------------*/ footer.frame{height:32px; background-color:#0485ed; position:fixed; bottom:0px; left:0px; width:100%; z-index:1000; } /*---------------------------------------------------------------------------------------------------------------------------------------------------------------- OBJECT: grid Het beschikbare grid. ----------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*---------------------------------------------------------------------------- Methods ----------------------------------------------------------------------------*/ /*clearfix*/ .column{position:relative;} .column:after{visibility: hidden; display: block;font-size: 0;content: " ";clear: both;height: 0;} * html .column{ zoom: 1; } *:first-child+html .column{ zoom: 1; } /*---------------------------------------------------------------------------- Alternatives: voor kolommen met alternatieve afmetingen ----------------------------------------------------------------------------*/ /*column*/ .column > .c1, .column > .c2, .column > .c3, .column > .c4{position:relative; float:left; } /*columnrow*/ .column.columnrow{padding:0px 0px 40px 0px; } .column.columnrow > .c1{width:250px; margin:0px 20px 0px 0px; } .column.columnrow > .c2{width:692px; margin:0px 20px 0px 0px; } .column.columnrow > .c3{width:250px; } .column.columnrow.haspages > .c1, .column.columnrow.haspages > .c3{padding:35px 0px 0px 0px; } .column.columnrow.extraboxleft > .c2{width:962px; margin:0px 0px 0px 0px; } .column.columnrow.extraboxright > .c1{width:962px; } .column.columnrow.extraboxright > .c2{width:250px; margin:0px 0px 0px 0px; } /*---------------------------------------------------------------------------------------------------------------------------------------------------------------- OBJECT: @media (http://goo.gl/ZH6vV) Responsive webdesign media queries. Styles van toepassing op bepaalde scherm afmetingen (bv. iphone, ipad, etc...) ----------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*---------------------------------------------------------------------------- Onder 960px ----------------------------------------------------------------------------*/ @media only screen and (max-width: 980px) and (min-width: 821px) { } /*---------------------------------------------------------------------------- Onder 800px ----------------------------------------------------------------------------*/ @media only screen and (max-width: 820px) and (min-width: 621px) { } /*---------------------------------------------------------------------------- Onder 600px ----------------------------------------------------------------------------*/ @media only screen and (max-width: 620px) and (min-width: 501px) { } /*---------------------------------------------------------------------------- Onder 480px ----------------------------------------------------------------------------*/ @media only screen and (max-width: 500px) and (min-width: 341px) { } /*---------------------------------------------------------------------------- Onder 320px ----------------------------------------------------------------------------*/ @media only screen and (max-width: 340px) and (min-width: 5px) { }