04. CSS layout

Layout technieken overzicht

Je kan layouttechnieken onderverdelen in ruwweg 5 groepen:

• alignering: verzamelnaam voor reeks losse technieken voor horizontale en verticale alignering
• floating: gebruikt om content links of rechts rond een blok doen vloeien (bv. foto)
• flexbox: bedoeld voor layout op lijnen (horizontaal of verticaal)
• grid: bedoeld voor layout op een raster in rijen en kolommen
• positionering (fixed, sticky...): positionering in gestapelde lagen op basis van coördinaten; vooral geschikt voor Javascript games en enkele uitzonderlijke gevallen

Alignering

Standaard staat content linksboven gealigneerd:

<div class="container">
   <img src="img/04_layout/spongebob.webp" alt="">
   <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...</p>
</div>

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

horizontaal uitlijnen

Om inhoud (tekst, afbeeldingen enz...) horizontaal uit te lijnen, gebruik text-align op de parent:

<div class="container">
   <img src="img/04_layout/spongebob.webp" alt="">
   <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...</p>
</div>

.container {
   text-align: center; /* probeer ook left, right, justify */
}

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

centreren of rechts plaatsen

Om een content in het midden of rechts te plaatsen, zet je het typisch in een <div class="wrapper">, en gebruik je margin-left: auto en/of margin-right: auto:

<div class="container">
   <div class="wrapper">					
      <img src="img/04_layout/spongebob.webp" alt="">
      <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...</p>
   </div>	  
</div>

.wrapper {
   background-color: #cccc;					
   margin-left: auto;
   margin-right: auto; /* probeer ook 0px */
   padding: 10px;
   width: 300px;
}

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

verticaal centreren

Als de hoogte van de container flexibel is, kan je de alle content verticaal visueel in het midden krijgen met gelijke padding boven en onder op de parent:

<div id="container">
   <img src="img/04_layout/spongebob.webp" alt="">
   <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...</p>
</div>

.container {
   padding-bottom: 50px; 
   padding-top: 50px; 
}

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 lukt uiteraard niet als de container een vaste hoogte heeft. De mogelijkheden zijn dus beperkt: voor verfijndere layouts gebruik je flexbox of grid.

<a href="">button tekst </a>

/* button layout */
.button {
   box-sizing: content-box; /* afmetingen zijn voor content bedoeld */
   display: block; /* anders kan je geen afmetingen instellen */
   height: 60px; /* zelfde waarde */
   line-height: 60px; /* zelfde waarde */
   text-align: center; /* centreer horizontaal */
   white-space: nowrap; /* vermijd line breaks */
   width: 120px;
}

/* button styling */
.button {
   background-color: beige;
   border: 2px solid #ccc;
   cursor: pointer;
}

Floating

Standaard weergave

Blocklevel elementen als <h3> en <p> starten standaard op een nieuwe regel:

<div id="wrapper">
  <section>
    <img src="img/04_layout/portrait.jpg" alt="foto">
    <h3>Procured</h3>
    <p>Civility not absolute put continue. Overcame breeding or my concerns removing desirous so absolute. My melancholy unpleasing imprudence considered in advantages so impression. Almost unable put piqued talked likely houses her met.</p>
  </section>
</div>

Procured

Civility not absolute put continue. Overcame breeding or my concerns removing desirous so absolute. My melancholy unpleasing imprudence considered in advantages so impression. Almost unable put piqued talked likely houses her met.

Floaten

Met float: left; kan je blocklevel elementen rond een afbeelding laten vloeien:

img {
   float: left; /* probeer ook float: right; */
   margin: 0 10px 10px 0; /* werk af met margin rechtsonder */
}

Procured

Civility not absolute put continue. Overcame breeding or my concerns removing desirous so absolute. My melancholy unpleasing imprudence considered in advantages so impression. Almost unable put piqued talked likely houses her met.

Dit werkt ook met andere block-elementen als pullquotes:

