POSITIONERING Stefan Grage
Agenda Billeder & tekst-wrapping: Float Positionering: Relativ, absolut, static, fixed Z-index Elastisk centrering Sticky footer Formular Projekt & vejledning
Float En gammel løsning hænger ved… Floats til layout Float er til billedelementer!
Positionering asp asp I går så vi de første positioneringer: Relative & absolute Der er flere – lad os se nærmere på dem…
Positionering
Position: static Elementerne fremvises i den rækkefølge, de vises i html-dokumentet Default-værdi for alle elementer
Position: relative Elementet positioneres i forhold til dets normale (static) position position: relative; top: 50px; Left: 100px;
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;
Position: fixed Positioneret fast I forhold til browservinduet Svært anvendelig pga. Browservindue Men godt til f.eks. Facebook (chat toolbar) Eksempel:
Z-index Vi har arbejdet med x- og y placering Hvad med z-aksen? Element 1: z-index: 1; Element 2: z-index: 2;
Elastisk centrering Centrer et element midt på siden F.eks. Et pop-up (kombineret med z-index)
Fixed footer/sticky footer Hvad hvis vi vil have vores footer til at “sidde fast” I bunden af sitet?
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)
Dagens eksempler %20positionering/
Vejledning & videre arbejde! Og aflevering af website version 2 i aften…