Ben's Hobbyhoekje -- Lay-out verdeeld in blokken met vaste verhoudingen

Lay-out verdeeld in blokken met vaste verhoudingen

Een responsive lay-out is noodzakelijk om een website op zowel een desktop als op een smartphone te kunnen bekijken. Op deze pagina wordt zo'n lay-out behandeld. Het window is opgebouwd uit rechthoeken en vierkanten (blokken) waarvan de afmetingen een bepaalde lengte-breedte verhouding hebben.

Bij schalen (als het venster van grootte wordt veranderd) kunnen de lengte-breedte verhoudingen van die blokken veranderen, maar ze voldoen wel aan verhoudingen die in de CSS zijn geprogrammeerd.

We verduidelijken dit met het voorbeeld, dat opent in een nieuw venster of tabblad.

Toon het voorbeeld

Om het gedrag van de content-blokken goed te bestuderen begin je het beste met een window dat minimaal 1000px breed is. Kijk goed naar de opbouw van de vier content-blokken. Verklein het daarna tot ca. 930px.
De tekstblokken 'Aanwijzingen', 'Gidsen' en 'Sponsors' worden onder 'Fotosafari' gezet; 'Gidsen' en 'Sponsors' staan nog wel naast elkaar. Het blok 'Aanwijzingen' heeft de verhouding 16:9 (was 2:1).
Verklein het window nu tot minder dan 420 px. De blokken 'Gidsen' en 'Sponsors' staan nu ook onder elkaar; het blok 'Aanwijzingen' heeft weer de verhouding 2:1.

Dit is een bewerking van code die ik vond in Webdesigner Magazine nr. 80 (oktober 2015), pag. 58 en volgende. Dit blad wordt sinds eind november 2017 niet meer gemaakt.
De auteur van het script is Ralph Saunders, een front-end developer uit Bournemouth, Verenigd Koninkrijk.

Voor de toepassing op deze site zijn de code, de kleuren en de tekst van het voorbeeld aangepast, en zijn er 'echte' links geplaatst.

De code van het voorbeeld kun je downloaden, behalve de achtergrondfoto. Daar moet je zelf voor zorgen.

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. Voor de links is Javascript gebruikt.
De HTML-code heeft de volgende structuur:

