De natuurlijke flow van een pagina.

Bron: http://www.sceneone.nl/positionering/flow.php

Titel: HTML en CSS tutorials

Auteur: Wybe Weysters

Bron: http://www.sceneone.nl/positionering/flow.php

Titel: HTML en CSS tutorials

Auteur: Wybe Weysters

Het is goed jezelf te realiseren dat een web pagina een vastgestelde hiërarchie kent. Elementen op een pagina hebben allemaal hun eigen plaats. Die plaats hangt af van de eigenschappen van het element en van de plaats waar jij ze in de html hebt geplaatst.

Inline elementen

Deze elementen worden horizontaal naast elkaar geplaatst. Er kunnen dus meerdere inline elementen op 1 regel staan:

CSS: .groen{
background: #269603;
color: #FFF;
}

.rood{
background: #EA2303;
color: #FFF;
}
HTML: <p>Het element SPAN is een inline element <span class="groen">zoals je hier kunt zien</span>. Je kunt eenvoudig <span class="rood"> meerdere SPAN's op 1 regel kwijt</span>. Ze zitten elkaar niet in de weg.</p>

bekijk het resultaat

Block elementen

Een block element verdraagt geen tweede block element op dezelfde regel of op hetzelfde horizontale niveau. Je kunt een block element wel combineren met een inline element:

CSS: .p1{
font-weight: bold;
color: #999;
}

.p2{
font-style: italic;
color: orange;
}
HTML: <p class="p1">Een 'paragraph' is een voorbeeld van een block element</p><p class="p2">Ik kan een tweede paragraph in de html best
op dezelfde regel zetten. Het resultaat in de browser zal toch zijn dat de tweede paragraph op een nieuwe regel begint.</p>

bekijk het resultaat

Natuurlijke flow van een pagina

Met de natuurlijke flow van een web pagina bedoel ik de manier waarop een pagina gerenderd wordt wanneer jij helemaal niets anders doet dan een aantal elementen in de html plaatsen.
Normaal gesproken zul jij in je css een groot aantal zaken willen beinvloeden: je wilt je teksten opmaken en op een bepaalde eigenwijze manier uitlijnen, je wilt bepaalde elementen op een bepaalde manier positioneren.
Je gaat m.a.w. aan de natuurlijke flow van de pagina sleutelen.

Je kunt via CSS op een groot aantal manieren de natuurlijke flow van een pagina beinvloeden en wijzigen. Het is goed jezelf te realiseren dat er zoiets is als de natuurlijke flow van een pagina: de opbouw die een pagina heeft wanneer jij er niets aan zou veranderen.

Wanneer je het resultaat van de code hieronder gaat bekijken zul je misschien bij jezelf denken, ja zo ken ik er nog wel een. Da's nogal logisch dat dat er zo uitziet. Toch is het belangrijk dat je het nog eens een keer ziet.
Bij het positioneren van je elementen speelt de flow van een pagina een belangrijke rol en de natuurlijke flow van de pagina is altijd ons uitgangspunt:

CSS: GEEN HTML: <h1>Dit is de titel van een pagina</h1>
<h2>Een subkopje</h2>
<p>De platte tekst. Zoals je ziet zijn de h1, de h2 en de p allemaal block elementen</p>
<p>Omdat de h1 in de html bovenaan staat komt hij ook in de gerenderde pagina bovenaan te staan, de h2 komt daar weer onder,
enz, enz: de natuurlijke flow van een pagina!</p>

bekijk het resultaat

naar het begin van de pagina