Leer CSS Positioneren in Negen Stappen Deze tutorial (vertaald uit het engels, origineel hier te vinden: http://www.barelyfitz.com/screencast/html-training/css/positioning/ ) laat zien hoe je met CSS verschillende layouts kunt maken. Gebruikt worden: postion: static, position relative, position: absolute en float.
1. position:static De standaard positionering voor alle elementen is position:static, wat betekent dat het element niet wordt gepositioneeerd en daar verschijnt waar het normaal gesproken in het document moet verschijnen. Normaal gesproken zet je dit niet in css tenzij je een andere positioneringsopdracht wilt overrulen.
#div-1 { position:static; }
2. position:relative Als je position:relative in de css zet kun je top of bottom, en left of right gebruiken om het element te verschuiven ten opzichte van de plek waar het normal getoond zou moeten worden. We verschuiven div-1 20 pixels naar beneden en 40 naar links. #div-1 { position:relative; top:20px; left:-40px; } Merk op dat de plek waar div-1 normaal getoond zou worden nu leeg is. Het volgende element (div-after) is niet van zijn plek gekomen. Div-1 houdt in het document zijn normale plek als het ware gewoon bezet al wordt hij op een andere plek getoond. Het lijkt er daarom op dat dat position:relative niet zo bruikbaar is, maar verderop in dit verhaal zal het nog een belangrijke functie krijgen.
3. position:absolute Als je position:absolute gebruikt wordt het element als het ware uit de normale stroom van het document gehaald en wordt het exact op de plek waar je het wilt laten zien getoond. Laten we div-1a (dat binnen div-1 genoteerd staat) helemaal aan de top van de pagina zetten. #div-1a { position:absolute; top:0; right:0; width:200px; } Merk op dat deze keer div-1a geen lege plek oplevert in het gehele document. De andere elementen worden gewoon in volgorde getoond waarbij div-1b en div-1c de lege plek van div-1a opvullen. Verder valt op dat div-1a in de rechter bovenhoek van de pagina terecht gekomen is. Het is leuk om elementen direct op een pagina te zetten, maar het is van beperkt nut. Wat we echt willen is div-1a relatief ten opzichte van div-1 een plek te geven. Daarvoor hebben we reletive position nodig.
Voetnoot •
Er is een bug in de Windows IE browser: als je een relatieve breedte specificeert (als: “width: 50%” dan zal de breedte gebaseerd worden op de breedte van het ‘ouder’ element in plaats van het te positioneren element.
4. position:relative + position:absolute Als we op div-1 de relatieve positionering zetten zullen alle elementen binnen div-1 hun plek krijgen relatief ten opzichte van div-1. Als we dus op div-1a een absolute postionering aangeven zal dat relatief ten opzichte van div-1 gedaan worden en kunnen we div-1a bijvoorbeeld aan de top van div-1 zetten: #div-1 { position:relative; } #div-1a { position:absolute; top:0; right:0; width:200px; }
5. twee koloms absolute Nu kunnen we een twee-koloms layout maken met gebruikmaking van relatieve en absolute positionering! Let er op dat we het omsluitende element een relatieve, en de ingesloten elementen een absolute positie geven: #div-1 { position:relative; } #div-1a { position:absolute; top:0; right:0; width:200px; } #div-1b { position:absolute; top:0; left:0; width:200px; } Een voordeeel van absolute positionering is dat we elementen kunnen positioneren in elke volgorde, los van de volgorde waarin we ze in HTML hebben gezet. Zet bijvoorbeeld div-1b voor div-1a. We zien echter meteen ook een problem: wat gebeurt er met de andere elementen? Ze worden nu door de gepositioneerde elementen onzichtbaar gemaakt. Wat kunnen we daaraan doen?
6. twee koloms absolute hoogte Eén oplossing hiervoor is een vaste hoogte aan te geven voor alle elementen. Dat is niet een goede oplossing voor de meeste webdesigns, omdat we normaal gesproken nooit precies weten hoeveel tekst er in een element zal staan en we ook nooit precies weten wat de grootte is van het te gebruiken font. #div-1 { position:relative; height:250px; } #div-1a { position:absolute; top:0; right:0; width:200px; } #div-1b { position:absolute; top:0; left:0; width:200px; }
Let op het lege vlak onder de div’s div-1b en div-1a
7. float Voor kolommen met variabele hoogte werkt zoals we zien absolute positionering niet goed. We hebben een andere oplossing nodig. We kunnen een element een ‘float’ positie geven: we duwen het dan als het ware helemaal naar rechts of links en laten de tekst eromheen ‘floaten’. Dit is handig en nuttig voor plaatjes (img) maar we kunnen het ook gebruiken voor meer complexe lay out – we hebben daarvoor eigenlijk geen ander hulpmiddel! #div-1a { float:left; width:200px; }
Let erop dat de tekst van div-1b als het ware om div-1a heen zweeft.
8. float kolommen Als we de ene kolom naar links ‘floaten’ en de andere kolom óók zullen ze tegen elkaar ‘botsen’ op deze manier: #div-1a { float:left; width:150px; } #div-1b { float:left; width:150px; }
Er zijn nu in ieder geval twee kolommen, maar de onderliggende elementen worden onzichtbaar…
9. float columns met clear Met de css opdracht ‘clear’ kunnen we ervoor zorgen dat de rest van de inhoud van een pagina naar beneden geduwd wordt zodat er geen ander element boven komt te staan.
#div-1a { float:left; width:190px; } #div-1b { float:left; width:190px; } #div-1c { clear:both; }
Je ziet dat div-1c zich pas wil laten zien als er geen andere elementen meer in de weg zitten.
