Differences
This shows you the differences between two versions of the page.
webbutv_07 [2017-09-01 14:54] |
webbutv_07 [2022-07-18 13:20] (current) |
||
---|---|---|---|
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**: | ||
+ | |||
+ | **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**: | ||
+ | |||
+ | 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 {{: | ||
+ | |||
+ | Gör en css-fil, **style.css**, | ||
+ | |||
+ | - **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=" | ||
+ | - Text med **class=" | ||
+ | - **bild1.gif**, | ||
+ | |||
+ | 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 {{: | ||
+ | **Redovisning**: | ||
+ | |||
+ | <php> | ||
+ | /* | ||
+ | |||
+ | body { | ||
+ | background-color: | ||
+ | width: 1500px; | ||
+ | } | ||
+ | |||
+ | header { | ||
+ | margin-top: | ||
+ | padding: 10px; | ||
+ | width: | ||
+ | text-align: | ||
+ | background-color: | ||
+ | } | ||
+ | |||
+ | h1 { | ||
+ | font-size: | ||
+ | color: black; | ||
+ | } | ||
+ | |||
+ | #banner{ | ||
+ | width: 150px; | ||
+ | height: 150px; | ||
+ | background-image: | ||
+ | position: fixed; | ||
+ | right: 0px; | ||
+ | top: 0px; | ||
+ | } | ||
+ | |||
+ | .displaced { | ||
+ | color: #33CCFF; | ||
+ | font-size: | ||
+ | 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; | ||
+ | } | ||
+ | |||
+ | |||
+ | */ | ||
+ | </ | ||