Labo 4: container, nav en links

Doelen van de oefening

Na dit labo kan je:

box-sizing: border-box toepassen en uitleggen wat het verandert CORE_3.3
een page container maken met max-width, margin-inline en padding-inline CORE_3.6
uitleggen waarom de container binnen je landmarks staat en niet errond CORE_3.6
een navigatielijst opmaken en het klikbare oppervlak van een link vergroten CORE_4.2
uitleggen waarom verticale padding op een inline element niets lijkt te doen CORE_3.3
links opmaken in al hun toestanden, met een zichtbare focus CORE_4.2 CORE_7.1
pseudo-classes, combinators en attribute selectors gebruiken CORE_3.2
herbruikbare classes schrijven en ze stapelen CORE_3.2
afmetingen kiezen in rem, % en dvw/dvh CORE_3.5
herkennen wanneer verticale marges samenvallen CORE_3.3

Oplossing

Omschrijving

In dit labo bouw ik een oefenpagina met een page container in de header, main en footer. Daarna maak ik de navigatie en de links op, en oefen ik met geavanceerde selectors, herbruikbare classes en margin collapsing.

Antwoorden op de vragen

Waarom zet je de container binnen je landmarks?

De achtergrondkleur hoort bij de landmark, bijvoorbeeld de header, en moet tot aan de rand van het scherm doorlopen. Zet je de container op de header zelf, dan wordt de header maximaal 90rem breed en stopt de achtergrondkleur daar. Staat de container erbinnen, dan blijft de header over de volledige breedte gaan en wordt alleen de inhoud gecentreerd en begrensd.

Waarom doet verticale padding op een nav-link niets?

Een a is standaard een inline element. De padding boven en onder wordt wel getekend, maar telt niet mee voor de hoogte van de regel, dus de links schuiven niet uit elkaar en overlappen elkaar. Met display: block op de a wordt de link een blok, telt de verticale padding wel mee en wordt het klikbare oppervlak echt groter.

Focus en shift-tab

Met de tab-toets ga ik van link naar link, en dankzij de dotted outline zie ik altijd waar ik ben. Shift-tab doet hetzelfde in omgekeerde richting: de focus springt terug naar de vorige link.

Class of semantisch element?

Dezelfde opmaak krijg je ook met een element selector op strong of em. Een semantisch element kies je wanneer de tekst ook echt belangrijk is of klemtoon heeft, want dat vertelt iets aan screenreaders en zoekmachines. Een class kies je wanneer het alleen om het uitzicht gaat.

Margin collapsing

Mijn h2 heeft een margin-bottom van 3rem en de paragraaf eronder een margin-top van 2rem. In het Layout panel zit er tussen de twee maar 3rem (48px), en niet 5rem. Verticale marges van elementen die op elkaar volgen vallen samen: alleen de grootste van de twee blijft over.