Pagina-indeling + achtergrondafbeeldingen
Indeling en uitlijning
Om de positionering van elementen zoals afbeeldingen, titels en teksten te vergemakkelijken, gebruiken grafici een grid. Dit is een in het eindresultaat onzichtbaar raster (een soort "basisstramien") van hulplijnen waarop je alle grafische elementen (inhouden, grafieken, illustraties...) kan positioneren.
Een browser maakt standaard een onderscheid tussen "blok"elementen en "inline" blokelementen. Wat dit precies inhoudt, kom je te weten in het onderstaande filmpje.
Je kan de standaardinstelling voor opmaak in de browser echter wijzigen door te vragen om de inhouden anders "weer te geven". CSS beschikt over twee geavanceerde technieken om de pagina-onderdelen uit te lijnen op een GRID (= raster):
- CSS flex
- CSS Grid
In deze cursus besteden we enkel aandacht aan CSS Flex.
Demofilm
In het onderstaande filmpje leg ik uit hoe je pagina's indeelt met CSS. De volgende dingen komen aan bod:
- Elementen naast elkaar plaatsen.
- Navigatiebalk indelen
- Marges instellen.
- Hoogte van elementen instellen
- Achtergrondafbeeldingen toevoegen
- Links opmaken