Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
HT20 - DA106A - Layout med CSS (1)
Search
Anton Tibblin
September 15, 2020
Education
0
370
HT20 - DA106A - Layout med CSS (1)
Anton Tibblin
September 15, 2020
Tweet
Share
More Decks by Anton Tibblin
See All by Anton Tibblin
HT22 - DA106A - Användbarhet (1)
tibbelit
0
330
HT22 - DA106A - Ramverk
tibbelit
0
280
HT22 - DA106A - JavaScript
tibbelit
0
280
HT22 - DA106A - Responsiv webbutveckling
tibbelit
0
330
HT22 - DA106A - Introduktion till CSS
tibbelit
0
390
HT22 - DA106A - Formulär & tabeller
tibbelit
0
390
HT22 - DA106A - Introduktion till HTML
tibbelit
0
550
HT22 - DA106A - Kursintroduktion
tibbelit
0
380
VT22 - DA395A - Storage, geolocation & media
tibbelit
0
300
Other Decks in Education
See All in Education
AI for Learning
fonylew
0
180
今までのやり方でやってみよう!?~今までのやり方でやってみよう!?~
kanamitsu
0
170
SISTEMA DE MEMORIA Y SU IMPACTO EN LAS DECISIONES.
jvpcubias
0
120
みんなのコードD&I推進レポート2025 テクノロジー分野のジェンダーギャップとその取り組みについて
codeforeveryone
0
200
質のよいアウトプットをできるようになるために~「読む・聞く、まとめる、言葉にする」を読んで~
amarelo_n24
0
210
EVOLUCIÓN DE LAS NEUROCIENCIAS EN LOS CONTEXTOS ORGANIZACIONALES
jvpcubias
0
150
理想の英語力に一直線!最高効率な英語学習のすゝめ
logica0419
6
390
”育てる”から”育つ”仕組みへ!スクラムによる新入社員教育
arapon
0
140
チーム開発における責任と感謝の話
ssk1991
0
230
Présentation_1ère_Spé_2025.pdf
bernhardsvt
0
210
生成AIとの上手な付き合い方【公開版】/ How to Get Along Well with Generative AI (Public Version)
handlename
0
630
Técnicas y Tecnología para la Investigación Neurocientífica en el Neuromanagement
jvpcubias
0
120
Featured
See All Featured
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Docker and Python
trallard
45
3.6k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
It's Worth the Effort
3n
187
28k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
The Cost Of JavaScript in 2023
addyosmani
53
8.9k
Thoughts on Productivity
jonyablonski
70
4.8k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
4 Signs Your Business is Dying
shpigford
184
22k
Transcript
LAYOUT MED CSS
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
None
None
None
None
None
None
Repetition: CSS • Att formge en webbplats • Olika klädsel
till samma innehåll • Hur hittar man det man vill formge?
None
Boxmodellen för HTML-element
Exempel på boxmodellen
None
None
None
Vad gör en layout bra?
Att visa upp HTML-element
Tre olika metoder för att visa upp element Float Flexbox
Grid
MAN KAN I PRINCIP BYGGA ALLT MED ALLA TEKNIKERNA Men
det är en dålig idé…
ATT VÄLJA HUR ELEMENT SKA VISAS UPP
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
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
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
Idag tittar vi på: float
OLIKA SÄTT ATT POSITIONERA ELEMENT relativ, statisk, absolut, fixerad
CSS - position
BOXMODELLEN Egenskapen: box-sizing
None
None
DEMO - POSITIONERING Med float
None
https://de veloper.m ozilla.org/ en- US/docs/ Web/HTM L/Element
None
Hur skapar man en layout?
None
Vi behöver alltså • Sidhuvud • Navigation • Innehåll •
Sidfot <header> <nav> <main> <footer>
Kan vara bra att ha… • En box (<div>) som
omsluter hela sidan.
DEMO LAYOUT
None