Differences
This shows you the differences between two versions of the page.
css_positioning [2012-05-03 12:04] Joakim Forsgren |
css_positioning [2017-09-01 14:54] |
||
---|---|---|---|
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.\\ | ||
- | **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. | ||
- | </ | ||
- | </ | ||
- | </ | ||
- | </ | ||
- | |||
- | </ |