<section>
  <h3>Procured</h3>
  <p> Civility not absolute put continue. Overcame breeding or my concerns removing desirous so absolute. My melancholy unpleasing imprudence considered in advantages so impression. My melancholy unpleasing imprudence considered in advantages so impression.</p>
  <aside>
    spoke as as other again ye; Hard on to roof he drew
  </aside>
  <p>Her are its honoured drawings nor. Pretty see mutual thrown all not edward ten. Particular an boisterous up he reasonably frequently. Several any had enjoyed shewing studied two. Up intention remainder sportsmen behaviour ye happiness. Few again any alone style added abode ask. Nay projecting unpleasing boisterous eat discovered solicitude. Own six moments produce elderly pasture far arrival. Hold our year they ten upon. Gentleman contained so intention sweetness in on resolving.</p>
</section>

aside {
   float: right;
   margin: 10px 0 10px 10px;
   width: 130px;
}

Parent bleeding

Als een gefloat element niet meer in de parent past, zal het eruit lekken en de content van het volgende blok wegdrukken:

<div id="wrapper">
  <section>
    <img src="img/04_layout/portrait.jpg" alt="foto">
    <h3>Procured</h3>
    <p>Civility not absolute put continue. Overcame breeding or my concerns removing desirous so absolute. </p>
  </section>
  <section>
    <h3>Finished</h3>
    <p>Her are its honoured drawings nor. Pretty see mutual thrown all not edward ten. Particular an boisterous up he reasonably frequently. Several any had enjoyed shewing studied two. Up intention remainder sportsmen behaviour ye happiness. Few again any alone style added abode ask.</p>
  </section>
</div>

img {
  float: left;
  margin-right: 10px;
  width: 160px;
}

Procured

Civility not absolute put continue. Overcame breeding or my concerns removing desirous so absolute.

Finished

Her are its honoured drawings nor. Pretty see mutual thrown all not edward ten. Particular an boisterous up he reasonably frequently. Several any had enjoyed shewing studied two. Up intention remainder sportsmen behaviour ye happiness. Few again any alone style added abode ask.

Dit lijkt vreemd, maar eigenlijk is het niet onlogisch voor waar floating voor bedoeld is: tekst laten vloeien rond afbeeldingen. Het alternatief is een grote leegte tussen de twee paragrafen. Als je niet wil, kan je de parent herstellen met overflow: hidden;:

/* vermijd parent bleeding */
section {
   overflow: hidden;
}

img {
  float: left;
  margin-right: 10px;
  width: 160px;
}

Procured

Civility not absolute put continue. Overcame breeding or my concerns removing desirous so absolute.

Finished

Her are its honoured drawings nor. Pretty see mutual thrown all not edward ten. Particular an boisterous up he reasonably frequently. Several any had enjoyed shewing studied two. Up intention remainder sportsmen behaviour ye happiness. Few again any alone style added abode ask.

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:

/* clear tweede titel */
#sect2 h3 {
  clear: left;
}

img {
  float: left;
  margin-right: 10px;
  width: 160px;
}

Procured

Civility not absolute put continue. Overcame breeding or my concerns removing desirous so absolute.

Finished

Her are its honoured drawings nor. Pretty see mutual thrown all not edward ten. Particular an boisterous up he reasonably frequently. Several any had enjoyed shewing studied two. Up intention remainder sportsmen behaviour ye happiness. Few again any alone style added abode ask.

Flexbox

Met flexbox kan je een reeks children, de flex items, schikken in een parent, de flex container. Het meest complete overzicht op het net vind je op https://css-tricks.com/snippets/css/a-guide-to-flexbox/.

overzicht properties

De CSS properties voor de flex container:

De CSS properties voor het flex item:

Voor de verdere uitleg starten we van een container van 300px hoog, padding 20px (het paarse gebied) met 10 items van afwisselende afmetingen. De standaard weergave, zonder layout:

<div class="flex-container">
   <div class="flex-item">01</div>
   <div class="flex-item">02</div>
   <div class="flex-item">03</div>
   <div class="flex-item">04</div>
</div>

display

Met display: flex maak je van de container een flex container. Ze komen standaard op één rij, verticaal uitgerokken:

.flex-container {
   display: flex; /* maak flex container */
}

align-items

Lijn items verticaal uit met align-items, b.v. center:

.flex-container {
   display: flex;
   align-items: center; /* probeer ook start, end... */
}

gap

Geef ruimte tussen kolommen/rijen met gap, b.v. 10px:

.flex-container {
   display: flex;
   align-items: center;
   gap: 10px; /* tussenruimte */
}

justify-content

Lijn de items horizontaal uit met justify-content, b.v. space-between (zo ver mogelijk uit elkaar):

.flex-container {
   align-items: center;
   display: flex;
   /* gap: 10px; -> dit heeft geen effect meer */
   justify-content: space-between; /* probeer ook end, ... */
}

flex-direction

Zet items in een kolom i.p.v. rij met flex-direction: column:

.flex-container {
   align-items: center;
   display: flex;
   gap: 10px;
   flex-direction: column; /* zet verticaal */
}

flex-wrap

Heb je veel items, dan kan je ze in meerdere rijen (of kolommen) zetten met flex-wrap: wrap:

.flex-container {
   align-items: center;
   display: flex;
   gap: 10px;
   flex-wrap: wrap; /* meerdere rijen */
}

align-self

Aligneer een individueel item met align-self:

.flex-container {
   align-items: center;
   display: flex;
   gap: 10px;
}
.flex-item:nth-child(3) {
   align-self: start; /* plaats het derde item bovenaan */
}

flex

De flex property duidt de breedte van een item aan. De vorm is flex: flex-grow flex-shrink flex-basis.

• flex-grow: hoeveel het item kan groeien als ruimte over is
• flex-shrink: hoeveel het item kan krimpen als ruimte te kort is
• flex-basis: initiële breedte

Er zijn veel mogelijkheden, maar in praktijk volstaan deze waarden in 99% van de gevallen (te onthouden!):

Voorbeeld 1: vaste kolommen links en rechts, flexibele kolom in het midden

.flex-item:nth-child(1) { flex: 0 0 80px; }
.flex-item:nth-child(2) { flex: 1; }
.flex-item:nth-child(3) { flex: 0 0 120px; }
.flex-container {
   display: flex;
   gap: 10px;
}

/* box styles */
.flex-item {
   background-color: #ddd;
   border: 2px solid black;
   font-size: 10px;
   text-align: center;
}

.flex-container {
   background-color: #ddf;
   border: 1px dotted black;
   height: 200px;
   padding: 20px;
   width: 450px;
}

Voorbeeld 2: passende kolom, dubbele kolom en normale kolom

.flex-item:nth-child(1) { flex: 0 0 auto; }
.flex-item:nth-child(2) { flex: 2; }
.flex-item:nth-child(3) { flex: 1; }
.flex-container {
   display: flex;
   gap: 10px;
}

/* box styles */
.flex-item {
   background-color: #ddd;
   border: 2px solid black;
   font-size: 10px;
   text-align: center;
}

.flex-container {
   background-color: #ddf;
   border: 1px dotted black;
   height: 200px;
   padding: 20px;
   width: 510px;
}

Grid

Met grid kan je een reeks children, de grid items, schikken met rijen en kolommen in een raster, de grid container. Het meest complete overzicht vind je op https://css-tricks.com/snippets/css/complete-guide-grid/. Om het overzichtelijk te houden behandelen we niet alles van CSS Grid. Dit betekent ook dat wat niet in de cursus staat, mag je niet gebruiken in dit vak (dit is een algemene regel trouwens).

overzicht properties

De CSS properties voor de grid container:

De CSS properties voor grid items:

We starten van een container van 250px hoog, padding 20px, met 5 items. De standaard weergave, zonder layout:

<div class="grid-container">
   <div class="grid-item item1">01</div>
   <div class="grid-item item2">02</div>
   <div class="grid-item item3">03</div>
   <div class="grid-item item4">04</div>
   <div class="grid-item item5">05</div>
</div>

display: grid

Met display: grid maak je van de container een grid container. Standaard is er één kolom, en worden rijen aangemaakt zolang nodig, netjes verdeeld over de beschikbare hoogte:

.grid-container {
   display: grid; /* maak grid container */
}

Merk op: items worden standaard cel per cel geplaatst in rijen.

gap

