Kop 1

Padding & marge

Een oefening
Een presentatie met theorie: https://docs.google.com/presentation/d/e/2PACX-1vQju4tTAQZ5AGKIYBisojQXqkpXA4G52vGbMk46iZp5OIxOmgj0jOENvgu8UDSU2tjDRl18CJacfrTG/pub?start=false&loop=false&delayms=3000. Lees deze eerst.

Leerdoelen

• div & span
• class & id
• box-model
• padding & marge

lijst van onderwerpen

voor de training gebruik je de inhoud (NET de vormgeving) van één van onderstaande odnerwerpen)

1. de leukste moppen
2. Appelsap 2014
3. Incubate
4. Best Kept Secret
5. Valkhof Festival
6. 10-minutengesprek
7. Top-CV
8. Toegankelijke website
9. af te vallen
10. verandering
11. jouw marathondebuur
12. tegen verveling
13. Voor beoordelingsgesprekken
14. timemanagement
15. om rijk te worden
16. voor journalisten
17. een goede Powerpointpresentatie
18. een goede relatie
19. tuinieren van de fysiotherapeut
20. besparen op je boodschappen
21. stroom te besparen
22. een gezond leven
23. een sollicitatiebrief
24. fotografie
25. cupcakes
26. het stoppen met roken en niet aankomen
27. energie besparen (kies er zelf 10 uit)
28. de herfst in Amsterdam
29. Lowlands
30. de fopspeen
31. om beter te leren spellen
32. om van je verkoudheid af te komen
33. om van je verkoudheid af te komen
34. de voor- en nadelen van ons digitale leven
35. om de batterij van je smartphone te sparen

Padding en marge: het resultaat (00:2:22)

Na het doorlopen van de opdrachten hieronder heb je het resultaat zoals hiernaast, maar dan met je eigen inhoud. Je mag ook de video hieronder bekijken als een start-up van deze opdracht.

1. Download de voorbeeldcode en open deze zowel in de browser als in Atom.
   voorbeeldcode: https://github.com/Theo-denBlanken/materiaal-oefening-padding-marge
2. Vul je eigen naam aan bij de meta-tags als (mede)auteur. Ook in de head jouw naam plaatsen over die van mij heen.
3. Het krijgt één van de onderwerpen uit de lijst hieraast. Neem daarvan de inhoud over en kopieer deze in de inhoud mark-up, die je gedownload hebt.
4. Koppel het externe stijlblad aan het document.
   Er is al flink wat opmaak aanwezig, al is het resultaat nog ver weg van het voorbeeld hiernaast.
5. Bekijk de Mark-up (HTML) en stel vast dat de hele inhoud in een div met de class ‘wrapper’ zit. centreer dit wrapper-element, door de marges links-en rechts op auto in te stellen.
6. Stel de breedte (width) van de sections in op 360px. Hierdoor passen er wel 3 van deze sections in hun parent het main-element
7. Enkele sections hebben zo weinig inhoud dat er wel 4 van naast elkaar zouden moeten kunnen pasen. Controleer de mark-up en zie dat ze een class-attribuut met de waarde weinig hebben.
8. Geef in de CSS de selector .weinig een breedte van 260px;
   Er zouden dan zelfs 4 van deze elementen naast elkaar kunnen.
9. Het eerste element is echter breder dan de volgende 3. Dat komt door de padding. Het eerste element heeft immers een id-attribuut met waarde agenda en in de stijl is daarvoor een forse padding gegeven!
   Volgens het boxmodel wordt die padding bij de ingestelde breedte toegevoegd. Dat werkt niet makkelijk en daarom geef je ALLE SECTIONS de eigenschap box-sizing een waarde ‘border-box’.
   Dat werkt voor de overige sections beduidend eenvoudiger!
10. Geef de sections enige marge. Kijk in de afbeelding hoe groot die moet zijn. (tel de rasterlijnen!!)
    Zo staan ze niet meer tegen elkaar.
