Differences
This shows you the differences between two versions of the page.
css_positioning [2017-09-01 14:54] |
css_positioning [2022-07-18 13:20] (current) |
||
---|---|---|---|
Line 1: | Line 1: | ||
+ | ====== CSS Positioning ====== | ||
+ | Målet är att få bra koll på följande begrepp och veta hur de fungerar: | ||
+ | * Static Positioning (om ingen position anges) | ||
+ | * Fixed Positioning (position: | ||
+ | * Relative Positioning (position: | ||
+ | * Absolute Positioning (position: | ||
+ | |||
+ | Ni skall testa er fram ordentligt + att ni kan söka information på internet som kan klargöra vissa saker... | ||
+ | |||
+ | {{:: | ||
+ | |||
+ | **Uppgift: | ||
+ | Koden nedan får ni inte ändra!\\ | ||
+ | Ni få göra vad ni vill i **style2.css** och i functions.php där ni gör funktionen ** boxcorners(' | ||
+ | Funktionen **boxcorners** retunerar 4 st div:ar som är placerade i varje hörn av föregående div.\\ | ||
+ | Utseendet skall bli så likt bilden ovan som det bara någonsin går. Det räcker att det fungerar i en webläsare.\\ | ||
+ | **TIPS!** | ||
+ | * I funktionen boxcorners måste ni kolla upp hur stor bilden är. | ||
+ | * Börja med att komma på hur man placerar ut de fyra div:arna | ||
+ | * Fundera sedan ut hur man placerar bakgrundsbilden rätt. | ||
+ | * Se till så att det funkar även om det är en border. | ||
+ | * Gör dina ringar och gradienter i Inkscape | ||
+ | |||
+ | Visa mig när ni tycker att ni är klara! | ||
+ | |||
+ | Ex på ring som används till hörn!\\ | ||
+ | {{: | ||
+ | Här ser ni lite info om div:arna via webgranskaren.\\ {{:: | ||
+ | <code php> | ||
+ | <?php | ||
+ | include(' | ||
+ | ?> | ||
+ | < | ||
+ | " | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | <meta http-equiv=" | ||
+ | <link rel=" | ||
+ | </ | ||
+ | < | ||
+ | <div class=" | ||
+ | <? | ||
+ | <div class=" | ||
+ | <div class=" | ||
+ | </ | ||
+ | <div class=" | ||
+ | <? | ||
+ | Praesent risus nunc, feugiat et elementum quis, rutrum nec tortor. Integer tristique, purus id facilisis porttitor, nisl lacus varius nisl, et fermentum elit nulla eget justo. | ||
+ | </ | ||
+ | |||
+ | <div class=" | ||
+ | |||
+ | <? | ||
+ | <div class=" | ||
+ | <? | ||
+ | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc rhoncus vestibulum neque, id elementum libero porta eu. | ||
+ | </ | ||
+ | <div class=" | ||
+ | <? | ||
+ | Donec sollicitudin, | ||
+ | </ | ||
+ | <div class=" | ||
+ | <? | ||
+ | Vestibulum magna purus, interdum eget iaculis quis, posuere nec justo. Sed sed pharetra elit. Aenean egestas leo est, a accumsan erat. Etiam vel odio et ante suscipit rutrum. Ut sed pulvinar nulla. Nulla lectus libero, consectetur in scelerisque nec, pretium scelerisque dui. | ||
+ | </ | ||
+ | <div class=" | ||
+ | <? | ||
+ | Urabitur vel semper eros. Etiam ullamcorper tincidunt malesuada. Vestibulum in libero massa, vel dictum tellus. | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | </ |