HTML en CSS leren: Breedte en hoogte

Breedte, hoogte en overflow

Op Joliens grote scherm lopen de regels van het nieuws van links naar rechts, een halve meter lang. Op haar gsm moet ze dan weer opzij schuiven. Een vaste breedte past nooit overal.

Breed, maar niet te breed

Met width geef je een vak een breedte: in px, of in % van zijn ouder. Een vaste breedte in px is op een gsm vaak te breed: het vak steekt uit.

max-width zegt: nooit breder dan dit, maar wel smaller als er minder plaats is. max-width: 40rem houdt de regels leesbaar op een groot scherm, en past zich aan op een gsm.

Daarom is max-width de beste vriend van een tekstblok.

style.css

1.nieuws {2  max-width: 24rem;3}

klimzaal.example

Hoogte en overflow

Ook height bestaat, maar bij tekst is ze gevaarlijk. Komt er meer tekst dan er plaats is, dan loopt die gewoon uit het vak, over wat eronder staat.

Met overflow zeg je wat er dan gebeurt: visible (standaard) laat het uitlopen, hidden knipt het af, en auto geeft het vak een schuifbalk als het nodig is.

Meestal laat je de hoogte weg: dan groeit het vak mee met zijn inhoud.

style.css

1.nieuws {2  height: 120px;3  overflow: auto;4}

klimzaal.example

Probeer het zelf

Maak de hoofdinhoud (main) nooit breder dan 48rem, en geef het nieuwsblok (.nieuws) een hoogte van 160px, met een schuifbalk als de tekst niet past.

1/* Jouw CSS komt hier. */

1<!DOCTYPE html>2<html lang="nl">3  <head>4    <title>Klimzaal De Steile Wand</title>5    <link rel="stylesheet" href="basis.css">6    <link rel="stylesheet" href="style.css">7  </head>8  <body>9    <header>10      <img src="greep.svg" alt="" width="40" height="40">11      <h1>De Steile Wand</h1>12      <p class="slogan">Klimzaal in Ieper</p>13      <nav>14        <a href="index.html">Home</a>15        <a href="routes.html">Routes</a>16        <a href="prijzen.html">Prijzen</a>17        <a href="lessen.html">Lessen</a>18      </nav>19    </header>20    <main>21      <p class="melding">Zaterdag 12 april zijn we gesloten voor een wedstrijd.</p>22      <section class="kaarten">23        <article class="kaart">24          <h2>Dagkaart</h2>25          <p class="prijs">€ 14</p>26          <p>Klim de hele dag, zo lang je armen het volhouden.</p>27          <a class="knop" href="kopen.html">Kopen</a>28        </article>29        <article class="kaart">30          <h2>Tienbeurtenkaart</h2>31          <p class="prijs">€ 120</p>32          <p>Tien keer klimmen, een jaar geldig.</p>33          <a class="knop" href="kopen.html">Kopen</a>34        </article>35      </section>36      <section class="nieuws">37        <h2>Nieuws</h2>38        <p>In de boulderzaal hangen twaalf nieuwe routes, van groen tot zwart.</p>39        <p>Elke dinsdag is er een klimles voor beginners. Klimschoenen krijg je van ons.</p>40        <p>Op woensdagnamiddag klimmen de kinderen van de jeugdclub. Kom gerust eens kijken.</p>41      </section>42    </main>43    <footer>44      <p>Grepenstraat 7, 8900 Ieper</p>45    </footer>46  </body>47</html>

1body {2  margin: 0;3  font-family: system-ui, sans-serif;4  background: #eef3ee;5  color: #1f2a24;6}7header {8  padding: 16px;9  background: #2d6a4f;10  color: #ffffff;11}12header h1 {13  margin: 4px 0 0;14}15.slogan {16  margin: 0 0 8px;17}18nav a {19  color: #ffffff;20}21main {22  padding: 0 16px 24px;23}24.melding {25  background-color: #ffe8d6;26}27.kaart {28  padding: 0 16px;29  background: #ffffff;30}31.prijs {32  font-size: 1.5rem;33  font-weight: bold;34}35.knop {36  background-color: #e76f51;37  color: #ffffff;38  text-decoration: none;39}40.nieuws {41  background: #ffffff;42}43footer {44  padding: 12px 16px;45  background: #1b4332;46  color: #ffffff;47}

klimzaal.example

Klaar voor meer?

De volledige les heeft 4 oefeningen, van makkelijk naar uitdagend, met hints, punten en een reeks die je kan opbouwen.

Begin aan de les

Breed, maar niet te breed

Met width geef je een vak een breedte: in px, of in % van zijn ouder. Een vaste breedte in px is op een gsm vaak te breed: het vak steekt uit.

max-width zegt: nooit breder dan dit, maar wel smaller als er minder plaats is. max-width: 40rem houdt de regels leesbaar op een groot scherm, en past zich aan op een gsm.

Daarom is max-width de beste vriend van een tekstblok.

style.css

1.nieuws {2  max-width: 24rem;3}

klimzaal.example

Hoogte en overflow

Ook height bestaat, maar bij tekst is ze gevaarlijk. Komt er meer tekst dan er plaats is, dan loopt die gewoon uit het vak, over wat eronder staat.

Met overflow zeg je wat er dan gebeurt: visible (standaard) laat het uitlopen, hidden knipt het af, en auto geeft het vak een schuifbalk als het nodig is.

Meestal laat je de hoogte weg: dan groeit het vak mee met zijn inhoud.

style.css

1.nieuws {2  height: 120px;3  overflow: auto;4}

klimzaal.example

Probeer het zelf

Maak de hoofdinhoud (main) nooit breder dan 48rem, en geef het nieuwsblok (.nieuws) een hoogte van 160px, met een schuifbalk als de tekst niet past.

1/* Jouw CSS komt hier. */

1<!DOCTYPE html>2<html lang="nl">3  <head>4    <title>Klimzaal De Steile Wand</title>5    <link rel="stylesheet" href="basis.css">6    <link rel="stylesheet" href="style.css">7  </head>8  <body>9    <header>10      <img src="greep.svg" alt="" width="40" height="40">11      <h1>De Steile Wand</h1>12      <p class="slogan">Klimzaal in Ieper</p>13      <nav>14        <a href="index.html">Home</a>15        <a href="routes.html">Routes</a>16        <a href="prijzen.html">Prijzen</a>17        <a href="lessen.html">Lessen</a>18      </nav>19    </header>20    <main>21      <p class="melding">Zaterdag 12 april zijn we gesloten voor een wedstrijd.</p>22      <section class="kaarten">23        <article class="kaart">24          <h2>Dagkaart</h2>25          <p class="prijs">€ 14</p>26          <p>Klim de hele dag, zo lang je armen het volhouden.</p>27          <a class="knop" href="kopen.html">Kopen</a>28        </article>29        <article class="kaart">30          <h2>Tienbeurtenkaart</h2>31          <p class="prijs">€ 120</p>32          <p>Tien keer klimmen, een jaar geldig.</p>33          <a class="knop" href="kopen.html">Kopen</a>34        </article>35      </section>36      <section class="nieuws">37        <h2>Nieuws</h2>38        <p>In de boulderzaal hangen twaalf nieuwe routes, van groen tot zwart.</p>39        <p>Elke dinsdag is er een klimles voor beginners. Klimschoenen krijg je van ons.</p>40        <p>Op woensdagnamiddag klimmen de kinderen van de jeugdclub. Kom gerust eens kijken.</p>41      </section>42    </main>43    <footer>44      <p>Grepenstraat 7, 8900 Ieper</p>45    </footer>46  </body>47</html>

1body {2  margin: 0;3  font-family: system-ui, sans-serif;4  background: #eef3ee;5  color: #1f2a24;6}7header {8  padding: 16px;9  background: #2d6a4f;10  color: #ffffff;11}12header h1 {13  margin: 4px 0 0;14}15.slogan {16  margin: 0 0 8px;17}18nav a {19  color: #ffffff;20}21main {22  padding: 0 16px 24px;23}24.melding {25  background-color: #ffe8d6;26}27.kaart {28  padding: 0 16px;29  background: #ffffff;30}31.prijs {32  font-size: 1.5rem;33  font-weight: bold;34}35.knop {36  background-color: #e76f51;37  color: #ffffff;38  text-decoration: none;39}40.nieuws {41  background: #ffffff;42}43footer {44  padding: 12px 16px;45  background: #1b4332;46  color: #ffffff;47}

klimzaal.example