Uppgift 7 - CSS positionering

Varje HMTL-element på en hemsida kan positioneras med css egenskapen position. Det finns 5 olika attribut som position kan ha och dessa är:

static

Detta är grundformateringen av alla typer av HTML-element. Den har ingen speciell positionering och beter sig enligt det normala flödet för en sida. Man kan inte påverka statiska element med egenskaperna top, bottom, left, right.

relative

Ett relativt positionerat element positioneras utifrån dess normala (statiska) position. Genom att sätta värden för top, right, bottom och left så kan man flytta elementet från denna position. Andra element kommer normalt sett inte att fylla upp hålrum som lämnats av en sådan förflyttning.

fixed

Ett element som positioneras fixed placeras utifrån användarens webbläsarfönster (viewport). Detta betyder att elementet alltid kommer att vara synligt där det placeras, även om användaren scrollar skärmen. Egenskaperna top, right, bottom och left används för att placera elementet utifrån skärmfönstrets kanter. Fixerade element flyter ovanför andra element på skärmen och lämnar inga hålrum.

absolute

Ett absolute positionerat element utgår till skillnad från fixed från sin närmast positionerade förälder (ancestor). Denna förälder måste ha en formatering annat än static. Egenskaperna top, right, bottom och left används sedan för att placera elementet utifrån förälderns kanter.

sticky

Sticky är en hybridformatering mellan relative och fixed som är beroende på om skärmen har scrollats eller inte. En sticky måste positioneras med minst en av top, right, bottom eller left precis som en fixed men denna formatering används inte förrän man scrollat till elementets relativa position.

När man har element som överlappar andra element så kan det behövas att man berättar vilket som ska ritas ut överst. Detta gör man med egenskapen z-index. Större värden på denna variabel ritas ut över element med ett lägre värde. z-index kan vara både positiv och negativ.

Uppgifter:

1. Skapa en sida med följande HTML:
   

   
   Exempel på html-kod.

   Skapa en egen .png bild som är transparant där en del av bilden täcker det nedre högra hörnet enligt följande exempel:

   
   Exempel på bild, skapa en egen. (kantlinje ingår ej i bilden)

   Formatera först koden så att ni får ett utseende som ser ut ungefär såhär:

   
   Exempel på grundformatering.

   Sedan ska ni genom att använda er av olika positioneringar och andra kända formateringar göra följande utseende, utan att ändra i HTML-koden.

   
   Exempel på färdigt resultat i webbläsaren.

---

2. Här ska ni öva med att skapa en responsiv sida som reagerar på bredden på webbläsarens fönster. Ta en titt på följande sida med ett reponsivt fönster. Prova att ändra storleken på webbläsarfönstret.
   • HTML: För att lagra en specifik text på ett objekt (tagg) så använder man sig av attributet data-* där * är ett valfritt ord som beskriver vilken information man vill lagra. Till exempel så kan man beskriva en länk till någon hemsida mer utförligt typ så här <a href:coolasidan.html data-beskrivning="En tuff hemsida om tuffa saker!">Barbie och Kens kärleksnäste</a>. Man kan lägga till flera data-* attribut på samma tagg.
   • CSS: I css så kan man lägga in olika formatering beroende på vilken typ av enhet som man använder för att titta på sidan. Det finns till exempel screen - för alla typer av skärmar, print - för utskrifter och speech - inställningar för text till tal (fler typer finns). Normalt är dock att man vill formatera för alla typer samtidigt så därför finns även all - Formaterar alla typer samtidigt. För den här uppgiften så vill vi begränsa olika bredder av webbläsarens så då kan vi också i media-frågan bestämma max och min bredd med max-witdh och min-width. En mediafråga i CSS kan se ut såhär:
     @media all and (min-width: 501px) and (max-width: 1000px) {
 div {
  background-color: salmon;
 }
}
Detta kommer att göra så att alla <div>-taggar byter färg till laxrosa om skärmen där sidan visas är mellan 501 och 1000 pixlar bred.
   • CSS: För att lägga in information från ett data-*-attribut bara någon extra text som ska visas så kan man använda sig av CSS-egenskapen content. Om HTML koden för ett element är:
     <a href="www.tuffingarnasklubb.se" data-beskrivning="Här finns det bara tuffa tuffingar som gör tuffa saker.">Tuffingarnas Klubb</a>
     Så skriver vi såhär i CSS:koden för att visa beskrivningen före och adressen efter texten:
     a::before{
 content: attr(data-beskrivning) " ";
}
a::after{
 content: " Adress: " attr(href)
}
Det här borde get ett resultat som ser ut ungefär som:
     Här finns det bara tuffa tuffingar som gör tuffa saker. Tuffingarnas Klubb Adress: www.tuffingarnasklubb.se
   • Genom att kombinera @media, ::after, ::before och content så kan man med hjälp av de olika attributen i HTML skapa ganska tuffa effekter som beror på hur stort webbläsarfönstret är.
   Uppgiften är att skapa en responsiv hemsida där utseendet på till exempel några länkar ändras beroende på hur stort webbläsarfönstert är.
   1. Det ska finnas minst 5 st.(max 8 st.) olika utseenden (lägen, beroende på bredden på sidan). Avståndet där varje läge finns ska inte vara mindre än 150 pixlar brett. räkna också med att det bredaste läget ska kunna visas på en skärm med 1680 pixlars skärmbredd.
   2. Ni ska visa att ni kan använda content till att visa text både definierad i CSS-filen men också ifrån något attribut i HTML-filen.
   3. Ni ska skapa 2 bilder i olika storlek (förslagsvis 20x20 och 100x20), som ni placerar endast inom passande intervall. Experimentera gärna med placeringen både före och efter
   4. Visa också att ni kan skapa ett utseende där innehållet ser ut att passa på sidan (matchande färger, fonter, bilder o.s.v.).
   Alla ovanstående kriterier ska uppfyllas.

---

3. Undersök och använd dig av element med egenskapen float. Experimentera med float för att få text att flyta runt ett element. Gör sedan ytterligare ett blockelement som innehåller fler element du kan floata. Undersök hur du kan positionera dessa element med float: right och float: left. Observera att du kan rensa floats med float: none. Undersök därefter egenskapen clear och hur den används tillsammans med floats. Din sida ska visa och förklara användningen av alla dessa egenskaper med flera floatade element.

   Detta är det floatade elementet.

   Exempel: När man har en samling text, till exempel som den här texten som är medvetet skriven för att bli en lite längre text. Så kan det vara bra att den innesluts i en lämplig tagg. I det här fallet ett vanligt blockelement, en <div>. I det här fallet sä har vi en text som är ganska lång i en generisk div som inte har någon speciell formattering, men sedan har vi också en annan div-tagg som har en specifierad bredd och ska flyta över texten till höger. Den här texten är tänkt att flyta runt den andra diven och det är anledningen till att det här måste vara en lite längre text, så att resultatet ska synas. För att få till det här så använder den andra div:en sig av egenskapen float: right; vilket gör som namnet indikerar att den kommer att flyta mot höger.

   Ett

   Två

   Tre

   Fyra

   Här ovan syns ett annat (kanske inte så tufft) exempel. Elementen kommer i HTML-koden i nummerordning, d.v.s. Ett, två, tre, fyra. Men de floatas (mot höger) i den ordningen också vilket gör att ettan hamnar längst till höger för att den floatas först. Nummer tre är speciell för den floatas inte alls och får därför sin position som vanligt. Om man hovrar över bakgrunden så floatas alla knappar (utom 'Tre') till vänster istället. Notera ordningen!!!

---