Eigenlijke inhoud van de pagina

Beschrijving van de onderdelen

Algemeen

Plaats en grootte van de onderdelen van deze lay-out (header, menu en kolommen) zijn afhankelijk van de breedte van het venster van de browser.

Header (geel)

De header is altijd even breed als het venster van de browser.

In vensters smaller dan 810 px en op alle touchscreens is de hoogte niet meer dan nodig is om de inhoud van de header weer te geven en scrolt de header mee met de rest van de pagina.

In vensters breder dan 810 px, behalve op touchscreens, blijft de header altijd aan de bovenkant van het venster staan, ook bij scrollen, en heeft een vaste hoogte.

Menu (grijs/zwart op lichtgroen)

In browservensters met een breedte van minder dan 600 px staat het menu onderaan de pagina, gelijk boven de footer. Elke knop is even breed als het halve venster, zodat ze goed zijn aan te raken. Het menu scrolt mee met de rest van de pagina. Een enkele link in de header brengt je naar dit menu. Een extra link in het menu brengt je weer terug naar boven. Deze twee links zijn alleen zichtbaar in deze smalle vensters.

In browservensters met een breedte tussen 600 en 810 px en op alle touchscreens breder dan 600 px is iets meer ruimte. Daar staat het menu gelijk onder de header in de vorm van acht naast elkaar staande knoppen. Het scrolt mee met de rest van de pagina.

In browservensters breder dan 810 px, behalve op touchscreens, staat het menu aan de linkerkant in de vorm van acht onder elkaar staande knoppen. De breedte is 18% van de breedte van het venster, dus in brede vensters is het menu breder. Het menu scrolt, behalve op touchscreens, niet mee met de rest van de pagina.

Linkerkolom (oranje)

Als er genoeg tekst en dergelijke aanwezig is, kan deze kolom worden gescrold.

In browservensters smaller dan 700 px staat er niets naast deze kolom en is de kolom even breed als het venster.

In vensters met een breedte van 700 tot 810 px staat rechts van deze kolom een tweede kolom. De oranje kolom is ongeveer even breed als twee derde van het venster.

In vensters met een breedte van 810 tot 1200 px staat links van deze kolom het menu, rechts staat een tweede kolom. De oranje kolom is vanaf deze breedte ongeveer even breed als de helft van het venster.

In vensters breder dan 1200 px wordt de tekst binnen deze kolom zelf ook weer in twee kolommen gesplitst.

In vensters breder dan 1500 px staan rechts van deze kolom nog twee kolommen en is een achtergrond-afbeelding toegevoegd.

Tweede kolom (roze)

In browservensters smaller dan 700 px staat er niets naast deze kolom en is de kolom even breed als het venster. Hij staat hier gelijk onder de linkerkolom.

In vensters breder dan 700 px staat deze kolom rechts van de linkerkolom. De kolom is ongeveer even breed als een kwart van het venster.

In vensters breder dan 1500 px staat rechts van deze kolom nog een derde kolom en is een achtergrond-afbeelding toegevoegd. De kolom is vanaf deze breedte ongeveer even breed als een vijfde van het venster.

Onderste rij of derde kolom (donkergroen)

In browservensters smaller dan 810 px staat deze kolom onder de andere kolommen en is even breed als het venster.

In vensters breder dan 810 px staat deze kolom rechts van het menu, maar nog steeds onder de andere kolommen. Op touchscreens echter blijft hij even breed als het venster. De tekst binnen deze kolom wordt zelf ook in twee kolommen gesplitst.

In vensters breder dan 1200 px wordt de tekst binnen deze kolom zelf ook in drie kolommen gesplitst.

In vensters breder dan 1500 px komt deze kolom rechts van de andere twee kolommen te staan. De kolom is vanaf deze breedte ongeveer even breed als een vijfde van het venster. Er is een achtergrond-afbeelding aan de kolom toegevoegd.

Tweede kolom

In browservensters smaller dan 700 px staat er niets naast deze kolom. De kolom is hier even breed als het venster en staat gelijk onder de linkerkolom.

In vensters breder dan 700 px staat deze kolom rechts van de linkerkolom. De kolom is ongeveer even breed als een kwart van het venster.

In vensters breder dan 1500 px staat rechts van deze kolom nog een derde kolom en is een achtergrond-afbeelding toegevoegd. De kolom is vanaf deze breedte ongeveer even breed als een vijfde van het venster.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.

In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.

Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.

Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet.

Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.

Onderste rij of derde kolom

In browservensters smaller dan 810 px staat deze kolom onder de andere kolommen en is even breed als het venster.

In vensters breder dan 810 px staat deze kolom rechts van het menu, maar nog steeds onder de andere kolommen. Op touchscreens blijft hij echter even breed als het venster. De tekst binnen deze kolom wordt zelf ook in twee kolommen gesplitst.

In vensters breder dan 1200 px wordt de tekst binnen deze kolom zelf ook in drie kolommen gesplitst.

In vensters breder dan 1500 px komt deze kolom rechts van de andere twee kolommen te staan. De kolom is vanaf deze breedte ongeveer even breed als een vijfde van het venster. Er is een achtergrond-afbeelding aan de kolom toegevoegd.