Kop 1

Elementen naast elkaar plaatsen

Een oefening met display-types
Een presentatie met theorie: https://docs.google.com/presentation/d/e/2PACX-1vQ-C2eT8_TL937EXU3IINRw0r62xPZRQchOppZYJ-j9Zqmu3cAOZS8KS-nmNCRLeR10HZktMzxEYTBU/embed?start=false&loop=false&delayms=3000

Leerdoelen

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.

• display-types:
  • block
  • inline
  • inline-block
  • none
  • grid (summiere start)
• floats
• clear
• overflow
• box-model
• werken met padding

Naast elkaar 0: het resultaat (00:02:50)

Na het doorlopen van de tutorials heb je een resultaat dat hier te zien is. Het is de bedoeling dat op 4 verschillende manieren de menu items en de secties naast elkaar worden geplaatst. Door deze oefening krijg je behalve deze ervaringen ook inzicht in de display-types van elementen. Elk element heeft een display-type. In CSS kan deze worden aangepast en dat gaan we in deze trainingen ook doen.

Het display-type geeft de manier weer waarop het element wordt gerenderd in de viewport.
Er wordt gewerkt vanuit een basisdocument waar een deel van de inhoud al met een extern stijlblad gevormd is. Deze is te vinden op: https://github.com/Theo-denBlanken/naast-elkaar

Naast elkaar 1: display block (00:11:01)

Hier worden de items in het menu en de section naast elkaar geplaatst. Er wordt gewerkt met het display-type block. Veel elementen hebben dit display-type en hier hebben li-elementen en de section-elementen dat ook al. Ze hoeven daar dus niet naar omgezet te worden.

Block-elementen nemen de totale beschikbare breedte in en staan onder elkaar. Als eerste stap stellen we dus een beperkende breedte in. Dan blijken de block-elementen nog steeds onder elkaar te blijven.

Om ze naast elkaar te krijgen moet dus bovendien gezorgd worden dat ze moeten vloeien naast elkaar. Dit gaat met float: left;
Dit floaten (vloeien of stromen) werkt. Het element gaat links staan en de volgende inhoud stroomt er rechts omheen. Het levert echter wel ongewenste gevolgen in voor de overige elementen. Het parent element 'voelt' zijn inhoud niet meer zo goed. Je ziet zijn achtergrond niet of volgende elementen stromen te hoog in je lay-out in.
Daar zijn de volgende hacks voor om dit op te lossen:
Geef het parent-element van een overflow: auto; of overflow: hidden;
Geef het element dat niet in de float mee moet een clear: left;

Daarnaast zal bij ongelijke hoogten problemen ontstaan omdat elementen niet helemaal naar links terugvloeien als er elementen tussen staan die hoger zijn dan het rechter element. Vaak wordt dan met JavaScript de elementen even hoog gemaakt.
Zie hiervoor eventueel de bonusopdracht.

Ondanks deze hacks en een wat ingewikkelde werkwijze is deze manier veel in gebruik om elementen naast elkaar te plaatsen. Het geeft een precieze manier om elementen te plaatsen.

De linkjes (a-elementen) zijn standaard van het type inline. We zetten dat om naar block zodat ze met wat padding wat flinkere afmetingen krijgen. Ze vullen in verticale zin direct het li-element op omdat block-elementen hn hele beschikbare ruimte opvullen.

Naast elkaar 2: display inline-block (00:07:35)

Elementen met display: inline-block; staan met hun omgeving op een regel (inline) maar hebben ook block eigenschappen. Zo kun je ze breedte, hoogte en padding geven.
Als we dat toepassen op onze items in het navigatiemenu, dan staan ze wel gelijk naast elkaar. De items hebben wel een kleine tussenruimte. Dat komt omdat alle ruimte tussen de elementen als spaties worden weergegeven.
In de ruimte voor de sections is deze ruimte moeilijk precies door te rekenen waardoor het naast elkaar plaatsen onnauwkeurig gaat.
Alle onderkanten staan gelijk op een regel, en dat is voor de sections niet zo fraai. Je geeft ze daarom maar een vertical-align: top mee.
Hacks zoals met floats zijn niet nodig.
Voor een mooie vulling van de menu-items moet (net als in de vorige video) het a-element het type block krijgen.

Naast elkaar 3: display inline (00:08:16)

Elementen van het type inline staan met elkaar op dezelfde regel. Het is niet zinvol om ze hoogte of breedte te geven. Padding lukt dan wel, maar als het aantal regels toeneemt, gaat dat door elkaar lopen.
Met dezelfde verdere aanpak als bij inline-block is het menu te realiseren, maar de sections gaan niet lukken. Hun inhoud bestaat uit block-elementen en als dit ook inline worden gemaakt, staat alle inhoud in doorlopende regels.

Naar elkaar 4: display grid (00:12:20)

CSS Grid Layout is eigenlijk de handigste manier om een layout te maken. We gebruiken hem hij nu om elementen van het menu en de inhoud naast elkaar te zetten.
In tegenstelling tot block, inline en inline-block heeft display: grid; geen gevolgen voor het element zelf of zijn omgeving, maar alleen op zijn directe child-elementen.
De declaratie bestaat minstens uit 2 CSS regels: de eerste is display: grid; het tweede is bijvoorbeeld grid-template-columns. Daarmee beschrijf je het grid en de children zullen (als je niets verder doet) in dit grid geplaatst worden. In dit voorbeeld grid-template-columns: 1fr 1fr 1fr 1fr worden er 4 gelijke kolommen gemaakt.
Met grid-gap kun je de ruimte tussen de kolommen maken.

Grid layout kan ook verticaal elementen verdelen. Hier willen we dat de footer niet boven de onderkant van de pagina komt. Daarvoor geven we de body een minimale hoogte van 100vh.
We geven het een display: grid; en grid-template-rows: auto auto 1fr auto geeft de nav en de header en de footer een hoogte die deze elementen voor hun inhoud nodig hebben. De overige ruimte is dan voor main. Misschien heb je al gemerkt dat het main-element is eigenlijk alleen nuttig is in dit vierde voorbeeld.

Webfont toevoegen (00:03:51)

Een font bepaalt in grote mate de uitstraling van een site. Met de webfonts van Google is dit eenvoudig te doen.
Ga naar https://fonts.google.com/ en selecteer het font dat je nodig hebt.
Bij EMBED kies je bij voorkeur de @import-tab om het font is de CSS te importeren.
Kopieer alleen de CSS (niet de HTML) want wij werken hier in het CSS-bestand.
Bij de gewenste selector kun je vervolgens de font-family eigenschap invoeren.

Voeg in deze training 2 webfonts toe naar keuze, die verschillen van de instructievideo.

Bonus opdracht

Floats gaan niet goed als de elementen niet even hoog zijn. Voeg een JavaScript toe die de elementen in de float even hoog maakt.

Inleveren

• Na afloop plaats je deze training online in je bewijzenmap.
• Valideer jouw pagina's op Markup Validation Service van W3C.
• De validatie icoontjes staan al in de footer.
• Plaats de link in ELO Magister.