Net zoals bij flexbox, kan je tussenruimte maken met gap:

.grid-container {
   display: grid;
   gap: 10px;  /* 10px tussenruimte */
}

grid-template-columns, grid-template-rows

Hiermee definieer je de kolommen en rijen; items worden geplaatst rij per rij. Voorbeeld met drie kolommen (eerste vast, rest flexibel) en twee rijen (eerste passend, tweede flexibel):

.grid-container {
   display: grid; 
   gap: 10px;
   grid-template-columns: 100px 2fr 1fr;  /* drie kolommen */
   grid-template-rows: auto 1fr 1fr;  /* drie rijen */
}

Items worden rij per rij worden. De laatste rij is leeg omdat er geen items meer over zijn.

grid-row, grid-column

We kunnen individuele items over n1 rijen en/of n2 kolommen spannen met grid-column: span n1 en/of grid-row: span n2.

.item4 {
   grid-row: span 2; /* twee kolommen */
}
.item5 {
   grid-column: span 2; /* twee rijen */
}
.grid-container {
   display: grid; 
   gap: 10px;
   grid-template-columns: 100px 2fr 1fr;  /* drie kolommen */
   grid-template-rows: 50px 1fr 1fr;  /* drie rijen */
}

.item4 {
   grid-row: 2 / 4; /* tussen rijlijnen 2 en 4 */
}
.item5 {
   grid-column: 2 / 4; /* tussen kolomlijnen 2 en 4 */
}
.grid-container {
   display: grid; 
   gap: 10px;
   grid-template-columns: 100px 2fr 1fr;  /* drie kolommen */
   grid-template-rows: 50px 1fr 1fr;  /* drie rijen */
}

align-self, justify-self

We kunnen individuele items verticaal of horizontaal uitlijnen (centreren, uitrekken, aan het einde...) in hun cel met align-self resp. justify-self. Zetten we b.v. het vijfde item rechts midden:

.item5 {
   align-self: center; /* probeer ook end, start, stretch */				
   justify-self: end; /* probeer ook center, start, stretch */					
   grid-column: span 2; /* overspan twee kolommen */
   padding: 5px 10px;
}
.grid-container {
   display: grid; 
   gap: 10px;
   grid-template-columns: 100px 2fr 1fr;  /* drie kolommen */
   grid-template-rows: 50px 1fr 1fr;  /* drie rijen */
}

Eenheden px, fr, auto

Overzicht van de belangrijkste gebruikte eenheden en hun betekenis:

eenheden voorbeeld 1

Voor de duidelijkheid nemen we 5 kolommen, 1 rij.
Een voorbeeld met 1fr 1fr 1fr 100px 100px, dus drie gelijke flexibele kolommen en twee vaste van 100px:

.grid-container {
   display: grid; /* maak grid container */
   gap: 10px;
   grid-template-columns: 1fr 1fr 1fr 100px 100px; 
}

eenheden voorbeeld 2

Voorbeeld met 100px 2fr 1fr 100px auto, dus een vaste 100px kolom, één van dubbele breedte, één enkele breedte, weer een vaste 100px kolom, en een kolom passend voor de inhoud:

.grid-container {
   display: grid; /* maak grid container */
   gap: 10px;
   grid-template-columns: 100px 2fr 1fr 100px auto;
}

