Display-types

Hoe elementen in de viewport lopen


Komt elk element onder de andere,
of ernaast of op dezelfde regel?

naar de slides

De vorige les: div - padding - marge

Leerdoelen


block versus inline
  • Displaytypes inline, block en inline-block kennen
  • Display-type: flex en none kennen
  • floats en clear
  • overflow-eigenschap
  • herhaling boxmodel en padding
Legenda      
block inline inline-block

Vergelijk de volgende elementen



  •  

    p
    div
    h3
    header
    main
    li
    ul
    h1
  •  

    a
    span
    i
    strong
    em
  •  

    img
    button

Vergelijk de volgende elementen



  • block

    p
    div
    h3
    header
    main
    li
    ul
    h1
    ...
  • inline

    a
    span
    i
    strong
    em
  • inline-block

    img
    button

Eigenschappen van display-types



  • block

    • Neemt de HELE breedte van parent in
    • Start altijd op een nieuwe regel
       
    • Breedte & hoogte instelbaar
       
    • Padding instelbaar
       
  • inline

    • Gebruikt de benodigde breedte
       
    • Gaat door op huidige regel en bij een tekort naar de volgende regel
    • GEEN instelbare breedte & hoogte of padding;
    • Wel de regelhoogte instelbaar
       
  • inline-block

    • Neemt de benodigde breedte in
       
    • Gaat door op de huidige regel, en bij ongelijke hoogtes staan de elementen op de regel: de onderkanten zijn gelijk.
    • Breedte, hoogte en padding instelbaar.

Met CSS display-type wijzigen


Bovenstaand resultaat kun je krijgen met de volgende mark-up:

    <body>
        <nav>
            <ul>
                <li>home</li>
                <li>over ons</li>
                <li>openingstijden</li>
                <li>contact</li>
            </ul>
        </nav>
    </body> 

Een li element heeft display-type block;
Met display: inline-block;
verandert het display-type.
Klik maar op de CSS-code hieronder om dat te activeren/deactiveren.

Met CSS display-type wijzigen 2

Welkom op deze site.


Een a element heeft display-type inline;
Met display: block; verandert het display-type.
Klik maar op de CSS-code hieronder om dat te activeren/deactiveren.

Het resultaat hier linksboven kun je krijgen met de volgende mark-up met interne stijl:

<!DOCTYPE html>
<html>
    <head>
        <title>een voorbeeld van linkjes</title>
        <style>
        nav ul {
        list-style-type: none;
        margin: 0; padding: 0;
        }
        nav li {
            display: inline-block; 
        }
        nav a {
        width: 150px;
        padding: 12px 20px;
        text-align: center;
        background-color: #369; color: #ccc;
        </style>
    </head>
    <body>
        <nav>
        <ul>
            <li><a href="#">home</a></li>
            <li><a href="#">over ons</a></li>
            <li><a href="#">contact</a></li>
        </ul>
        </nav>
        Welkom op deze site
    </body>
</html>

Float en clear

Met float breng je een element naar de zijkant van zijn parent en laat je de daarop volgende mark-up er aan de andere kant langsstromen.

Met clear stopt het omstromen en begint de mark-up met een eigen blok.

experimenteer met
display, padding & marge en floats

display-type flex

Flex­box

patroontje een linkje (dus inline)

Een demo voor flexbox

  • display:flex; heeft betrekking op de childeren van het element.
    Dus niet op zichzelf zoals bij voorgaande display-types.
  • Pas flexbox toe op (de children van) het element
  • Flex-richting aanpassen
  • mag er bij een tekort aan ruimte naar een nieuwe regel?

opdracht

  • Ga naar de instructie waar je op 4 manieren probeert elementen naast elkaar te plaatsen.
  • Neem jouw oefening met het museum en breid deze uit met mark-up en styling, zoals dat op de instructievideo's is te zien.
  • update op GitHub
  • update jouw resultaat op hosts.ma-cloud.nl

Wat we gaan maken

naar de opdracht