Differences
This shows you the differences between two versions of the page.
webbutv_07 [2012-11-06 17:21] Daniel Viström |
webbutv_07 [2022-07-18 13:20] |
||
---|---|---|---|
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 ä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: 2000px; | ||
- | } | ||
- | |||
- | 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; | ||
- | } | ||
- | |||
- | |||
- | */ | ||
- | </ | ||