.grid-container {
   display: grid; /* maak grid container */
   gap: 10px;
   grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

Flexbox of Grid?

Flexbox en Grid zijn vaak inwisselbaar; meestal kun je een layoutkwestie zowel met het ene als met het andere oplossen. Vuistregel:

• is de layout op één lijn (horizontaal menu, verticale sociale media iconen...)? gebruik dan flexbox
• is de layout in kolommen en/of rijen (pagina layout, fotogallerij...)? gebruik dan grid

Voorbeeld 1: horizontaal menu — Flexbox

Een typisch menu is een layout op één lijn, dus flexbox:

<ul class="hormenu">
   <li><a href="#">home</a></li>
   <li><a href="#">products</a></li>
   <li><a href="#">about</a></li>
   <li><a href="#">contact</a></li>
</ul>

.hormenu {
   display: flex;
   gap: 10px;
   list-style: none;
}

Voorbeeld 2: header layout — Flexbox

Een typische header layout heeft logo links en menu rechts, op één lijn, dus flexbox:

<header>
   <a href=""><img src="img/logo.jpg" alt="logo"></a>
   <nav>...</nav>
</header>

header {
   display: flex;
   justify-content: space-between;
}

Voorbeeld 3: content kolommen — grid

Kolommen staat naast elkaar, op één lijn, dus technisch kan flexbox:

<main>
   <div class="main__content"></div>
   <aside>...</aside>
</main>

main {
   display: flex;
   gap: 20px;
}
.main__content {
   flex: 1;
}
aside {
   flex: 0 0 200px;
}

In praktijk is kolommen met grid maken makkelijker:

main {
   display: grid;
   gap: 20px;
   grid-template-columns: 1fr 200px;
}

Voorbeeld 4: formulier — Grid

Een formulier heeft rijen en kolommen, dus grid is aangewezen. De HTML en CSS:

<form>
    <label for="login">Login:</label>
    <input type="text" id="login" required>
    <label for="pw">Password:</label>
    <input type="password" id="pw" required>
    <label for="message">Message:</label>
    <textarea id="message"></textarea>
    <button type="submit">Submit</button>
</form>

form {
   display: grid;
   gap: 10px;
   grid-template-columns: 120px 1fr;
   grid-template-rows: auto auto 100px 1fr;
}
/* button rechstonder plaatsen */
button[type=submit] {  
   grid-column: span 2;
   justify-self: end; 
}

Voorbeeld 5: foto gallerij — Grid

<figure id="gallery">
   <img src="img/foto01.jpg" alt="">
   <img src="img/foto02.jpg" alt="">
   <img src="img/foto03.jpg" alt="">
   <img src="img/foto04.jpg" alt="">
   <img src="img/foto05.jpg" alt="">
   <img src="img/foto06.jpg" alt="">
   <img src="img/foto07.jpg" alt="">
</figure>

Maak gewoon het aantal gewenste kolommen:

#gallery {
   display: grid;
   gap: 10px;
   grid-template-columns: 1fr 1fr 1fr;
}

Je kan zelfs een volledig responsive gallery maken met deze CSS grid code (hoef je niet van buiten te kennen):

#gallery {
   display: grid;
   gap: 10px;
   grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}

Bekijk de demo, maak het browservenster smaller en kijk wat gebeurt.

Positionering

<div class="demowrapper">
   <div class="demobox demobox1">1</div>
   <div class="demobox demobox2">2</div>
   <div class="demobox demobox3">3</div>
</div>

<div class="demowrapper">
   <div class="demobox demobox1">1</div>
   <div class="demobox demobox2">2</div>
   <div class="demobox demobox3">3</div>
</div>

.demobox2 {
   position: relative;
   left: 10px; /* verschuif 10px naar rechts */
   top: 20px; /* verschuif 20px naar beneden */
}

<div class="demowrapper">
   <div class="demobox demobox1">1</div>
   <div class="demobox demobox2">2</div>
   <div class="demobox demobox3">3</div>
</div>
            

.demobox2 {
   position: absolute;
   left: 5px; /* 5px vanaf links */
   top: 5px; /* 5px vanaf boven */
}

<div class="demowrapper">
   <div class="demobox demobox1">1</div>
   <div class="demobox demobox2">2</div>
   <div class="demobox demobox3">3</div>
</div>
            

/* relative positioning */
.demobox2 {
   position: absolute;
   bottom: 10px; /* 10px vanaf beneden */
   right: 10px; /* 10px vanaf rechts */
}

<div class="demowrapper">
   <div class="demobox demobox1">1</div>
   <div class="demobox demobox2">2</div>
   <div class="demobox demobox3">3</div>
</div>

/* absoluut-relative positioning */
.demowrapper {
   position: relative; /* nieuwe referentie voor coördinaten */
}

.demobox2 {
   position: absolute;
   left: 5px; /* 5px vanaf links */
   top: 5px; /* 5px vanaf boven */
}

