Nu we weten hoe in HTML het box model werkt, laten we zien hoe bepaald wordt waar een element (box) op een webpagina komt te staan. In CSS kunnen aan elementen met de eigenschap “position” waarden worden toegekend waarmee de plaats van een element (box) op een webpagina kan worden vastgelegd. We noemen dat het positioneren van elementen. De eigenschap position kan 4 waarden hebben:
Bekijk het volgende filmpje daarna kan je eventueel de tekst nog lezen.
Positioneren van elementen
Aan de hand van een paar voorbeelden zullen we proberen te verduidelijken wat het effect is van deze 4 verschillende waarden. We gebruiken daarvoor een webpagina met de afbeelding en beschrijving van een muziekinstrument.
Namelijk een piano. Voor de beschrijving van de piano hebben we de tekst van een wikipediapagina gebruikt.
Piano In de broncode van onze webpagina staat in de body van het HTML-document:
In het HTML-document wordt verwezen naar een apart CSS-bestand. We hebben dat bestand voor het gemak even piano.css genoemd. |
Hieronder zie je de broncode van piano.html:
Broncode Piano <!DOCTYPE html> |
We gaan het element img class=”piano” een relatieve positie geven. In piano.css noteren we:
Relatieve positie De afbeelding van de pianotoetsen is nu verplaats en staat deels over de tekst van de eerste alinea. De afbeelding is 60px naar beneden en 20px naar links verschoven. Bedenk dat de verplaatsing naar beneden ten opzichte van het element h2 is. In de broncode van het HTML-document wordt eerst het h2-element en daarna de afbeelding opgenomen. Zouden we de afbeelding als eerste in de body opnemen en daarna het h2-element krijgen we de afbeelding op een andere plek te zien. De afbeelding van de pianotoetsen staat nu voor een groot deel over het element h2 heen. |
We kunnen de afbeelding ook een absolute positie geven.
We passen daarvoor de CSS-code aan.
Links staat de aangepaste code, rechts zien we het resultaat:
Absolute positie De pianotoetsen staan nu over delen van de eerste en tweede alinea. Het omliggende element waar bij het bepalen van de plaats van de afbeelding naar gekeken wordt, is in dit voorbeeld het element body. De afbeelding krijgt nu als linkerbovenhoek de waarde 20 pixels naar links en 60 pixels naar beneden mee. |
We passen nogmaals de CSS-code van de class piano aan. We gaan nu voor het element img class=”piano” een border en marge instellen. De afbeelding zakt door de nieuwe instellingen nog verder naar beneden en verschuift nog meer naar rechts.
Border marge De eigenschappen en waarden van het box model bepalen dus mede op welke plek de inhoud van een element wordt afgebeeld. |
Er zijn aandachtspunten waar je rekening mee moet houden bij het gebruik van elementen die de float-eigenschap hebben. Je moet een breedte (width) meegeven en het is mogelijk dat elementen elkaar gaan overlappen. Om dit tegen te gaan kun je gebruik maken van de eigenschap clear met de waarden none, left, right of both. |