Er zijn maar weinig lay-outs waarbij er geen elementen naast elkaar geplaatst moeten worden. Je komt hier 4 verschillende manieren tegen waarop je dat zou kunnen doen! Twee daarvan worden heel vaak ingezet.
In een aantal stappen laten we zien hoe items in een menu en blokken inhoud naast elkaar geplaatst kunnen worden.
We doen dat op 4 verschillende manieren. Je krijgt dus 4 keer een resultaat te zien en dat is niet overal met evenveel moeite en met evenveel succes.
Deze manieren leren ons hoe display-types bij CSS ingezet kunnen worden voor layout.
Uitgangspunt is een bestaande site.
De inhoud daarvan gaat op 4 verschillende manieren naast elkaar geplaatst worden.
De link naar de site wordt uitgebreid met de overige contactinformatie van het museum.
Vervolgens wordt er een menu toegevoegd, naar telkens een gelijksoortige pagina, maar met een andere manier om de items zowel in het menu als in de hoofdinhoud naast elkaar te plaatsen.
Het html- en body-element krijgen eerst padding en marge 0, zodat de elementen goed aansluiten aan de linker en bovenzijde van de viewport.
Om het menu te stijlen krijgen de linkjes een achtergrondkleur en een ruime padding.
De selector voor deze linkjes in nav a zodat de gewone linkjes in de inhoud niet diezelfde stijl krijgen.
Het geven van breedte lukt niet zo, omdat de linkjes van het display-type inline zijn. ze worden dus omgezet naar het type block.
Om ze alsnog naast elkaar te zetten, krijgen ze float: left;.
Hierdoor vloeit ook het h1-element er rechts-omheen. Dat is niet gewenst, en deze krijgt daarom een clear: both;.
De navigatie-linkjes vullen niet de hele breedte. Het nav-element 'voelt' ze niet en daarom krijgt hij zelf hoogte en achtergrondkleur.
h1 heeft een marge, waardoor hij zichzelf van de navigatiebalk afduwt. Deze maken we dan 0 en geven het element in plaats daarvan een fikse padding.
Tot slot krijgen de linkjes ook een hover-effect. Met de pseudo-selector a:hover, kun je de eigenschappen aanpassen voor het geval de muis erover beweegt.
De delen, die in de inhoud naast elkaar moeten komen, zijn onderling nogal verschillend en daarmee moeilijk te selecteren. Door ze in een main-element met 4 sections te plaatsen wordt het geheel ook nog semantischer.
Deze instructievideo laat zien hoe dat het eenvoudigst naar de andere pagina's wordt overgezet.
Ook krijgt elke pagina nog een footer, die alvast wordt gestyled. Horizontaal krijgt hij dezelfde padding als h1, zodat dat mooi verticaal in lijn komt.
De eerste poging om de 4 sections naast elkaar te plaatsen is er vanuit te gaan dat ze block-items zijn.
We kunnen de breedte instellen, maar ze blijven onder elkaar. We stelen de breedte eerst in op 25% zodat ze samen de volledige breedte maken.
Ze gaan pas naast elkaar als ze ook een float; left; gekregen hebben.
Is er dan ook maar enige ruimte, dan vloeit de zwarte footer rechts om het main-element heen. Om dat te voorkomen geven we de footer een clear: left;
Hierna is het ook de bedoeling dat er padding en marge wordt toegevoegd om afstanden te maken. Daarvoor moet er gerekend worden. als je de sections een box-sizing: border-box; geeft, wordt dat rekeneen eenvoudiger. De breedte is namelijk gelijk aan de afmetingen inclusief de padding (en eventueel de rand. Je kunt dus de breedte op 25% laten staan. Voeg je ook marges toe, dan moet voor de totale breedte dat afgenomen worden van de breedte van de sections, zodat het totaal 100% blijft.
Maken we het display-type van de sections van het type inline, dan blijken ze niet naast elkaar te zetten. Het begint al met het probleem dat de breedte niet in te stellen is.
Wellicht kom je verder als de ook nog met floats gaat werken. Het is echter niet een verbetering van de situatie. Ook in video 2 was het in het menu al niet zo fijn werken met het naast elkaar plaatsen van inline elementen...
Wil je dit toch proberen, doe dit dan nadat je de volgende instructie met inline-block hebt gezien.
Inline-block-items kunnen wel op breedte ingesteld worden en gaan dan als vanzelf naast elkaar staan. Het precies verdelen van de items over de hele breedte is echter erg lastig, omdat er als vanzelf een tussenruimte tussen de items ontstaat. Feitelijk is deze zo groot als de breedte van een spatie tussen 2 woorden op een regel.
Dat de items bij inline-block op 1 regel staat, zie je ook aan de onderzijde van items, die in hoogte verschillen.
Deze werkwijze is dan ok goed toe te passen in bijvoorbeeld en menu, als je zeker weet dat alles even hoog is en er voldoende breedte in de parent beschikbaar is. Je hebt dan niet te doen met floats zoals bij block-items.
Bij flexbox kun je prima layouten. Je moet je realiseren dat je iets niet direct over de items zegt maar eerst iets codeert voor de parent.
Je geeft de parent display: flex;. Dan gaan de children sowieso naast elkaar staan.
Daarnaast zijn de hoogtes van de items gelijk gemaakt.
De verdeling blijkt in ons geval niet gewenst. Het eerste item dat brede paragrafen met lange regels had, krijgt het meest.
De children (in ons geval de sections) kunnen met flex: 1 0 20%; gelijk gemaakt worden in breedte. De flex: 1 0 20%; heeft dus 3 waarden. De eerste is de flex-grow: de mate waarin de overblijvende breedte over de items wordt verdeeld.
De tweede waarde is geeft aan hoeveel het item mag krimpen bij een tekort aan ruimte. De derde waarde geeft de basiswaarde mee: de hoeveelheid ruimte waarbij er in de verdeling vanuit gegaan wordt. Dit is hier bewust te weinig gekozen, want dan zou alles te smal worden, maar ze mogen daarna toch van flexbox groeien. In ons geval gelijkmatig.
We kunnen zonder moeite nu ook padding en marge meegeven voor extra tussenruimtes.
Maar flexbox kan ook verticaal ingezet worden om elementen te verdelen.
In de body zijn 4 children: nav, h1, main en footer. De parent is dus body. Eerst geven we deze hoogte mee, want dat heeft de body gek genoeg niet van zichzelf. De hoogte wordt minimaal 100vh: precies zo hoog als de viewport.
Met een display: flex; voor de body worden de children in horizontale zin naast elkaar geperst. Dat komt omdat de richting default horizontaal is (flex-direction: row;). We geven dus flex-direction: column;. Er lijkt nu weer dat alles lijkt op de uitgangspositie, maar we kunnen de children nu in lengte laten 'groeien'. We geven de main een flex: 1 0 auto; Dan rekt deze zover op dat alles in de viewport staat. Dat kunnen we ook met footer en h1 doen, en dan verdelen zij het overschot aan hoogte.
Als de main nu een flex: 3 0 auto; krijgt zal deze 3 keer zo hard groeien als de h1 en footer.
De inhoud van beide laatste kunnen we met flexbox ook heel mooi centreren. Recept begint vertrouwd: ze zijn voor hun inhoud een parent. Dus geef je deze elementen eerst display: flex;
Daarna geef je met justify-content: center; een horizontale centrering en met align-items: center; een verticale centrering van de inhoud.
De sections hoeven tenslotte geen achtergrondkleur meer om te laten zien wat er met ze gebeurd is in deze trainingen.