Differences

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

Link to this comparison view

css_positioning [2017-09-01 12:54]
 css_positioning [2022-07-18 11: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:fixed;)
 +  * Relative Positioning (position:relative;)
 +  * Absolute Positioning (position:absolute;)
 +
 +Ni skall testa er fram ordentligt + att ni kan söka information på internet som kan klargöra vissa saker...
 +
 +{{::css_pos.png|}}
 +
 +**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('coner_pic', 'border')**!\\
 +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!\\
 +{{:ring3.png|}}\\ 
 +Här ser ni lite info om div:arna via webgranskaren.\\ {{::div.png|}}{{::screenshot_at_2012-04-02_13_10_00.png|}}
 +<code php>
 +<?php
 +include('functions.php');
 +?>
 +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 + "http://www.w3.org/TR/html4/loose.dtd">
 +<html>
 +<head>
 + <title>Joakims  CSS-exempel - ex1.php</title>
 + <meta http-equiv="content-type" content="text/html;charset=utf-8">
 + <link rel="stylesheet" type="text/css" href="style2.css" >
 +</head>
 +<body>
 + <div class="mainbar">
 + <?=boxcorners('ring3.png',1)?>
 + <div class="rc">Morbi purus dui, gravida non sodales in, congue nec felis. Fusce lacinia bibendum purus non gravida. Aliquam erat volutpat. Cras varius dui enim. Cras dui tellus, blandit at hendrerit et.</div>
 + <div class="rc2">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>
 + </div>
 + <div class="testbar">
 + <?=boxcorners('ring4.png',0)?>
 + 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>
 +
 + <div class="infobar">
 +
 + <?=boxcorners('ring3.png',1)?>
 + <div class="box1">
 + <?=boxcorners('ring.png',0)?>
 + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc rhoncus vestibulum neque, id elementum libero porta eu. 
 + </div>
 + <div class="box1">
 + <?=boxcorners('ring.png',0)?>
 + Donec sollicitudin, augue in feugiat pulvinar, augue leo congue nulla, in pretium ligula urna id ligula. Pellentesque vitae odio arcu. Praesent dui erat, tempus ut luctus non, pretium at mauris. Aenean ultricies tincidunt nulla, sed tristique mauris tristique ut. Quisque sem arcu, congue eget eleifend nec, sagittis quis lacus. 
 + </div>
 + <div class="box1">
 + <?=boxcorners('ring.png',0)?>
 + 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>
 + <div class="box1">
 + <?=boxcorners('ring.png',0)?>
 + Urabitur vel semper eros. Etiam ullamcorper tincidunt malesuada. Vestibulum in libero massa, vel dictum tellus. 
 + </div>
 + </div>
 +</body>
 +</html>
 +
 +</code>