<div class="overlay"><h2>OVERLAY CONTENT HIER</h2></div>
<p>Wij zin rijken ruimer zekere. Loopbaan een district bordeaux mag bevreesd heb. Inkomsten op af singapore behoeften. Het brengen den gedaald menigte markten evenals javanen. Ontwouding middellijn nu geruineerd ptolomaeus denzelfden in handelaars. Vrij in nu kilo west. Wieschen vermengd verbouwd zou was die verschil het geheelen voorzien. </p>
<p>Gebrek loopen kan zee zit andere ton levert zeggen zonder. Rook zoo twee zee hen maal. Wantrouwen ons tot inboorling nog doorzoeken.</p>

/* absolute positioning */
.overlay {
   /* maak overlay */
   background-color: #888c;
   position: absolute;
   bottom: 20px; /* 10px vanaf beneden */
   left: 30px; /* 10px vanaf links */
   right: 30px; /* 10px vanaf rechts */
   top: 20px; /* 10px vanaf boven */
}
.overlay  h2 {
   color: white;
   padding: 20px;
   text-align: center;
}

<div class="demobox demobox1">1</div>
<div class="demobox demobox2">2</div>
<div class="demobox demobox3">3</div>
<p>Wij zin rijken ruimer zekere. Loopbaan een district bordeaux mag bevreesd heb. Inkomsten op af singapore behoeften. Het brengen den gedaald menigte markten evenals javanen. Ontwouding middellijn nu geruineerd ptolomaeus denzelfden in handelaars. Vrij in nu kilo west. Wieschen vermengd verbouwd zou was die verschil het geheelen voorzien. </p>
<p>Gebrek loopen kan zee zit andere ton levert zeggen zonder. Rook zoo twee zee hen maal. Wantrouwen ons tot inboorling nog doorzoeken.</p>

/* stapelvolgorde */
.demobox1 {
   z-index: 2; 
}
.demobox2 {
   z-index: -3; /* negatief: onder normale content */
}
.demobox3 {
   z-index: 4;
}

/* absoluut-relatieve positionering */
.demowrapper {
   position: relative;
}
.demobox1 {
   position: absolute;
   left: 25px;
   top: 60px;
}
.demobox2 {
   position: absolute;
   left: 65px;
   top: 65px;
}
.demobox3 {
   left: 45px;
   top: 35px;
   position: absolute;
}

Fixed

De fixed positionering fixeert een element op de pagina, onafhankelijk van het scrollen:

<p>(scroll this page)</p>
<p>Folly words widow one downs few age every seven. If miss part by fact he park just shew. Discovered had get considered projection who favourable. Necessary up knowledge it tolerably. Unwilling departure education is be dashwoods or an. Use off agreeable law unwilling sir deficient curiosity instantly. Easy mind life fact with see has bore ten. Parish any chatty can elinor direct for former. Up as meant widow equal an share least. </p>
<p>Examine she brother prudent add day ham. Far stairs now coming bed oppose hunted become his. You zealously departure had procuring suspicion. Books whose front would purse if be do decay. Quitting you way formerly disposed perceive ladyship are. Common turned boy direct and yet. </p>
<p>Ye on properly handsome returned throwing am no whatever. In without wishing he of picture no exposed talking minutes. Curiosity continual belonging offending so explained it exquisite. Do remember to followed yourself material mr recurred carriage. High drew west we no or at john. About or given on witty event. Or sociable up material bachelor bringing landlord confined. Busy so many in hung easy find well up. So of exquisite my an explained remainder. Dashwood denoting securing be on perceive my laughing so.</p>
<a id="toplink" href="#top">back to top ↑</a>

#toplink {
  /* add fixed top link */
  position: fixed;
  right: 10px;
  bottom: 10px;
  /* colors & borders */
  background-color: #ddd;
  border: 2px solid black;
  padding: 5px 10px;
}

Sticky

De sticky positionering scrollt tot een gegeven offset bereikt is, waarna het blijft plakken.

