CSS Layout

tussen []: optioneel, sterk aanbevolen voor wie wil verdergaan in web

gebruik pijltjestoetsen om te navigeren
dotted codepanels zijn editeerbaar

CSS layout

Overzicht

Layout technieken

  • CSS heeft een lange weg afgelegd; pas met het verdwijnen van Internet Exlorer konden Flexbox en Grid gebruikt worden, de eerste echte layout technieken in CSS.
  • Je kan layouttechnieken onderverdelen in ruwweg 5 groepen:
    • alignering: verzamelnaam voor reeks losse technieken voor horizontale en verticale alignering
    • flexbox: bedoeld voor allerhande horizontale en verticale layouts
    • floating: gebruikt om content links of rechts rond een blok doen vloeien (bv. foto)
    • [grid]: iets complexere methode voor grid-achtige layout in rijen en kolommen
    • [positionering] (absoluut, relatief, fixed): positionering op basis van coördinaten; niet geschikt voor een modern flexibel responsive ontwerp; vandaag vooral gebruikt in Javascript games en enkele uitzonderlijke gevallen
  • Je kan layouts vaak met verschillende technieken oplossen, maar Flexbox is je standaardtechniek
  • bestudeer zeker nog eerst grondig de display property in vorige presentatie; veel kleine layoutproblemen kan je daar al mee oplossen

CSS layout

Alignering

Horizontaal — content

  • Om tekst, afbeeldingen enz... horizontaal te aligneren, gebruik text-align op de parent: 
    #parent {
  text-align: center; /* probeer ook left, right */
}
    <div id="parent">

    <p> parmesan cheese slices when the cheese comes out everybody's happy cow cheese and wine cheese and biscuits. Roquefort when the cheese comes out...

    <img>
  • merk op hoe text-align wordt overgeërfd (van <div> naar <p>)
  • dit werkt alleen voor inline content, niet voor blocklevel elementen!

Horizontaal — blok

  • Om blocklevel content (<div>, <p>...) horizontaal te aligneren, gebruik je de waarde auto voor margin-left en/of margin-right op het element zelf: 
    .child {
  margin-left: auto;
  margin-right: auto; /* probeer ook 0px */
  width: 300px;
}
    <div id="parent">
    <div class="child"> parmesan cheese slices when the cheese comes out everybody's happy cow cheese and wine cheese and biscuits. Roquefort when the cheese comes out...
  • dit werkt alleen voor blocklevel elementen, niet voor inline content!

Verticaal — één regel

  • Een oud trukje om één regel verticaal te centreren is height en line-height dezelfde waarde geven: 
    .button {
  display: inline-block; /* anders kan je geen hoogte instellen */
  height: 60px;
  line-height: 60px;
  text-align: center;
  white-space: nowrap; /* vermijd line breaks */
  width: 120px;
}
    button tekst
  • dit werkt alleen bij één regel, niet bij meerdere regels
  • in bijna alle gevallen is padding gebruiken eenvoudiger (zie volgende slide)

Verticaal — blok (1)

  • Als de hoogte er niet toe doet, kan je content eenvoudig verticaal centreren met padding op de parent: 
    .textblock {
  padding: 50px 20px; /* vert hor */
}
    <div id="textblock">
    <p> parmesan cheese slices when the cheese comes out everybody's happy cow cheese and wine cheese and biscuits. Roquefort when the cheese comes out everybody's happy smelly cheese bocconcini danish
  • dit werkt niet bij vaste hoogtes van de parent

Verticaal — blok (2)

  • Een algemenere methode om blokken te positioneren, b.v. als de hoogte van de parent vast is en je dus geen padding kan gebruiken, is flexbox. Alvast een preview (voor meer zie volgend hoofdstuk): 
    .textblock {
  display: flex; /* layout content met flexbox */
  flex-direction: column; /* stapel verticaal */
  height: 200px;
  justify-content: center; /* zet elementen centraal */
  padding: 20px;
}
    <div id="textblock">
    <p> parmesan cheese slices when the cheese comes out everybody's happy cow cheese and wine cheese and biscuits. Roquefort when the cheese comes out everybody's happy smelly cheese bocconcini danish
    <p> bresaola shank pork loin landjaeger turducken sausage shoulder doner sirloin porchetta kielbasa pastrami pig ham leberkas turducken

CSS layout

Flexbox

Flexbox overzicht

  • Gebruik Flexbox om in een flex container een reeks flex children horizontaal of verticaal te schikken, met of zonder omloop (Engels: wrapping)
  • De beste tutorial op het web is dit overzicht op css-tricks.com
  • Flexbox heeft aparte CSS properties voor de container en de children. Voor bijna alle gevallen volstaan deze paar properties:
    container properties
    align-items: <flex-start|center|...> aligneer de children langs de dwarsas (rij: verticaal; kolom: horizontaal)
    display: flex maak deze container een flexbox
    flex-flow: <row|column> <wrap|nowrap>
    (combinatie van flex-direction en flex-wrap)     		schik de children in een rij of kolom, met of zonder omloop
    gap: <pixels> <pixels>
    (combinatie van row-gap en column-gap)     		tussenruimte in px
    justify-content: <flex-start|center|...> aligneer de children langs de hoofdas (rij: horizontaal, kolom: verticaal)

