Deel 13

Links:

Positionering.

Het grote voordeel bij positionering door middel van DYNAMIC STYLES is de flexibiliteit bij het vergroten of verkleinen van het actieve venster. De objecten (tekst, foto's enz.) worden dynamisch aangepast. De programmeur van de pagina kan tot op de pixel bepalen waar de inhoud van pagina moet staan.
Hiervoor moeten we twee nieuwe tags leren, DIV en SPAN (alhoewel DIV reeds een poosje bestaat) en moeten we de STATISCHE, ABSOLUTE en RELATIEVE positionering leren.
Wanneer je pagina door de brwoser wordt ingeladen, worden de verschillende elementen van de pagina door de browser in het venster geplaatst en dit volgens de volgorde van de elementen in je HTML pagina.
Met dynamische positionering kun je zelf bepalen waar de elementen in het venster zullen geplaatst worden.

Dynamic Style Sheets sluit heel nauw aan bij Cascading Style Sheets. Toch mag men niet beginnen aan dit Dynamic Style Sheets hoofdstuk zonder een elementaire kennis van Javascript en/of DHTML.
Dynamic Style Sheets is een logisch vervolg op de Style Sheets. Omdat de Style Sheets zelf geen absolute of relatieve positionering kennen zal Dynamic Style Sheets ons hier verder helpen.
In deze cursus zullen we vooral de SPAN en DIV tags bespreken en de ABSOLUTE of RELATIEVE positionering van stijlen in een HTML pagina.
Daarna zullen we de Z-indexering bespreken, dit is bepaalde objecten over of op andere objecten plaatsen.

Statische positionering.
Deze vinden we terug in oa de HTML taal. Standaard is iedere positionering in een HTML pagina statisch.

Absolute positionering.

Absolute positionering is een object of element in een document plaatsen, gemeten vanaf de linkerbovenhoek van dit document. Voorwaarde is dat dit object of element in een container zit. Een container vormen we met de DIV en/of SPAN tag.
Bij het verkleinen of vergroten van het venster waarin de pagina (document) getoond wordt, blijft het object zijn positie behouden.

Relative positionering.
Relative positionering is een object of element in een document plaatsen, gemeten vanaf de plaats waar het zonder positionering zou gestaan hebben. Voorwaarde is dat dit object of element in een container zit. Een container vormen we met de DIV en/of SPAN tag.
Met RELATIEVE positionering kunnen we eveneens voorwerpen verplaatsen met behulp van JAVASCRIPT. In dit geval zullen alle eigenschappen en elementen mee verplaats worden. Ook iedere onderverdeling (child elements) zal mee verplaatst worden.
Kijk verder voor een oefening over deze RELATIEVE positionering.