Werk de opdracht 4.2 verder uit
In de vorige opdracht hebben we gekeken naar layout en de indeling daar van.
We hebben div's gebruikt om de layout onderdelen aan te maken:
header, banner, content1, content2, footer
Vervolgens hebben we de header en de banner verder van inhoud voorzien volgens het wireframe (https://moqups.com/nangko/zuU98IHb/).
Nu gaan we verder met de content en het goed positioneren van de teksten en afbeeldingen.
Opdracht
Werk de opdracht van vorige week verder uit.
Gebruik div's om de layout te bouwen en maak gebruik van float om div's naast elkaar te plaatsen.
Maak de content stukken en positioneer ze met margin en/of padding. Geef de afbeeldingen een rand met border.
Gebruik div's om de layout te bouwen en maak gebruik van float om div's naast elkaar te plaatsen.
Maak de content stukken en positioneer ze met margin en/of padding. Geef de afbeeldingen een rand met border.
Positioneer de onderdelen zoals aangegeven in het wireframe: (https://moqups.com/nangko/zuU98IHb/)
Float
Om div's naast elkaar te krijgen kun je gebruik maken van float: left; en/of float: right; Let hierbij op dat de omliggende elementen ook zullen "floaten". Om dit te voorkomen is het verstandig om altijd een div om de "gefloate" div's te plaatsen (ook wel container genoemd) en deze een clearfix te geven.
Zie hier voor een voorbeeld: http://codepen.io/nangko/pen/ysDjq
Box-model
Een html element heeft css-eigenschappen om afmetingen, randen en witruimtes te bepalen. Hiermee kun je onderdelen in je site goed positioneren en vorm geven. Dit kan met de eigenschappen height width border padding en margin en zijn samen te vatten met in het box-model:
