9. Elementen positioneren
Het positioneren van de verschillende elementen kan soms een hele uitdaging zijn. Wanneer u het positioneren van de verschillende elementen volledig in de vingers heeft dan bent u een behoorlijk eind op weg met het maken van websites. In de onderstaande oefening komen een aantal belangrijke technieken voorbij.
9.1 Een afbeelding in de tekst uitlijnen
Om de afbeelding onder de tekst te verplaatsen tot rechts naast de tekst moeten we twee wijzigingen doorvoeren. Verplaats in het HTML bestand de <img> -tag van onder de paragraaf nu voor (boven) de tekst nog wel binnen de <p> -tag.
En vervolgens voegen we onderop een extra regel toe in het CSS bestand, zie afbeelding.
De HTML code
De CSS code
9.2 Het geheel positioneren
Om de totale content beter te presenteren wordt er in de onderstaande code een nieuw HTML-element in de body geplaatst. Deze nieuwe HTML-container heet div (een div staat voor division (gebied)). Door een div direct na de body-open-tag te plaatsen en hem vervolgens af te sluiten vlak voor de body-sluit-tag hebben we nu alle content in een nieuwe container gezet. Deze nieuwe container kunnen we met behulp van de CSS stylesheet positioneren en vormgeven. U kunt de onderstaande code overnemen voor een mooier resultaat.
De HTML code - Er is hier een extra div-container om de content gezet.
De CSS code - De div wordt gepositioneerd en vormgegeven.
Meer CSS code - Een toevoeging bij de paragraaf en een extra kiezer voor de ul
Het eindresultaat zal er dan zo uitzien
Door de div in de stylesheet een breedte, een hoogte en een kleur te geven wordt hij zichtbaar in de browser. Door vervolgens de linker en de rechter marge op automatisch te zetten zal de div-container gecentreerd worden op de pagina. De div wordt als laatste de eigenschap border-radius meegegeven. Deze eigenschap geeft de div "ronde hoeken".
Om ervoor te zorgen dat de tekst niet direct tegen de rand aan staat plaatst u de padding eigenschap bij de h1 en de p. De vier waarden staan achtereenvolgens voor de Noord, Oost, Zuid en de West kant van de tekst.
De ul heeft de eigenschap float zodat deze zich beter bovenin de div laat positioneren. Door een breete van 560 pixels op te geven neemt de ul de volledige breedte van de div in beslag.
Tip: wanneer u de ul een tijdelijke achtergrondkleur geeft wordt deze zichtbaar en kunt u hem makkelijker positioneren.
