Globale linker
CSS
- Intro
- Dokumenttre
- Syntax
- Sette inn
- Font
- Text
- Box
- Background
- Classification
- Posisjonering
- CSS-hacks
- Quick guide
- Gode råd
Posisjonering
CCS1 inneholder ikke egenskaper for å kunne bestemme plassering av elementer på en side. W3C har kommet med CCS2 hvor posisjonering er en av egenskapene som er lagt til. Apple har laget en introduksjon til layout ved hjelp av CSS som er verdt å lese
position
I følge CSS2 kan man bruke position til å plassere elementer på en side. Med egenskapene left, top, width og height kan man nøyaktig plassere der man vil. Bruker man også z-index, kan man plassere elementer oppå hverandre. Position kan ha disse verdiene:
- static plasserer elementet i følge normal flyt i dokumentet, altså ingen posisjonering. Left og Top egenskapene har her ingenting å si.
div {position:static} - relative elementets posisjon blir kalkulert ut i fra normal flyt, men er flyttet så og så langt i forhold til der det normalt ville vært plassert.
div {position:relative; left:10px; top:10px}
(elementet plasseres 10 pixler til venstre og 10 pixler nedenfor der det normalt ville vært plassert i følge dokumentets flyt) - absolute plasseres så og så langt fra foreldre-elementets øverste venstre hjørne (hvis elementet ikke er nøstet inn under et annet (f.eks. en <div> inne i en <div>) så er det i forhold til øverste venstre hjørne av body (altså øverste venstre hjørne på skjermen)). Absolutt posisjonerte elementer tas ut av dokumentets normale flyt, og har ingen påvirkning på søskenelementers plassering (f.eks. en <div> som følger en <div> med posisjonering).
div {position:absolute; top:50%; left:50%}
(elementet plasseres med venstre hjørne mitt på skjermen) - fixed elementets posisjon kalkuleres på samme måte som med absolute, men i tillegg vil den alltid ligge fast i vinduet, selv om brukeren scroller i dokumentet.
div {position:fixed; left:0px; top:0px; width:100%; background-color:yellow}
(elementet vil alltid ligge øverst i browservinduet selv om brukeren scroller i dokumentet. Elementet fyller også hele vinduets bredde og har en gul bakgrunn. NB! Fungerer ikke i Internet Explorer.)
top
Hvor langt fra foreldre-elementets (hvis ikke nøstet inn under et annet element, gjelder det i forhold til øverste kant på skjermen) øverste kant elementet blir plassert. Kan ha positive og negative verdier.
Verdier som kan brukes er: ex, em, px, cm, mm, pc, in, pt, %, auto eller inherit.
left
Hvor langt fra foreldre-elementets venstre kant elementet blir plassert. Kan ha positive og negative verdier.
Verdier som kan brukes er: ex, em, px, cm, mm, pc, in, pt, %, auto eller inherit.
right
Hvor langt fra foreldre-elementets høyre kant elementet blir plassert. Kan ha positive og negative verdier.
Verdier som kan brukes er: ex, em, px, cm, mm, pc, in, pt, %, auto eller inherit.
bottom
Hvor langt fra foreldre-elementets nederste kant elementet blir plassert. Kan ha positive og negative verdier.
Verdier som kan brukes er: ex, em, px, cm, mm, pc, in, pt, %, auto eller inherit.
width
Hvor bredt et element er.
Verdier som kan brukes er: ex, em, px, cm, mm, pc, in, pt, %, auto eller inherit.
height
Hvor høyt et element er.
Verdier som kan brukes er: ex, em, px, cm, mm, pc, in, pt, %, auto eller inherit.
z-index
Z-index bestemmer rekkefølgen elementet blir plassert (oppå hverandre). Tenk deg en kortstokk hvor nederste kortet har z-index:1 og øverste kort har z-index:52.
visibility
Visibility egenskapen bestemmer om elementet skal vises eller ikke.
Kan ha verdiene: visible, hidden, collapse eller inherit
overflow
Med overflow bestemmer du hav som skal skje med elementet dersom innholdet er større enn elementets høyde eller bredde kan håndtere.
Kan ha verdiene:
- visible elementet utvider seg for å vise hele innholdet
- hidden innhold som er utover elementets bredde og høyde vises ikke.
- scroll elementet skal ha scrollbar.
- auto elementet får scrollbar dersom det er behov for det.
- inherit arver egenskapen fra foreldre-elementet
clip
Med clip kan du bestemme hva som skal være synlig i elementet. Visse deler av elementet kan altså være usynlig. Egentlig kan man se på clipping som negative marger, marger som går innover i elementet og skjuler innholdet.
Kan ha verdiene rect, auto og inherit.
Skal det i det hele tatt være noen vits med clipping må du bruke verdien rect. Og da må du i tillegg angi verdier både for (i denne rekkefølgen) top, right, bottom og left.
div {clip:rect(10px, 0px, 10px, 5px)}
Dett var en innføring i CSS. Les mer hos W3C om både CSS1 og CSS2. Følg denne linken for å gå tilbake til første siden.
