Deel 11: Layout technieken

Web Design

Table layout

Layout technieken

Table layout

Table layouts werden gebruikt om een layout te bepalen sinds 1993.

Float layout

Layout technieken

Float layout

Vanaf 1999 was "floating" de manier tot om een layout te bepalen voor webpagina's.

(Nu is dit echter nog maar voor enkele use-cases in gebruik)

Float layout

Float is een CSS property die letterlijk vertaald -- drijven -- betekent.

Float layout

<img class="first-image" src="img.png" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean volutpat eleifend augue. Aliquam fermentum fringilla pretium. Phasellus rutrum nibh sed orci rutrum varius. Sed mauris felis, viverra consectetur maximus non, dignissim sit amet ligula. Aliquam tempus sodales neque nec rhoncus. Ut eleifend interdum vehicula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut ante leo, blandit eu auctor vel, dapibus vitae purus. Pellentesque vulputate neque sit amet felis feugiat, congue egestas nunc ullamcorper. Nulla elementum arcu mi, id scelerisque lectus consequat a. Nam a ornare neque, eu porttitor nunc. Etiam mattis augue nibh, id aliquam libero varius id. Sed porta lobortis facilisis. Sed hendrerit lobortis varius. Ut ligula massa, laoreet vel gravida id, laoreet non sem. Nullam volutpat, leo at tempor feugiat, elit lorem maximus orci, in varius velit justo sit amet lacus. Nunc pulvinar erat sed malesuada consequat. Phasellus ultricies ac mi id efficitur. Morbi egestas hendrerit est nec semper. Proin id dapibus libero. Nam ullamcorper imperdiet tincidunt. Ut metus diam, auctor non nibh at, ullamcorper elementum nisl. Vestibulum arcu ex, tincidunt vitae turpis sit amet, volutpat dignissim nisi. Praesent rhoncus nibh eget lorem condimentum tristique. Cras lobortis pulvinar interdum. In tincidunt ornare quam, a malesuada felis porttitor eget. Etiam vel metus quam. Donec lobortis iaculis molestie. Proin euismod scelerisque sollicitudin. Proin non nunc enim. Cras aliquam velit lobortis lobortis tristique. Etiam scelerisque, massa eu pellentesque ullamcorper, mauris dui condimentum mauris, sed auctor orci nisi nec lacus. Donec condimentum pretium neque id consequat. Aliquam commodo ullamcorper ipsum, quis feugiat dui interdum id. Pellentesque lacinia semper massa, et porttitor metus luctus congue. Phasellus auctor, massa vitae lacinia pulvinar, justo sapien ultrices dolor, ac molestie nibh justo vel orci. Nunc et lorem sed nisi cursus semper vel tincidunt lectus. Sed molestie ipsum nec dolor pharetra, id interdum quam accumsan. Ut fringilla interdum elit, vel porta erat varius semper. Cras tempor et lectus nec ultrices. Pellentesque fermentum mattis ipsum ac iaculis. Vestibulum ullamcorper sem non diam vestibulum aliquam. Praesent quis fermentum purus. Praesent ut lectus et ante egestas commodo. Sed eu tortor eros. Maecenas molestie, ligula in pharetra ultrices, nunc leo dapibus sapien, sit amet auctor velit felis non erat. Nulla dolor velit, rhoncus sit amet elit ut, fermentum rhoncus libero. Nulla erat ligula, aliquet vehicula sagittis id, consequat eu nisl. Nullam vehicula sapien et magna aliquam scelerisque. Donec rutrum commodo massa lobortis sodales. Ut a dignissim eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla facilisi. Quisque consectetur velit id mi consectetur suscipit. Nulla mauris neque, sollicitudin ac quam ac, lobortis placerat nisl. Morbi laoreet nulla ac lectus dictum, non finibus nulla ultrices. Nulla facilisi. Suspendisse non mi nibh.</p>
<img class="second-image" src="img.png" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean volutpat eleifend augue. Aliquam fermentum fringilla pretium. Phasellus rutrum nibh sed orci rutrum varius. Sed mauris felis, viverra consectetur maximus non, dignissim sit amet ligula. Aliquam tempus sodales neque nec rhoncus. Ut eleifend interdum vehicula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut ante leo, blandit eu auctor vel, dapibus vitae purus. Pellentesque vulputate neque sit amet felis feugiat, congue egestas nunc ullamcorper. Nulla elementum arcu mi, id scelerisque lectus consequat a. Nam a ornare neque, eu porttitor nunc. Etiam mattis augue nibh, id aliquam libero varius id. Sed porta lobortis facilisis. Sed hendrerit lobortis varius. Ut ligula massa, laoreet vel gravida id, laoreet non sem. Nullam volutpat, leo at tempor feugiat, elit lorem maximus orci, in varius velit justo sit amet lacus. Nunc pulvinar erat sed malesuada consequat. Phasellus ultricies ac mi id efficitur. Morbi egestas hendrerit est nec semper. Proin id dapibus libero. Nam ullamcorper imperdiet tincidunt. Ut metus diam, auctor non nibh at, ullamcorper elementum nisl. Vestibulum arcu ex, tincidunt vitae turpis sit amet, volutpat dignissim nisi. Praesent rhoncus nibh eget lorem condimentum tristique. Cras lobortis pulvinar interdum. In tincidunt ornare quam, a malesuada felis porttitor eget. Etiam vel metus quam. Donec lobortis iaculis molestie. Proin euismod scelerisque sollicitudin. Proin non nunc enim. Cras aliquam velit lobortis lobortis tristique. Etiam scelerisque, massa eu pellentesque ullamcorper, mauris dui condimentum mauris, sed auctor orci nisi nec lacus. Donec condimentum pretium neque id consequat. Aliquam commodo ullamcorper ipsum, quis feugiat dui interdum id. Pellentesque lacinia semper massa, et porttitor metus luctus congue. Phasellus auctor, massa vitae lacinia pulvinar, justo sapien ultrices dolor, ac molestie nibh justo vel orci. Nunc et lorem sed nisi cursus semper vel tincidunt lectus. Sed molestie ipsum nec dolor pharetra, id interdum quam accumsan. Ut fringilla interdum elit, vel porta erat varius semper. Cras tempor et lectus nec ultrices. Pellentesque fermentum mattis ipsum ac iaculis. Vestibulum ullamcorper sem non diam vestibulum aliquam. Praesent quis fermentum purus. Praesent ut lectus et ante egestas commodo. Sed eu tortor eros. Maecenas molestie, ligula in pharetra ultrices, nunc leo dapibus sapien, sit amet auctor velit felis non erat. Nulla dolor velit, rhoncus sit amet elit ut, fermentum rhoncus libero. Nulla erat ligula, aliquet vehicula sagittis id, consequat eu nisl. Nullam vehicula sapien et magna aliquam scelerisque. Donec rutrum commodo massa lobortis sodales. Ut a dignissim eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla facilisi. Quisque consectetur velit id mi consectetur suscipit. Nulla mauris neque, sollicitudin ac quam ac, lobortis placerat nisl. Morbi laoreet nulla ac lectus dictum, non finibus nulla ultrices. Nulla facilisi. Suspendisse non mi nibh.</p>

