HT19 - DA156A - Layout med CSS

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
• Exempel, exempel & exempel

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

15. Vad gör en layout bra?

16. Att visa upp
HTML-element

17. Tre olika metoder för att visa upp element
Float
Flexbox
Grid

18. MAN KAN I PRINCIP BYGGA
ALLT MED ALLA TEKNIKERNA
Men det är en dålig idé…

19. ATT VÄLJA HUR ELEMENT SKA VISAS UPP

20. 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

21. 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

22. 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

23. Idag tittar vi på: float

24. OLIKA SÄTT ATT
POSITIONERA ELEMENT
relativ, statisk, absolut, fixerad

25. CSS - position

26. BOXMODELLEN
Egenskapen: box-sizing

29. DEMO - POSITIONERING
Med float

31. https://de
veloper.m
ozilla.org/
en-
US/docs/
Web/HTM
L/Element

33. Hur skapar man en layout?

35. Vi behöver alltså
• Sidhuvud <header>
• Navigation <nav>
• Innehåll <main>
• Sidfot <footer>

36. Kan vara bra att ha…
• En box (<div>) som omsluter hela sidan.

37. DEMO LAYOUT