Horizontaal menu (1)

Horizontaal menu (2)

Horizontaal menu (3)

Rasterweergave (1)

  • Een rasterweergave is niet anders dan een horizontaal menu, maar dan met de flex-flow property van de container ingesteld op row wrap:

  • See the Pen CSS Course 03 flexbox grid by Rogier van der Linde (@rogiervanderlinde) on CodePen.

  • let er op dat de totale breedte klopt: 3 items * 32% + 2 gaps * 2% = 100%

Rasterweergave (2)

Kolommen (1)

  • Een 3-kolom layout is weer als een horizontaal menu, met de drie breedtes ingesteld (som moet zoals steeds 100% zijn) en align-items van de container ingesteld op stretch:

  • See the Pen CSS Course 03 flexbox 3-column by Rogier van der Linde (@rogiervanderlinde) on CodePen.

  • merk op hoe ook hier weer de calc() functie gebruikt is voor de tweede kolom

Kolommen (2)

  • Je kan in theorie zelfs de volgorde van de children veranderen met de order property:

  • See the Pen xQjMYd by Rogier van der Linde (@rogiervanderlinde) on CodePen.

  • ik zie niet direct een reden om dit te gebruiken

Pagina layout

Wanneer gebruiken

  • CSS Flexbox kan gebruikt worden voor elke één- of tweedimensionale layout, verticaal of horizontaal, met of zonder wrapping
  • Gebruik CSS Flexbox:
    • voor horizontale menus
    • voor kolommen
    • voor pagina layout
  • Gebruik CSS Flexbox niet:
    • voor fluïde designs met floating elementen waar CSS floats beter zijn
    • for tweedimensionale grid-achtige layouts kan je ook CSS Grid gebruiken

CSS layout

Floating

Standaard gedrag

Afbeeldingen floaten

Blocklevel floaten

Parent bleeding

Dit lijkt vreemd, maar eigenlijk is het niet onlogisch voor waar floating voor bedoeld was: tekst laten vloeien rond afbeeldingen. Het alternatief is een grote leegte tussen de twee paragrafen.

Parent herstellen

Clear

  • Je kan vermijden dat bepaalde elementen naast een gefloat element komen met clear (waarden left, right of both), bv. de tweede titel, die nu onder de afbeelding blijft:

  • See the Pen CSS Course 03 clear by Rogier van der Linde (@rogiervanderlinde) on CodePen.

Wanneer gebruiken

  • Vóór Flexbox algemeen ondersteund werd (lees: tot Internet Explorer verdween), werd float misbruikt voor alle layout (en velen doen het nog zo), maar vandaag beperk je het gebruik best waarvoor het bedoeld is.
  • Gebruik floating:
    • om tekst rond afbeeldingen te laten vloeien
    • voor pull quotes
  • Gebruik floating niet:
    • voor alle andere layout als pagina layout, menus enz...

CSS Positionering

[Positionering]

Startcode

Relatief

Absoluut (1)

Absoluut (2)

Fixed

Z-index

  • Neem dit voorbeeld met alle boxen absoluut gepositioneerd:
    • → alle boxen zijn uit hun parent gehaald, die leeg achterblijft
    • → de boxen zijn gepositioneerd relatief t.o.v. de parent, zelf gepositioneerd is met position: relative
    • → gebruik z-index om de stapelvolgorde te bepalen
    • → merk op dat je negatieve waarden kan gebruiken voor de coördinaten

  • See the Pen CSS Course 03 z-index by Rogier van der Linde (@rogiervanderlinde) on CodePen.

Wanneer gebruiken

  • Voor game programming, waar veel gewerkt wordt met layers (denk aan o.a. een bewegend object tegen een achtergrond), wordt positionering nog gebruikt, maar voor al de rest zijn er betere technieken als Flexbox of Grid, dus in deze cursus heb je positionering eigenlijk niet nodig.
  • Gebruik positionering:
    • voor HTML5 games waar je afbeeldingen moet kunnen stapelen
    • in zeldzame gevallen als een 'back to top' link
  • Gebruik positionering niet:
    • voor layout
    • om fouten te corrigeren

CSS layout

[Grid]

Grid overzicht

  • Gebruik Grid voor tweedimensionale layouts als item grids en pagina layout
  • De beste tutorial op het web is dit overzicht op css-tricks.com
  • In de meeste gevallen zit je goed met louter deze properties:
    container properties
    display: grid maak deze container een grid
    grid-template-columns definieer grid kolombreedtes
    grid-template-rows definieer grid rijhoogtes
    grid-template-areas creëer een gebied met een naam
    child properties
    grid-area: <area name> plaats een child in een gebied

Pagina layout 1

Pagina layout 2

Rasterweergave

Wanneer gebruiken

Odisee logo