De page container

Het probleem

Open je site op een breed scherm en je ziet het meteen: de tekst loopt van de ene rand naar de andere. Een regel van tweehonderd tekens leest niemand. Maak je het venster smal, dan plakt de tekst tegen de rand.

Drie klachten tegelijk:

• de inhoud is te breed uitgesmeerd op een groot scherm 💩
• de inhoud plakt tegen de rand op een klein scherm 🤢
• de inhoud staat niet gecentreerd 🤮

De oplossing: container class

Je maakt één class, en die lost alle drie op.

1. Niet te breed

.container {
    max-width: 90rem;
}

max-width en niet width: is het venster smaller dan 90rem, dan krimpt de container gewoon mee. Is het breder, dan stopt hij bij 90rem.

Welke waarde je kiest, is een designkeuze. Vroeger was 80rem (1280px) gebruikelijk, tegenwoordig zie je vaker 90rem of meer.

o tempora, o mores

2. Gecentreerd

Je container is nu smaller dan het venster, maar hij plakt links. De overblijvende ruimte moet gelijk verdeeld worden over links en rechts, en dat doe je met auto.

Drie manieren om hetzelfde te schrijven:

.container { margin-left: auto; margin-right: auto; }  /* los */
.container { margin: 0 auto; }                         /* shorthand */
.container { margin-inline: auto; }                    /* logical */

De derde is de beste: korter dan de eerste, en in tegenstelling tot de tweede raakt hij je verticale marges niet aan.

3. Niet tegen de rand

Op een scherm smaller dan 90rem vult de container de volle breedte en plakt de tekst tegen de rand. Dat los je op met padding aan beide zijden.

.container { padding-left: 1rem; padding-right: 1rem; }  /* los */
.container { padding: 0 1rem; }                          /* shorthand */
.container { padding-inline: 1rem; }                     /* logical */

Samen

.container {
    max-width: 90rem;
    margin-inline: auto;
    padding-inline: 1rem;
}

Dat is het!

Drie regels. Die drie staan op elke site die je ooit zal bouwen.
Dus ook op zowat elke test die nog volgt... Het is zó belangrijk.

Waar zet je de class

Hier gaat het vaak mis. Je zet .container niet op je header, main en footer zelf, maar op een element binnenin.

<header>
    <div class="container">
        <nav>...</nav>
    </div>
</header>

<main>
    <div class="container">
        <h1>...</h1>
    </div>
</main>

<footer>
    <div class="container">
        <p>...</p>
    </div>
</footer>

De reden zie je zodra je je header een achtergrondkleur geeft. Staat de container op de header zelf, dan stopt die kleur bij 90rem en heb je witte stroken links en rechts. Staat hij erbinnenin, dan loopt de kleur door tot de schermrand terwijl de inhoud netjes gecentreerd blijft. Dat is wat je op zowat elke nieuwssite ziet.

Dit is waarvoor een div wél bedoeld is

Uit les 2: een div draagt geen betekenis en is je laatste keuze. Dit is precies het geval waarvoor hij bestaat: je hebt een extra laag nodig om iets te kunnen stylen, en er is geen semantisch element dat hier past.

Oefening: bouw de container

Openen in een nieuw tabblad

🙈 Antwoord

.container {
    max-width: 90rem;
    margin-inline: auto;
    padding-inline: 1rem;
}

En in de HTML een div met die class binnen de header, binnen de main en binnen de footer.

Zet je de class op de header zelf, dan stopt de donkere achtergrond bij 90rem. Dat is op een breed scherm meteen zichtbaar, en het is precies het verschil dat de opdracht vroeg.