<p>(scroll this page)</p>
<div id="sticky">I am sticky!</div>
<p>Folly words widow one downs few age every seven. If miss part by fact he park just shew. Discovered had get considered projection who favourable. Necessary up knowledge it tolerably. Unwilling departure education is be dashwoods or an. Use off agreeable law unwilling sir deficient curiosity instantly. Easy mind life fact with see has bore ten. Parish any chatty can elinor direct for former. Up as meant widow equal an share least. </p>
<p>Examine she brother prudent add day ham. Far stairs now coming bed oppose hunted become his. You zealously departure had procuring suspicion. Books whose front would purse if be do decay. Quitting you way formerly disposed perceive ladyship are. Common turned boy direct and yet. </p>
<p>Ye on properly handsome returned throwing am no whatever. In without wishing he of picture no exposed talking minutes. Curiosity continual belonging offending so explained it exquisite. Do remember to followed yourself material mr recurred carriage. High drew west we no or at john. About or given on witty event. Or sociable up material bachelor bringing landlord confined. Busy so many in hung easy find well up. So of exquisite my an explained remainder. Dashwood denoting securing be on perceive my laughing so.</p>

#sticky {
   /* make sticky */
   position: sticky;
   top: 0; /* stick to top */
   /* colors & borders */
   background-color: #cae8ca;
   border: 2px solid #4CAF50;
   color: inherit;
   padding: 5px 10px;
   text-decoration: none;
}

Layout case study

We bekijken een samenvattend voorbeeld. Resultaat:

We gebruiken:

• CSS Flexbox voor de header en nav
• CSS Grid voor de algemene pagina layout (rijen voor header, nav, main en footer) en de twee content kolommen

De HTML en CSS (enkel layoutcode):

<body>
   <header>
      <h1 class="header_logo">Logo</h1>
      <p class="header_tagline">some great tagline</p>
      <form class="header_search">
         <label><input type="search" placeholder="search for something"></label>
         <button type="submit">🔍</button>
      </form>
   </header>
   <nav>
      <ul>
         <li><a href="">home</a></li>
         <li><a href="">about</a></li>
         <li><a href="">contact</a></li>
      </ul>
   </nav>
   <main>
      <div id="content">
         content here...
      </div>
      <aside>
         aside here...
      </aside>
   </main>
   <footer>
      <p>© 2024</p>
   </footer>
</body>

/* body layout */
body {
   display: grid; /* maak grid */
   grid-template-rows: auto auto 1fr auto; /* vier rijen */
   margin: 0 auto; /* centreer body */
   max-width: 1000px; /* maximaal 1000px breed */
   min-height: 100vh; /* bedek minstens hele viewport */
}

/* header layout */
header {
   align-items: center; /* items verticaal centreren */
   display: flex;
   justify-content: space-between; /* zo ver mogelijk uit elkaar */
   min-height: 150px;
}

.header_logo {
   flex: 0 0 100px;
}

.header_tagline {
   flex: 1;
}

.header_search {
   align-self: end; /* zet zichzelf beneden */
   flex: 0 0 auto;
}

/* nav layout */
nav ul {
   display: flex;
   gap: 10px; /* ruimte tussen items */
   justify-content: center; /* items in het midden */
}

/* main layout */
main {
   display: grid;
   grid-template-columns: 1fr 200px;
}

/* footer layout */
footer {
   text-align: center;
}

Je herkent volgende technieken:

• body
  • vier rijen met display: grid; grid-template-rows: auto auto 1fr auto;
  • horizontaal gecentreerd in de pagina met max-width: 1000px; margin: 0 auto;
  • verticaal over de browser viewport uitgerokken met min-height: 100vh
• header
  • horizontale layout met display: flex
  • items verticaal gecentreerd met align-items: center
  • items zo ver mogelijk uit elkaar met justify-content: space-between
  • logo vaste breedte met flex: 0 0 100px
  • tagline variabele breedte met flex: 1
  • zoekformulier vaste breedte met flex: 0 0 220px
  • zoekformulier onderaan geplaatst met align-self: end
• nav
  • horizontale layout met display: flex
  • items gecentreerd met justify-content: center
  • ruimte tussen items met gap: 10px
• main
  • grid layout met display: grid
  • twee kolommen met grid-template-columns: 1fr 100px
• footer
  • tekst gecentreerd met text-align: center