11. Controleer nu of alle 4 de eerste sections dezelfde breedte aan de buitenkant hebben.
12. De hoogtes van deze elementen (ze staan inmiddels alle 4 naast elkaar!!) zijn nog ongelijk.
    Door wat met de padding-bottom te spelen kun je de hoogtes gelijk krijgen.
    Hoe ze precies ingesteld worden kun je terugzien in de afbeelding van het resultaat. We proberen ze even hoog te krijgen als de derde section (die is het hoogst). Daarom hebben de tweede en de vierde section een id meegekregen in de mark-up. Selecteer die elementen in de CSS met hun id en voeg daar zelf padding-eigenschappen toe.
    De hoogtes in de rij worden door het spelen gelijk ZONDER dat je de hoogte instelt!!
13. Ook de overige sections binnen een rij moeten gelijk gemaakt worden aan elkaar door met de horizontale padding te spelen. Geef daarvoor elk een unieke id. Bedenk die id door deze af te leiden van de inhoud in het element. In het voorbeeld dus bij de 10-de tip 'werkplanning'.
14. Voeg marge toe aan het h1-element zodat hij start precies recht boven de start van de tekst van de eerste section. Kijk hiervoor naar het voorbeeld in de video van het resultaat.
15. Ook de footer moet marge krijgen zodat deze precies start recht onder de start van de tekst in de section boven hem.
16. Je mag de kleuren naar eigen inzicht aanpassen, zolang het grid op de achtergrond van de het wrapper-element maar zichtbaar blijft.
17. Valideer zowel de HTML als de CSS
18. Plaats hem in het mapje opdracht 5 in de bewijzenmap en lever het linkje in Magister.

Instructie Padding en marge: instructie (00:17:04)

Allereerst wordt het stijlblad gekoppeld, de inhoud aangepast net zoals de metatags.
Iedere student krijgt een eigen inhoud, die hij op vergelijkbare manier een mark-up geeft.

De div om alle inhoud heeft een kleinere breedte gegeven en met margin: 0 auto; zet je hem dan midden in de body.
In dit filmpje wordt getoond hoe je een layout met floatende elementen kunt maken.
In het main element zitten sections.

Als je hun breedte beperkt en hun de eigenschap float: left geeft, kunnen ze naast elkaar komen te staan.
We gaan hier een mooiere layout van maken door de sections padding en marge te geven.

Floaten is een wat verouderde manier om elementen naast elkaar te plaatsen. Je kunt het zelfs een hack noemen. float: left betekent: ga links staan en laat de inhoud, die volgt (als het past) rechts om je heen vloeien.
Van volgende elementen, die dat niet moeten doen, geef je dan clear:left;

Sections binnen een rij krijgen een gelijke hoogte door de padding aan de onderzijde te variëren.
De hoogte wordt dus NIET ingesteld met 'height'.

Padding en marge: de challenge (00:2:22)

Koppen anders stylen

De opdracht op https://blanken5.home.xs4all.nl/opdrachtPaddMarg.html kun je zelf proberen wat verder te brengen. De challenge levert een mooier resultaat in de koppen van de sections op.
Om dit te bereiken moeten de sections eigenlijk geen padding meer krijgen.
Die stop je in de koppen in die sections. Die selecteer je met section h3.
Dit betekent dat je de kop niveau 3 selecteert als deze in een section zit.

Geef ze ook wat marge an de onderzijde, zodat de inhoud, die in paragrafen staat, er niet te dicht op komt.
Ook de paragrafen geef je padding. Selecteer ze met section p en geeft ze alleen horizontale padding. De sections zelf opnieuw langslopen met ieder een passende padding aan de onderkant, zodat ze daardoor binnen een rij dezelfde hoogte krijgen.
Net als in de gewone opdracht gebruik je de eigenschap height NIET.

Inleveren

• Rond de vormgeving af naar eigen inzicht.
• Na afloop plaats je deze training online in je bewijzenmap.
• Valideer jouw pagina's op Markup Validation Service van W3C.
• De validatie icoontjes staan in de footer.
• Plaats de link in ELO Magister.