Ben's Hobbyhoekje -- Zigzag lay-out

Zigzag lay-out

Een deel van deze pagina is op een speciale manier opgemaakt. Naast elke alinea staat beurtelings links en rechts een plaatje. Dat heet "zigzag lay-out". Het wordt ook wel een alternerende lay-out genoemd.

Op deze pagina wordt beschreven hoe je dit maakt. De code van deze pagina kun je downloaden om zelf te gebruiken, echter zonder de plaatjes.

Inspiratie voor deze pagina is ontstaan door een item op w3schools.com. Deze pagina is daar een vrije bewerking van.

Er worden twee items besproken:
1. De werking van het script.
2. Toepassen in je eigen site.

De werking van het script
De code bestaat uit HTML en CSS.
De CSS staat hier in het document, maar kan natuurlijk ook in een gelinkt style-sheet staan.
Deze pagina is responsive. Daarom staat er in de <head> van deze pagina een speciale meta-tag.

Om het responsive gedrag te testen moet je pagina laden buiten de frameset, dus zonder alle toeters en bellen die je nu ziet. Klik HIER.
In de normale situatie staat deze pagina in een <iframe>.

HTML
De HTML in de <body> bestaat uit een aantal geneste <div>-tags, waarmee een soort tabel wordt opgebouwd.
De buitenste <div> (de 'tabel') heeft klasse container.

De <div>'s waarmee de 'tabelrijen' worden gemaakt hebben klasse row.
De <div>'s waarmee de 'tabelcellen' worden gemaakt hebben klasse column-66 (voor de tekst) resp. column-34 (voor de plaatjes).
De verhoudingen tussen breedte van de tekst en het plaatje zijn steeds hetzelfde: ⅔ voor de tekst en ⅓ ruimte voor de plaatjes.

CSS
De CSS van het voorbeeld bestaat uit verschillende klassen, met nog een paar 'extra' dingen. De klassen zijn:
container, row, column-34 en column-66.
- container Bevat de 'tabel'. Hierbinnen liggen de drie andere klassen. De klasse heeft padding:0 om ongewenste binnenmarges te voorkomen en box-sizing: border-box; om het gedrag van de overige drie klassen aan te passen.
- row Dit zijn de 'tabelrijen'. de klasse zelf heeft heen specifieke opmaak, maar er is wel de pseudoklasse after aan toegevoegd. Dit om te zorgen dat de tabelrijen niet worden verstoord door content die eventueel op dezelfde regel zou kunnen staan.
- column-34 Dit zijn de 'tabelcellen' waar de plaatjes in zitten. Lijn-elementen (o.a. tekst en figuren) worden gecentreerd geplaatst. Figuren hebben een bovenmarge van 5px.
  De breedte van column-34 is 34% van de breedte van row.
- column-66 Dit zijn de 'tabelcellen' voor de tekst.
  De breedte van column-66 is 66% van de breedte van row.
De breedteverhouding van column-34 en column-66 ongeveer ⅓ : ⅔. Dit geeft een mooi effect, maar het is een bovengrens waardoor het leesbaar blijft. Bij een verhouding ½ : ½ gaat het op een dambord lijken en wordt het onleesbaar. Ga niet lager dan ¼ : ¾, anders wordt het lelijk.
Om de opmaak van de pagina goed te laten reageren op de breedte van het document, is een @media-opdracht toegevoegd aan de CSS, die de breedte van column-34 en column-66 op 100% zet als de breedte van het document maximaal 600px is. Hierdoor komen de tabelcellen onder elkaar te staan.
Opmerking: Doordat alle rijen binnen dezelfde container staan, krijg je op smalle schermen deze opmaak:

tekst-plaatje-plaatje-tekst-tekst-plaatje-plaatje-tekst-tekst- …
Een logischer opmaak zou zijn:

tekst-plaatje-tekst-plaatje-tekst-plaatje-tekst-plaatje-tekst- …
Als je dat wilt moet je elke rij in een eigen container zetten.
Toepassen in je eigen site
Download de .zip-file en pak hem uit. Zet de code in je document. Je hebt nu een werkend voorbeeld.
Maak de plaatjes en zet ze in je code. Om een evenwichtige opmaak te krijgen zouden die allemaal even groot moeten zijn.
Maak de teksten zet die in het document in plaats van de teksten van het voorbeeld. Zorg er voor dat de hoogte van elk tekstblok ongeveer even hoog is als de plaatjes. Dat draagt bij aan de evenwichtige opmaak.
Je kunt alle HTML-tags gebruiken die binnen een <div>tag mogelijk zijn. In de tekst delen wordt het gebruik van plaatjes en video niet aanbevoln,maar het kan wel.
Beoordeel de opmaak. Wijzig zonodig de breedte van de twee "column" kolommen. Neem de grenzen, die hiervoor zijn genoemd, in acht. Of overschrijd ze heel erg, anders is het niet mooi.
Voeg rijen toe of verwijder ze juist.

Gebruik:

De code staat gedeeltelijk in de <HEAD> en gedeeltelijk in de <BODY>.

De code van het voorbeeld ziet er als volgt uit:

(Zet dit in de <HEAD>).

<meta name="viewport" content="width=device-width, initial-scale=1">

<style>
.container {
box-sizing: border-box;
padding: 0;
}

/* Geen andere content naast een row */
.row:after {
content: "";
display: table;
clear: both;
}

/* 2/3 kolom */
.column-66 {
float: left;
width: 66%;
padding: 0;
}

/* 1/3 kolom */
.column-34 {
float: left;
width: 34%;
padding: 0;
text-align:center;
}
.column-34 img {
margin-top:5px;
}

/* Maak responsive - Zet de tabelcellen onder elkaar bij documenten smaller dan 600 px */
@media screen and (max-width: 600px) {
.column-66,
.column-34 {
width: 100%;
}
}
</style>

(Zet dit in de <BODY> op de plaats waar de zigzag lay-out moet verschijnen).

<div class="container">
<div class="row">
<div class="column-66">
(Tekst)
</div> 
<div class="column-34">
<img src="plaatje_0.jpg">
</div> 
</div> 

<div class="row">
<div class="column-34">
<img src="plaatje_1.jpg">
</div> 
<div class="column-66">
(Tekst)
</div> 
</div> 

.
.
. Enzovoort
.
.

<div class="row">
<div class="column-34">
<img src="plaatje_5.jpg">
</div> 
<div class="column-66">
(Tekst)
</div> 
</div> 
</div>

Downloaden:

Druk op de knop: File: voorb674.zip, 1595 bytes.