HT21 - DA106A - Layout med CSS (1)

Transcript

1. LAYOUT MED CSS
2. Dagens föreläsning Dagens agenda • Snabb repetition av HTML & CSS • Element för positionering & layout • Positionering av element • Statisk • Relativ • Absolut • Fixederad • Layout med CSS
9. Repetition: CSS • Att formge en webbplats • Olika klädsel till samma innehåll • Hur hittar man det man vill formge?
11. Boxmodellen för HTML-element
12. Exempel på boxmodellen
16. Vad gör en layout bra?
17. Att visa upp HTML-element
18. Tre olika metoder för att visa upp element Float Flexbox Grid
19. MAN KAN I PRINCIP BYGGA ALLT MED ALLA TEKNIKERNA Men det är en dålig idé…
20. ATT VÄLJA HUR ELEMENT SKA VISAS UPP
21. display: float • Fungerar bäst när man vill positionera individuellt element i förhållande till andra element. Exempel: • En bild ska ligga till höger/vänster om texten • En informationsruta ska ligga till höger/vänster om annat innehåll
22. display: flex • Fungerar bäst när man vill positionera flera element i förhållande till varandra, exempelvis: • Flera bilder efter varandra • Element ska ha olika storlekar beroende på tillgång av yta
23. display: grid • Fungerar bäst när man vill positionera element som ett rutnät, exempelvis: • Bygga layouter med kolumner som har ”fasta” propotioner • Element ska ha olika storlekar beroende på tillgång av yta
24. Idag tittar vi på: float
25. OLIKA SÄTT ATT POSITIONERA ELEMENT relativ, statisk, absolut, fixerad
26. CSS - position
27. BOXMODELLEN Egenskapen: box-sizing
30. box-sizing: content-box; box-sizing: border-box; element { box-sizing: content-box; /* Standard */ width: 158px; padding: 20px; border: 1px solid black; } element { box-sizing: border-box; width: 200px; padding: 20px; /* Inkluderas i width */ border: 1px solid black; /* Inkluderas i width */ }
31. DEMO - POSITIONERING Med float
33. https://de veloper.m ozilla.org/ en- US/docs/ Web/HTM L/Element
35. Hur skapar man en layout?
37. Vi behöver alltså • Sidhuvud • Navigation • Innehåll • Sidfot <header> <nav> <main> <footer>
38. Kan vara bra att ha… • En box (<div>) som omsluter hela sidan.
39. DEMO LAYOUT