Differences

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

Link to this comparison view

webbutv_07 [2015-09-10 08:49]
127.0.0.1 external edit 		webbutv_07 [2017-09-01 14:54]
Line 1: Line 1:
-====== Positionering ====== 
- 
-I denna övningsuppgift ska vi träna på att använda egenskapen **position** som kan ha följande värden: 
- 
-**static**: Element läggs efter varandra (standardinställning).\\ 
- 
-**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 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.\\ 
- 
-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 på z-axeln styrs med egenskapen **z-index** som kan ha ett heltal som värde (eller auto). \\ 
- 
- 
-===== Uppgift: ===== 
- 
- 
-Med i denna {{:position.zip|fil}} finns en HTML-fil och 4 bilder. Dessa får du inte göra några ändringar i. 
- 
-Gör en css-fil, **style.css**, som du lägger i samma mapp som övriga filer. Följande formatteringar ska göras. Inga andra formatteringar är tillåtna. 
- 
-  - **body** ska ha grå bakgrundsfärg och bredden 1500px. (Vi gör body extra bred för att lätt kunna se efekterna av våra positioneringar). 
-  - **header** ska ha en marginal på 60px uppåt, en padding på 10px åt alla håll, en bredd på 500px, centrerad text och vit bakgrundsfärg. 
-  - **h1** ska ha fontstorlek 12px och ha svart färg. 
-  - 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. 
-  - **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}}.\\ \\ 
-**Redovisning**: Skicka in din css-fil. 
- 
-<php> 
-/* 
- 
-body { 
-  background-color: grey; 
-  width: 2000px; 
-} 
- 
-header { 
- margin-top:60px; 
- padding: 10px; 
- width:500px; 
- text-align:center; 
- background-color: white; 
-} 
- 
-h1 { 
- font-size:12px; 
- color: black; 
-} 
- 
-#banner{ 
- width: 150px; 
- height: 150px; 
- background-image: url(banner.gif); 
- position: fixed; 
- right: 0px; 
- top: 0px; 
-} 
- 
-.displaced { 
- color: #33CCFF; 
- font-size:18px; 
- position: relative; 
- top: -6px; 
-} 
- 
-#bild1, #bild2, #bild3 { 
- position: absolute; 
- right: 100px; 
- top: 150px; 
-} 
- 
-#bild1 { 
- z-index: 3; 
-} 
- 
-#bild2 { 
- z-index: 2; 
-} 
- 
-#bild3 { 
- z-index: 1; 
-} 
- 
- 
-*/ 
-</php>