2017-03-20

Tweekoloms lay-out met vaste header

Header

Staat altijd bovenaan venster. Altijd even breed als venster. In bredere vensters staat de header vast, in smallere scrolt hij mee. Hoogte afhankelijk van lettergrootte.

Rechterkolom

Algemene beschrijving pagina

In vensters smaller dan 760 px staan header (geel) en rechterkolom (oranje) onder elkaar. De hele pagina scrolt. Bovenin het venster staat een kleine menubalk, die niet meescrolt. Als die wordt aangeklikt of aangeraakt, opent een menu.

In vensters minimaal 760 px breed scrolt de header (geel) niet mee, maar staat vast bovenaan het venster. In het midden staan twee kolommen naast elkaar. In de linkerkolom (groen) staat een menu, dat niet meescrolt. De rechterkolom (oranje) kan worden gescrold.

Beschrijving rechterkolom

In smallere vensters kan de hele pagina worden gescrold, dus ook deze kolom. In bredere vensters kan alleen deze kolom worden gescrold. In bredere vensters vult de rechterkolom de overgebleven ruimte tussen header en onderkant van het venster, en de overgebleven ruimte rechts van de linkerkolom. Bij voldoende inhoud verschijnt rechts een scrollbalk. (Op touchscreens is niet altijd een scrollbalk aanwezig.)

Begin van de opvultekst

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec adipiscing quam non elit. Curabitur suscipit, lacus nec interdum sodales, nisl justo sodales risus, in porta metus felis condimentum sapien. Nulla facilisi. Integer congue. Nunc ut turpis in est fringilla rutrum. Nulla bibendum, lectus sed sagittis euismod, metus ligula ultricies risus, nec vehicula augue eros vel mi. Duis vehicula. Sed accumsan aliquet eros. Suspendisse potenti. Vivamus eget libero. Nunc semper, erat sit amet commodo vestibulum, est mauris pharetra purus, nec consectetuer neque tortor a urna. Aliquam erat volutpat. Sed vestibulum ullamcorper nisl. Donec et turpis. Nunc eros. Phasellus elementum, turpis eu consequat aliquet, tortor urna mattis arcu, ac semper nisi ligula id velit. Fusce ipsum. Suspendisse libero arcu, sollicitudin non, varius in, placerat eu, leo. Phasellus egestas leo ac pede. Donec felis.

Phasellus et quam. Donec semper arcu in ante. Cras non erat in nunc molestie eleifend. Suspendisse potenti. Maecenas posuere dictum metus. Nulla et quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec leo nunc, facilisis lacinia, tempus et, elementum vel, neque. Nulla in neque. Phasellus gravida ligula quis leo. Phasellus lacus. Sed fringilla orci eu erat. Vivamus sit amet pede et felis faucibus dictum. Cras malesuada metus eu enim. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque elementum interdum neque. Vestibulum eu sapien. Nunc hendrerit ipsum non nibh hendrerit dictum. Morbi ultrices dolor quis lorem.

Suspendisse augue magna, mollis non, elementum sit amet, pretium ac, arcu. Nullam sagittis. Maecenas mattis odio vitae orci. Fusce et justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum tristique fermentum felis. Fusce feugiat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc leo dolor, lacinia ac, tempor fermentum, sodales vel, purus. Proin at odio ac elit volutpat pretium. Fusce aliquam sem at mauris. Ut enim turpis, vulputate quis, tempus id, placerat et, ligula. Suspendisse pede.

Nam fringilla dolor vel risus. Fusce et nunc porttitor lectus vestibulum blandit. Vestibulum scelerisque ullamcorper mauris. Nulla dapibus ipsum mattis neque. In imperdiet suscipit elit. Mauris a tortor eget nulla interdum vestibulum. Nullam sit amet metus. Donec viverra. Ut sapien. Duis tincidunt posuere tellus. Donec eleifend magna fermentum felis. Integer quis turpis ut enim cursus faucibus. Nam elit tellus, sagittis vitae, porta et, venenatis non, turpis. Morbi facilisis lacus nec purus porta sodales. Cras placerat ipsum vel neque. Integer sagittis.

Suspendisse mollis rhoncus sem. Vivamus lectus felis, aliquet eu, elementum vel, aliquam at, dui. Proin fringilla ultricies libero. Ut vehicula eros et ipsum. Proin metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse tristique convallis arcu. Curabitur fringilla pede eu arcu. Aenean tincidunt. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent at ante sit amet tellus accumsan dictum. Maecenas pulvinar, ligula sit amet ullamcorper sodales, ante nulla facilisis justo, eu vestibulum tellus ante sed leo. Donec a est. In vitae mi. Pellentesque ac enim. Pellentesque enim diam, pretium eget, fermentum non, lobortis eget, ipsum. Proin nec orci. Fusce odio. Nam nisi eros, mollis ut, placerat nonummy, porttitor a, lorem. Etiam quis nibh sed sem pharetra auctor.

Nulla mollis. In nonummy mi eget tellus. Praesent pulvinar urna sed felis. Nunc hendrerit. Maecenas in diam in nibh eleifend feugiat. Nam blandit nunc eget lacus. Suspendisse venenatis. Pellentesque blandit placerat pede. Integer eu odio at metus lobortis commodo. Proin vulputate. Cras lorem purus, lacinia a, convallis ac, scelerisque at, felis. Nulla scelerisque, magna nec iaculis semper, est ante tempor enim, sit amet pulvinar augue nisi eu sem.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec adipiscing quam non elit. Curabitur suscipit, lacus nec interdum sodales, nisl justo sodales risus, in porta metus felis condimentum sapien. Nulla facilisi. Integer congue. Nunc ut turpis in est fringilla rutrum. Nulla bibendum, lectus sed sagittis euismod, metus ligula ultricies risus, nec vehicula augue eros vel mi. Duis vehicula. Sed accumsan aliquet eros. Suspendisse potenti. Vivamus eget libero. Nunc semper, erat sit amet commodo vestibulum, est mauris pharetra purus, nec consectetuer neque tortor a urna. Aliquam erat volutpat. Sed vestibulum ullamcorper nisl. Donec et turpis. Nunc eros. Phasellus elementum, turpis eu consequat aliquet, tortor urna mattis arcu, ac semper nisi ligula id velit. Fusce ipsum. Suspendisse libero arcu, sollicitudin non, varius in, placerat eu, leo. Phasellus egestas leo ac pede. Donec felis.

Phasellus et quam. Donec semper arcu in ante. Cras non erat in nunc molestie eleifend. Suspendisse potenti. Maecenas posuere dictum metus. Nulla et quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec leo nunc, facilisis lacinia, tempus et, elementum vel, neque. Nulla in neque. Phasellus gravida ligula quis leo. Phasellus lacus. Sed fringilla orci eu erat. Vivamus sit amet pede et felis faucibus dictum. Cras malesuada metus eu enim. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque elementum interdum neque. Vestibulum eu sapien. Nunc hendrerit ipsum non nibh hendrerit dictum. Morbi ultrices dolor quis lorem.

Einde van de opvultekst