<body> <div class="container"> <div class="one-half"> <div class="aspect" data-ratio="1:1"> <div class="aspect-content"> <h2 class="headline">Fotosafari</h2> <p class="info"> <span>Vandaag gaan we opzoek naar vogels.</span> Vogels zijn dieren met vleugels. Meestal …</p> </div> </div> </div>  <div class="one-half"> <a title="Aanwijzingen" class="aanwijzingen"> <div class="aspect" data-ratio="2:1"> <img src="je eigen foto.jpg" alt=""> <div class="aspect-content"> <span> <h4 class="headline">Aanwijzingen</h4> <ul> <li onclick="window.alert('Aanwijzingen - Routebeschrijving')">Routebeschrijving</li> <li onclick="window.alert('Aanwijzingen - Zo maak je mooie vogelfoto\'s')">Zo maak je mooie vogelfoto's</li> <li onclick="window.alert('Aanwijzingen - Do\'s en Dont\'s')">Do's en Dont's</li> </ul> </span> </div> </div> </a> <div class="one-half"> <a title="De gidsen die ons rondleiden" class="gidsen" onclick="window.alert('Gidsen')"> <div class="aspect" data-ratio="1:1"> <div class="aspect-content"> <h4 class="headline">Gidsen</h4> <p>Lorem ipsum dolor …</p> </div> </div> </a> </div>  <div class="one-half"> <a title="Sponsors" class="sponsors" onclick="window.alert('Sponsors')"> <div class="aspect" data-ratio="1:1"> <div class="aspect-content"> <h4 class="headline">Sponsors</h4> <p>Bekijk de lijst met sponsors</p> <p>Lorem ipsum dolor …</p> </div> </div> </a> </div>  </div>  </div>  <div class="site-footer"> <p>Naar een tutorial door Ralph Saunders</p> </div>  </body>
Alle code in de <body> wordt omsloten door <div id="container".
Het blok "Foto-Safari" wordt als eerste gedeclareerd. Het heeft de klasse one-half. Daarin is vastgelegd dat het de helft van de beschikbare breedte beslaat, als dat mogelijk is. Het krijgt ook de klasse aspect, waarin is vastgelegd dat de breedte-hoogte verhouding van dat blok constant moet zijn. Met behulp van een data-attribuut wordt vastgelegd dat de verhouding 1:1 moet zijn (het blok is dus vierkant): data-ratio="1:".
Zie ook het item Over * en [] in Style Sheets voor meer informatie over het verwerken van HTML-attributen in CSS.
Het blok "Aanwijzingen" heeft ook de klassen one-half en aspect. De breedte-hoogte verhouding is nu 2:1, waardoor het een rechthoek wordt.
De blokken "Gidsen" en "Sponsors" hebben ook de klassen one-half en aspect, met de verhouding 1:1, waardoor het vierkanten zijn. Ze zijn genest binnen het "Aanwijzingen". Omdat de verhouding van "Aanwijzingen" gelijk is aan 2:1, passen "Gidsen" en "Sponsors" daar precies onder.
"Gidsen" en "Sponsors" staan naast elkaar. De plaatsing van deze twee blokken is alleen te realiseren door de nesting binnen "Aanwijzingen".
De blokken die links bevatten worden bij elkaar gehouden door ze op te nemen in een <a>-tag. Binnen die tag mag je elke andere tag zetten die je wilt, behalve weer een <a>-tag. Dat mag nameljk niet in HTML5.
Als het blok niet zelf een link hoeft te zijn, laat je het attribuut href weg.
Als je meerdere links in je eigen toepassing wilt gebruiken, moet je die implementeren met onclick, dus via JavaScript.
In het voorbeeld zijn alle links met onclick gemaakt. Bij "Gidsen" en "Sponsors" zou je in plaats van onclick ook gewoon het href-attribuut kunnen gebruiken.
De beschikbare beeldverhoudingen bepaal je met de CSS. In het voorbeeld zijn beschikbaar: 1:1, 2:1, 4:3 en 16:9. Als je andere verhoudingen wilt gebruiken moet die zelf in de CSS inbouwen.
Bij kleinere windows kan het voorkomen dat de beeldverhoudingen 2:3 of 4:1 worden. Dat is zo in de CSS geprogrammeerd; het is dus geen toeval.
De breedte van elk blok wordt bepaald door de klasse one-half. Daar staat, zoals de naam al zegt, width:50% ingesteld.
De hoogte van elk blok wordt bepaald in aspect. De padding-bottom wordt afhankelijk van de ingestelde verhouding (aspect ratio) ingesteld op 100%, 50%, enz. Het percentage bereken je met deze formule:
percentage = 100 × hoogte ÷ breedte.
Bijvoorbeeld: verhouding 2:1: percentage = 100 × 1 ÷ 2 = 50%.
Om te zorgen dat padding-bottom goed werkt, is voor alle elementen in het document box-sizing:border-box; ingesteld.
De blokken "Gidsen" en "Sponsors" hebben een pijltje naar rechts, om aan te geven dat er meer informatie aanwezig is. Doordat de cursor daar een handje is, is te zien dat het (hele blok) links zijn.
De links op de pagina zijn gemaakt met behulp van event-handlers, in dit geval onclick. Bij aanklikken van een link wordt een alert getoond.
Inbouwen in je eigen site
Bedenk voor alles hoe je lay-out er uit moet zien: Kleuren, afmeting van de blokken, achtergrond-foto's enz. Bereken daarna de percentage voor width en padding-bottom die die je nodig hebt.
Download de code en pak hem uit. Maak een HTML-structuur zoals hierboven is aangegeven.
Hernoem html062a.htm naar je eigen smaak, bijvoorbeeld index.html.
De CSS staat in de file styles.css.
Pas de CSS aan. Doe dat in kleine stapjes, je verliest anders al gauw het overzicht.
Als je een andere beeldverhouding wilt inbouwen dan al is voorgeprogrammeerd, doe je dat door voor die beeldverhouding een percentage padding-bottom op te geven. Het percentage bepaal je met de hiervoor genoemde formule.
Door nieuwe klassen toe te voegen aan de CSS, kun je de blokken ook smaller of breder maken. Voeg bijvoorbeeld klasse one-third toe, waarin je width:33.33% zet, of one-quarter, met width:25%. Je kunt natuurlijk ook three-quarters maken, met width:75%.
Tenslotte
Deze aanpak voor een responsive site is gebouwd op eenvoudige HTML en CSS. Dat maakt het wel vrij lastig te hanteren. Daarom vind ik dit niet geschikt voor een site die je regelmatig moet aanpassen. Maar voor site met een korte levensduur, bijvoorbeeld de aankondiging van een evenement, is dit juist heel geschikt.
De opmaak leent zich niet voor het presenteren van veel tekst. De vier blokken hebben allemaal overflow:hidden. Als er toch meer tekst on moet dan er ruimte is. kun je overwegen om voor die blokken overflow:auto in te stellen. Dan krijg je waar nodig een scrollbalk.
Test je ontwerp goed uit op diverse apparaten.

Gebruik:

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

De code van het voorbeeld ziet er als volgt uit:

(Zet dit in de <HEAD>).

<link rel="stylesheet" href="styles.css">

De code voor de <BODY> is hierboven al genoemd.

Downloaden:

Druk op de knop: File: voorb062.zip, 3245 bytes.