Layout
Än så länge har vi ändrat på hur element på vår sida ser ut med CSS. Men nu ska vi börja ändra på var element ligger. Och det är med detta som CSS verkligen kommer till användning. Vi har fem olika sätt att välja hur element på vår sida ska positionera sig:
- Normal flow
- Detta är normalläget. Alla block element hamnar på en ny rad.
- Relativ position
- Flyttar elementet i relation till vart det skulle ha varit i normal flow.
- Absolut position
- Tar ut elementet ur normal flow och placerar det i förhållande till det block det ligger i.
- Fixed position
- Detta tar också ut elementet ur normal flow och placerar det på en specifik plats på skärmen.
- Floating
- Plockar ut elementet ur normal flow och flyttar det till vänster eller höger. Andra element kan sen "flöda" runt det.
Normal flow
Normal flow är standard inom HTML och är det som gör att block-element kommer nedanför varandra. Skulle man vilja specificera att ett element ska vara i Normal flow skriver man:
.enklass{
position: static;
}Relativ position
Relativ position utgår från vart elementet hade legat i det normala flödet. Sen kan man justera om det ska flyttas uppåt, nedåt, vänster eller höger.
.enklass2{
position: relative;
bottom: 100px;
left: 200px;
}Den här texten är flyttad uppåt och åt höger. Och om vi har mer text ser vi hur den wrappar som man hade velat. Nu fyller vi den med lite mer text. Bara för att den garanterat ska wrappa även om vi har sidan utzoomad.
Det kan vara bra att notera att även om vi har flyttat det övre stycket åt höger så är det lika brett som tidigare och vi behöver därför scrolla i sidled för att kunna se hela texten. För att slippa det så behöver vi ange width.
Absolut position
Om man vill ha mer kontroll över vart ett element ska visas kan man ange en absolut position. Om man inte anger några värden på top eller så flyttas det inte, men alla andra element ignorerar det för att bestämma sin position. Om man anger några andra värden så utgår det från sidans övre vänstra hörn.
.enklass3{
position: absolute;
left: 100px;
width: 200px;
}Resten av elementen ignorerar det här elementet för att bestämma vart de ska ligga.
Fixed position
Om man anger en position till fixed så är den på samma plats på skärmen hela tiden.
.enklass4{
position: fixed;
top:50px;
}Den här texten är hela tiden på samma ställe. Bra va?
Float
Float kan användas för att få andra element att fortsätta bredvid elementet.
.enklass5{
float: left;
}
Till vänster har vi Iron Maidens senaste album "Senjutsu". Den är uppstyckad på två CD-skivor, eller tre LP-skivor.
Man kan också ha saker floatade till höger.
En massa text. Jag borde ha haft typ lite lorem ispum här så att jag itne själv hade behövt skriva en massa och slita ut mina vackra fingerspetsar. Vem vet vad som kan hända med mina fingeravtryck om jag sitter och skriver hela dagen på mitt tangentbord? Kanske försvinner de helt! Flera bokstäver på mitt tangentbord har redan börjat försvinna. Det är ju då framför allt bokstäverna "C" och "V" som typ är borta. Tangenterna "S", "D", "Ctrl" och "Alt" är också nästan helt nedslitna. Men tangenten "Alt gr" är helt utsuddad. Men jag var inte duktig nog och förberedde mig som jag borde ha gjort! Den här genomgången är lite rolig, appropå, inget särskilt. Men har du orkat läsa ner hit så förtjänar du lite trivia. Tidigare har jag lärt ut hur man använder float för att göra kolumner. Men det är fett jobbigt och det finns väldigt mycket bättre sätt att göra det på. Så nu har jag strukit den biten. Så det här var bara halva sidan förut. Nu borde jag ha skrivit tillräckligt mycket. Det räcker om man zoomar in i alla fall.