HT23 - DA106A - Layout med CSS (1)

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