Float

Om elementen in je HTML pagina naast elkaar te positioneren kun je de eigenschap float gebruiken. In aansluiting hier op kun je het een en ander lezen over wireframes (je beeldscherm indeling).

Video’tje kijken?

POLS

Mp>Op POLS lesmateriaal > HTM21 > 05_Positionering.pdf kun je uitleg vinden over div elementen, hierin wordt op pagina 31 float behandeld.

 

Links

In het Nederlands: http://www.casinoswijzer.nl/artikel/css/positioneren-met-css-float.php
Een site met een hele verzameling tutorials waarbij je float gebruikt (oa drop caps): http://css.maxdesign.com.au/floatutorial/

 

Y.Bruin

Ik heb het volgende HTML documentje. Dit levert het volgende voorbeeld op waarbij de div-elementen onder elkaar staan.
start-htmlgeen-float


Wanneer ik aan mijn CSS toevoeg dat de div-elementen float:left zijn dan zullen de div-elementen onder elkaar komen te staan.
with-float-leftfloat-left


Als we even uit gaan van een standaard opmaak van een website waarbij je een header hebt (bovenkant), een footer (onderkant) en het en en ander er tussenin (content, menu, nog meer content) dan heb je float nodig om elementen naast elkaar te zetten. De HTML ziet er dan zo uit:
html-hftwheader-footer-twoColumn


Wellicht valt het je op dat er op de regel 29 van de code iets staat wat nieuw is, namelijk “clear:both;”. Dit heb je nodig om er voor te zorgen dat elementen welke NA de floating elements komen netjes onder deze elementen komen.

Floating elements worden als het ware uit het grid gehaald van de div-elementen. Zonder een clear aan de footer te geven zal deze onder de floating elements komen te staan. Clear zorgt er voor dat de footer de floating elements wel weer “ziet” en dat de footer netjes onder de elementen komt te staan.

 

Werken met een container

Een probleem bij de site die we zojuist hebben gemaakt is dat deze er niet meer netjes uitziet bij een breder formaat scherm.

zonder-container

Dat is eigenlijk ook wel logisch want we hebben aangegeven dat #menu links mag uitlijnen en #content rechts. De website doet precies wat je hebt opgegeven maar het punt is dat je #header en #footer 800 pixels breed zijn maar het browser scherm misschien wel 1400 pixels. Wat een gangbare oplossing is, is om een div om alle content heen te zetten en dit als basisformaat van je website te gebruiken. Meestal noemen we deze div een container. De code en website kunnen er dan als volgt uit zien:

html-containermet-container


Wat je nu heb gehad is een basis lay-out “header, footer, two column lay-out”. Een “header, footer, three column lay-out” kom je ook vaak tegen. In dat geval kun je de elementen in het midden float: left, float: left en float:right geven. Je mag ook alle elementen float:left geven, dit maakt qua HTML niet uit.

Wat ook kan is een header met daaronder (over de hele breedte van de website) het menu en dan twee of drie kolommen met de footer eronder. Uiteraard zijn er veel meer indelingen mogelijk. Voordat je goed met je indeling aan de slag kunt zul je eerste een wireframe moeten maken zodat je helder voor ogen hebt wat je wilt. Nadat je site eenmaal goed in elkaar zit qua div-elementen en witruimtes dan kan achteraf aanpassen soms knap lastig zijn!