p {
  display: inline;
}

.first-image {
  float: left;
}

.second-image {
  float: right;
}

Float layout

Gebruik "floats" enkel voor deze vorm van layout: een layout waar een afbeelding letterlijk doorheen de tekst mag drijven.

Gebruik een max width (van bv: 40%) voor de afbeeldingen zodat tekst niet abrupt onderbroken wordt op mobiel!

Float layout

Oefening @Campus

A winter night in the forest II - Float

Flexbox layout

Layout technieken

Flexbox layout

Flexbox werd uitgevonden om flexibel ruimte te verdelen tussen children in een container -- zelf wanneer hun grootte ongekend en dynamisch is.

Tot nu toe hebben we nog niet gezien hoe we elementen naast elkaar kunnen plaatsen.

Flexbox layout

<div class="container">
  <div class="item item--first">...</div>
  <div class="item item--second">...</div>
  <div class="item item--third">...</div>
</div>

.container {
  background: purple;
}

.item {
  background: orange;
  margin: 1rem;
  height: 4rem;
  width: 100%;
}

Zonder flexbox gaat alles onder elkaar staan

Flexbox layout

.container {
  background: purple;
  display: flex;
}

.item {
  background: orange;
  heigth: 3rem;
  width: 100%;
  margin: 1rem;
  ...
}

Flexbox layout

.container {
  background: purple;
  display: flex;
  width: 40rem;
}

.item {
  background: orange;
  heigth: 3rem;
  width: 10rem;
  margin: 1rem;
  ...
}

Flexbox layout

