Download præsentationen
Præsentation er lastning. Vent venligst
1
POSITIONERING Stefan Grage https://join.me/stefangrage
2
Agenda Billeder & tekst-wrapping: Float Positionering: Relativ, absolut, static, fixed Z-index Elastisk centrering Sticky footer Formular Projekt & vejledning
3
Float En gammel løsning hænger ved… Floats til layout Float er til billedelementer!
4
Positionering http://www.w3schools.com/cssref/pr_class_position. asp http://www.w3schools.com/cssref/pr_class_position. asp I går så vi de første positioneringer: Relative & absolute Der er flere – lad os se nærmere på dem…
5
Positionering
6
Position: static Elementerne fremvises i den rækkefølge, de vises i html-dokumentet Default-værdi for alle elementer
7
Position: relative Elementet positioneres i forhold til dets normale (static) position position: relative; top: 50px; Left: 100px;
8
Position: absolute Elementet positioneres absolut i forhold til det “forældre”-element, det ligger i Elementet tages ud af dets “flow” (rækkefølge I dokumentet) Position: relative Position: absolute; Top: 50px; Left: 100px; Position: absolute; Top: 50px; Left: 100px;
9
Position: fixed Positioneret fast I forhold til browservinduet Svært anvendelig pga. Browservindue Men godt til f.eks. Facebook (chat toolbar) Eksempel: http://stefangrage.dk/
10
Z-index Vi har arbejdet med x- og y placering Hvad med z-aksen? Element 1: z-index: 1; Element 2: z-index: 2;
11
Elastisk centrering Centrer et element midt på siden F.eks. Et pop-up (kombineret med z-index)
12
Fixed footer/sticky footer Hvad hvis vi vil have vores footer til at “sidde fast” I bunden af sitet?
13
Formular Det eneste vi rigtig mangler, er en formular Jeg har lavet en kode-snippet til jer, der behandler formularen Så I skal kun lave formularen (indtil videre)
14
Dagens eksempler http://websites.keaweb.dk/websider/Websider%207 %20positionering/
15
Vejledning & videre arbejde! Og aflevering af website version 2 i aften…
Lignende præsentationer
