Met div-eleemnten groepeer je verschillende elementen tot elkaar, en met padding en marge-eigenschappen kun je afstand tussen deze elementen maken.
Je mag werken met de volgende afbeelding, maar er ook zelf een bedenken https://2.bp.blogspot.com/-MUJK9t5zhy4/VKKYmNFELeI/AAAAAAAAPPw/1hRX_HqScYc/s1600/LetItBe_0.jpg
Dit is een wat ongebruikelijke manier om en tekst-effect aan een album van The Beatles toe te voegen. Het is vooral bedoeld om te laten zien wat de verschillen zijn tussen padding en marge.
Ook leer je hier werken met classes en id's en hoe je die gebruikt om elementen te selecteren in CSS.
Eerst zie je het resultaat van de training. Als je de oefening meedoet, dan zijn de afmetingen groter dan in deze instructie. We werken met een cover die te vinden is op https://2.bp.blogspot.com/-MUJK9t5zhy4/VKKYmNFELeI/AAAAAAAAPPw/1hRX_HqScYc/s1600/LetItBe_0.jpg
Download deze en plaats hem in de projectmap.
Je kunt deze gebruiken als achtergrond in de container-div.
Hier zie je hoe deze wordt gecentreerd in de body. Het betreft hier een combinatie van breedte en marge.
De afmetingen die jij hier gebruikt, zijn dus 12220 pixels.
Hier worden de namen van de bandleden ingevoerd in de mark-up.
Omdat dit 4 keer vergelijkbare informatie is, worden hiervoor sections gebruikt.
Binnen elke section komt een div met de class 'naam'.
Om dit binnen de donkere cover leesbaar te houden worden de teksten wit gemaakt en wordt het font schreefloos.
Het blijkt net als in de vorige video, dat elementen door de browser standaard al marges meekrijgen. Dat geldt ook voor de kopjes en paragrafen, die hier eerst allemaal op 0 worden gezet.
Alle elementen hebben een rechthoekig gebied waarin ze opereren. Door de inhoud wordt deze opgevuld en padding vergroot deze ruimte.
Je kunt om zo een rechthoekje een kader maken met de CSS-eigenschap border. Omdat we alleen links een rand willen gebruiken we border-left.
Om te voorkomen dat de tekst tegen die rand aankomt, geven we ook een kleine padding-left.
We zorgen voor een transparante achtergrond bij de sections. Deze helpt ons te zien hoe het met de marge en padding van die section is.
De kleurcode wordt weergegeven in rgba-waarde. De letters staan voor rood, groen, blauw en alpha.
De sections nemen de hele breedte in beslag en met width beperken we die zodat de tekst er nog wel in past.
We geven de section-elementen overigens ook een class mee zodat hij iets specifieker geselecteerd wordt. Door met de alt-toets ingedrukt te selecteren in VS-code krijg meerdere cursors en kun je de vier sections tegelijk van een class voorzien.
Al verwacht je dat met een margin-top het eerste element naar de eerste foto te schuiven is, komt erachter dat je daarmee de container van een marge voorziet.
Een betere oplossing is de container van een padding-top te voorzien waardoor de sections zullen moeten zakken.
Je kunt wel de section naar rechts duwen door de margin-left te verhogen.
Verder wordt er zo lang met de padding-waarden van de section gewerkt, tot deze de hele afbeelding bedekt.
Om de naam van de Beatle op de gewenste plaats te krijgen, kun je het element inspecteren in de inspector van de web-browser. Je kunt daarin CSS-eigenschappen aan en uitzetten, eigenschappen toevoegen en hun waarden aanpassen.
Dat gaat hier met de naam van John Lennon.
Nadat dit is bedacht moet in de CSS deze ene naam worden geselecteerd. Dit gaat door in de selecteer eerste de id van de section op te geven gevolgd door een spatie en daarna de naam van het element daarbinnen, hier is dat de class-selectie .naam.
De selectie lukt, maar hier wordt de eigenschap margin, die in de inspector goed was gebruikt, verward met padding. (Later wordt dit hersteld.)
Je ziet hier ook het doel van de grote padding: als de hulp-kleur weg is, kan de naam worden verborgen door deze doorzichtig te maken met de opacity-eigenschap.
Er is dan een pseudo-selector :hover die selecteert het element als de muis erboven staat. In dat geval wordt de opacity van de naam 1 waardoor deze zichtbaar wordt.
Hier zie je dat de gebruikte methode om het probleem met padding en marge op te lossen, niet de gemakkelijkste is.
De tweede section krijgt wat meer horizontale marge, zodat deze verder van de linkerkant komt. Maar daarna gaat het element niet vanzelf omhoog. Het blijkt wel mogelijk door een negatieve marge mee te geven.
Daarna verloopt het afstemmen van de paddings en marge vergelijkbaar met de eerste Beatle.
Bij het stijlen van de derde Beatle zijn er veel overeenkomsten met John en Paul voor wat betreft de maatvoering. Visual Studio Code kan een fiks stuk mark-up van een element samenvouwen, zodat je bovenliggende mark-up kan lezen.
Ook hier is een groot deel van de styling vergelijkbaar met 2 andere Beatles.
Nadat dit is ingesteld, wordt de hulpkleur in commentaar-regels gezet, de naam-class doorzichtig gemaakt en de naam-class wordt alleen zichtbaar als de sectie onder de muis komt. De sectie is met de padding echter precies op de plaats van de afbeelding van de achtergrond.
tot slot zie hoe de 4 verschillende paddingregels tot 1 gecombineerd kunnen worden.
README.md met daarin temnminste een link naar jouw online uitwerking.