.container {
  background: purple;
  display: flex;
  justify-content: flex-end;
  width: 40rem;
}

.item {
  background: orange;
  heigth: 3rem;
  width: 10rem;
  margin: 1rem;
  ...
}

Justify content 🤩

Flexbox layout

.container {
  background: purple;
  display: flex;
  justify-content: center;
  width: 40rem;
}

.item {
  background: orange;
  heigth: 3rem;
  width: 10rem;
  margin: 1rem;
  ...
}

Justify content 🤩

Flexbox layout

.container {
  background: purple;
  display: flex;
  justify-content: space-between;
  width: 40rem;
}

.item {
  background: orange;
  heigth: 3rem;
  width: 10rem;
  margin: 1rem;
  ...
}

Justify content 🤩

Flexbox layout

.container {
  background: purple;
  display: flex;
  justify-content: space-evenly;
  width: 40rem;
}

.item {
  background: orange;
  heigth: 3rem;
  width: 10rem;
  margin: 1rem;
  ...
}

Justify content 🤩

Flexbox layout

.container {
  background: purple;
  display: flex;
  flex-wrap: wrap;
  width: 40rem;
}

.item {
  background: orange;
  heigth: 3rem;
  width: 10rem;
  margin: 1rem;
  ...
}

Een flexbox container zal altijd alle items naast elkaar blijven tonen. Maar dit gedrag kunnen we aanpassen.

Flexbox layout

.container {
  display: flex;
  align-items: flex-start;
}

.item {
  heigth: 3rem;
}

.item--second {
  height: 4rem;
}

.item--third {
  height: 2rem;
}

Flexbox layout

.container {
  display: flex;
  align-items: flex-end;
}

.item {
  heigth: 3rem;
}

.item--second {
  height: 4rem;
}

.item--third {
  height: 2rem;
}

Flexbox layout

.container {
  display: flex;
  align-items: center;
}

.item {
  heigth: 3rem;
}

.item--second {
  height: 4rem;
}

.item--third {
  height: 2rem;
}

Flexbox layout

.container {
  display: flex;
  align-items: stretch;
}

.item {
  heigth: 3rem;
}

.item--second {
  height: 4rem;
}

.item--third {
  height: 2rem;
}

Flexbox layout

.container {
  display: flex;
  align-items: baseline;
}

.item {
  heigth: 3rem;
}

.item--second {
  height: 4rem;
}

.item--third {
  height: 2rem;
}

Flexbox layout

.container {
  display: flex;
  /* default */
  flex-direction: row;
}

.item {
  ...
}

In alle bovenstaande slides, gaan we uit van een logische volgorde: links naar rechts!

Flexbox layout

.container {
  display: flex;
  /* default */
  flex-direction: row-reverse;
}

.item {
  ...
}

Maar dit kunnen we omdraaien ook!

Flexbox layout

.container {
  display: flex;
  /* default */
  flex-direction: column;
}

.item {
  ...
}

Maar in plaats dat we flexbox direction op de horizontale as houden, kunnen we dit ook op de verticale as plaatsen

Flexbox layout

.container {
  display: flex;
  /* default */
  flex-direction: column-reverse;
}

.item {
  ...
}

En zelf hier kunnen we ook de omgekeerde versie kiezen

Flexbox layout

Eventjes weer resetten: naast een hele hoop opties dat we kunnen definieren op

de parent, hebben we ook nog opties op de children!

Flexbox layout

.container {
  display: flex;
  justify-content: space-evenly;
  width: 40rem;
}

.item {
  margin: 1rem;
  width: 10rem;
  /* default */
  flex-basis: auto;
}

Flex-basis legt de norm vast van de breedte van het element voor dat de overtollige ruimte verdeeld wordt.

Flexbox layout

.container {
  display: flex;
  width: 40rem;
}

.item {
  margin: 1rem;
  width: 10rem;
  /* default */
  flex-grow: 0;
}

.item--second {
  flex-grow: 1;
}

Flex-grow bepaalt als het element mag groeien.

Flexbox layout

.container {
  display: flex;
  width: 40rem;
}

.item {
  margin: 1rem;
  width: 10rem;
  /* default */
  flex-shrink: 1;
}

.item--second {
  flex-shrink: 0;
}

Flex-shrink bepaalt als het element mag krimpen.

Flexbox layout

.container {
  display: flex;
  width: 40rem;
}

