Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision 		Previous revision
webbutv_07 [2012-10-23 20:07]
Daniel Viström 		webbutv_07 [2016-03-14 08:57]
Daniel Viström
Line 7: Line 7:
 **relative**: Ett elements position är relativ i förhållande till elementets ursprungliga position (dvs sin normala position i dokumentflödet). Plats skapas i dokumentet, men elementet ligger lite vid sidan om platsen.\\ **relative**: Ett elements position är relativ i förhållande till elementets ursprungliga position (dvs sin normala position i dokumentflödet). Plats skapas i dokumentet, men elementet ligger lite vid sidan om platsen.\\
  
-**fixed**: Positionen för ett element är fixerad i relation till webläsarfönstret och kommer att ligga kvar på samma plats även om man scrollar på sidan. Tar ej upp plats på sidan.\\+**fixed**: Positionen för ett element är fixerad i relation till webläsarfönstret och kommer att ligga kvar på samma plats på skärmen även om man scrollar på sidan. Tar ej upp plats på sidan.\\
  
 **absolute**: Positionen för ett element bestäms relativt webläsarfönstet som det ser ut när sidan laddas. Följer med vid scrollning. Tar ej upp plats i dokumentet. Om elementet ligger innuti ett annat element med annan positionering än static används det elementet som referenspunkt.\\ **absolute**: Positionen för ett element bestäms relativt webläsarfönstet som det ser ut när sidan laddas. Följer med vid scrollning. Tar ej upp plats i dokumentet. Om elementet ligger innuti ett annat element med annan positionering än static används det elementet som referenspunkt.\\
Line 13: Line 13:
 Förskjutningen för element med relative, fixed och absolute styrs sedan med egenskaperna **top**, **bottom**, **left** och **right** som t.ex kan ha ett antal pixlar som värde (kan även ha negativa värden).\\ Förskjutningen för element med relative, fixed och absolute styrs sedan med egenskaperna **top**, **bottom**, **left** och **right** som t.ex kan ha ett antal pixlar som värde (kan även ha negativa värden).\\
        
-Element som är positionerade med relative, fixed eller absolute kan ha en position på z-axeln (dvs ligga ovanpå varandra). Positionen styrs med egenskapen **z-index** som kan ha ett heltal som värde (eller auto). \\+Element som är positionerade med relative, fixed eller absolute kan ha en position på z-axeln (dvs ligga ovanpå varandra). Positionen på z-axeln styrs med egenskapen **z-index** som kan ha ett heltal som värde (eller auto). \\
  
  
Line 28: Line 28:
   - Bilden **banner.gif** ska läggas som bakgrundsbild i elementet med **id="banner"**. Detta element ska även ha en höjd på 150px och en bredd på 150px. Elementet ska positioneras så att det ligger kvar i övre högra hörnet av webläsarfönstret oavsett hur man scrollar på sidan.   - Bilden **banner.gif** ska läggas som bakgrundsbild i elementet med **id="banner"**. Detta element ska även ha en höjd på 150px och en bredd på 150px. Elementet ska positioneras så att det ligger kvar i övre högra hörnet av webläsarfönstret oavsett hur man scrollar på sidan.
   - Text med **class="displaced"** ska förskjutas 6px uppåt i förhållande till där den annars skulle ha legat. Fontstorleken för sådan text ska vara 18px och texten ska ha färgen #33CCFF.   - Text med **class="displaced"** ska förskjutas 6px uppåt i förhållande till där den annars skulle ha legat. Fontstorleken för sådan text ska vara 18px och texten ska ha färgen #33CCFF.
-  - **bild1.gif**, **bild2.gif** och **bild3.gif** ska positioneras ovanpå varandra i bestämd ordning (bild1 överst, bild2 i mitten och bild3 underst). Alla bilderna ska ligga 100px från högra sidan och 15px från toppen av webläsarfönstret. De ska sedan följa med då sidan scrollas.+  - **bild1.gif**, **bild2.gif** och **bild3.gif** ska positioneras ovanpå varandra i bestämd ordning (bild1 överst, bild2 i mitten och bild3 underst). Alla bilderna ska ligga 100px från högra sidan och 150px från toppen av webläsarfönstret. De ska sedan följa med texten då sidan scrollas.
  
-Testa att scrolla på sidan och ändra storleken på webläsarfönstret så att du ser och förstår hur de positioneringar du gjort fungerar. Det bör se ut ungefär {{:exempel.jpg?linkonly|så här}}.\\+Testa att scrolla på sidan och ändra storleken på webläsarfönstret så att du ser och förstår hur de positioneringar du gjort fungerar. Det bör se ut ungefär {{:exempel.jpg?linkonly|så här}}.\\ \\
 **Redovisning**: Skicka in din css-fil. **Redovisning**: Skicka in din css-fil.
  
Line 38: Line 38:
 body { body {
   background-color: grey;   background-color: grey;
-  width: 2000px;+  width: 1500px;
 } }