Join.me/webkursus
* Vi kan nu ramme de html-elementer vi vil… * Lad os få placeret vores “kasser”/strukturelle elementer * Dertil bruger vi en række inline-block-regler * Inline-block elementer opfører sig som inline elementer, * position, størrelse, margin, padding mm., kan sættes på inline-block elementeter
* Vi kan nu ramme de html-elementer vi vil… * Lad os få placeret vores “kasser”/strukturelle elementer * Dertil bruger vi en række inline-block-regler
1 2
Del altid op i enten rækker eller kolonner
Aldrig rækker og kolonner på en gang…
…lav 3 rækker og derefter 2 kolonner
Aldrig rækker og kolonner på en gang…
…lav 2 kolonner og derefter 3 rækker
Hvilken løsning er den korrekte?
Ingen af dem!
Der er kolonner og rækker inden for samme element!
Eksempel:
Del først op i rækker
Del derefter den midterste række op i kolonner
Del derefter den højre kolonne op i 2 rækker
#wrapper #content section footer header nav article aside
wrapper header content nav section article aside footer header nav article aside
footer header nav article aside
* Beslut dig for hvilken inddeling af dit site der er den bedste. Overvej hvilke block og inline elementer * Inddel indholdet af dit portfolio-site i “kasser” og navngiv dine elementer (se slide 24) * Lav en plan for din html struktur (se slide 25) * Foretag evt. ændringer af din html struktur (se slide 26)
block inline footer header nav article aside
* Height & width * Margin * Padding * Border
* Firebug til Firefox * Firefox Tilt * Udviklerværktøjer til chrome
* w3schools reference: * css zen garden: * css validator:
Byg videre på dit site, så: * Elementerne er positioneret korrekt, herunder padding og margin * Teksten har den ønskede størrelse, type og farve * Farverne er som ønsket * Du har de rette baggrundsbilleder Afleveres i Fronter som link til index.html i din dag 6 mappe. Deadline i morgen (tirsdag) kl