.item {
  margin: 1rem;
  width: 10rem;
  /* defaults */
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  flex: 0 1 auto;
}

Flex combineert flex-grow, flex-shrink en flex-basis in 1 property.

Flexbox layout

.container {
  display: flex;
  width: 40rem;
}

.item {
  margin: 1rem;
  width: 10rem;
  /* defaults */
  order: 0;
}

.item--third {
  order: -1;
}

Order bepaald op welke positie een element komt te staan.

Flexbox layout

Tip:

Een volledig overzicht is te vinden op dit artikel van CSS-tricks

Oefening @Campus

Flexbox Froggy

Flexy menu

Mario V - Flexbox

Opdracht @home

Nesting flexboxes

My avocado project

Position

Layout techniques

Position

Position: static;

Default; Ieder element op de pagina heeft als default position "static";

* {
  padding: 2rem;
}

position: static;

Position

Als een element position: relative krijgt, heeft dit initieel geen invloed op het element.

* {
  padding: 2rem;
}

position: static;

position: relative;

Position

Wel zijn er 4 nieuwe properties zijn mogelijk op relatieve gepositioneerde elementen. (top, right, bottom, left)

position: static;

position: relative;

top: -3rem;

* {
  padding: 2rem;
}

.orange-el {
  top: -3rem;
}

Position

Deze properties gedragen zich anders dan margin properties. Static elementen schuiven met elkaar mee!

* {
  padding: 2rem;
}

.orange-el {
  margin-top: -3rem;
}

position: static;

position: relative;

margin-top: -3rem;

Position

Terwijl static elementen gaan schuiven, gaan relatieve elementen hun originele ruimte blijven opeisen.

position: static;

position: relative;

top: -3rem;

left: 2rem;

* {
  padding: 2rem;
}

.orange-el {
  top: -3rem;
  left: 2rem;
}

* {
  padding: 2rem;
}

* {
  padding: 2rem;
}

.orange-el {
  top: -3rem;
  left: 2rem;
}

Position

Zelf al staan ze niet meer zichtbaar in beeld, blijven ze hun plaats opeisen.

position: static;

* {
  padding: 2rem;
}

.orange-el {
  top: -3rem;
  left: 2rem;
}

* {
  padding: 2rem;
}

* {
  padding: 2rem;
}

.orange-el {
  position: relative;
  top: -3rem;
  left: -200rem;
}

Position

Een element met position: absolute, eist niet langer zijn eigen ruimte op, en zal zich positioneren t.o.v. de <body>.

* {
  padding: 2rem;
}

position: static;

position: absolute;

<body>

</body>

Position

...of ten opzichte van de eerste parent die relatief gepositioneerd is.

* {
  padding: 2rem;
}

.blue-el {
  position: relative;
}

.orange-el {
  left: 1rem;
  top: 1rem;
}

position: static;

position: absolute;

<body>

</body>

position: relative;

Position

Dus: relatief heeft geen invloed op de flow van het document, en alle absolute children kan je vrij mee gaan spelen en positioneren!

Oefening @Campus

Flexy fashion and positioning

Tip: absolute center hack

Het exacte midden met position: absolute, lijkt vreemd op eerste zicht:

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%:
}

Tip: absolute center hack

Het exacte midden met position: absolute, lijkt vreemd op eerste zicht:

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

Position

Position: sticky; Plakt aan de rand van het scherm, wanneer het tegen het scherm komt.

Position

Position: fixed; Blijft fixed ten opzicht van het browservenster, ongeacht de scrollpositie.

Tip: De prisonbreak hack

Je kan een element uit zijn parent-container laten "breken".

.parent {
  background: #FFF;
}

.second-child {
  background: orange;
  position: relative;
  width: 100vw;
  left: 50%;
  transform: translate(-50%);
}

Position

Nu we elementen over andere elementen gaan positioneren, kunnen we ook kiezen welke elementen vanboven liggen met de z-index property

Position

Oefening @Campus

Social notifications

Grid

Layout technieken

Grid

Grid wordt niet gegeven in het vak Web Design maar je kan hier wel de properties zelf ontdekken.

Grid wordt vooral gebruikt voor wanneer je vastzit met flexbox, en een globale 2-dimensionele layout wilt voorzien.

Web Design Deel 11: Layout technieken

Web Design Deel 11: Layout technieken

Evelien Rutsaert

Web Design Deel 11: Layout technieken

More from Evelien Rutsaert