Box model

Ett viktigt koncept i CSS är något som kallas boxmodel. Detta är något som påverkar alla blockelement på en hemsida. Att förstå hur denna modell fungerar är viktigt för att förstå hur man kan kombinera dessa element på ett bra sätt senare.

Grovt uttryckt kan man säga att man delar in ett blockelement i fyra olika delar:

Innehåll (Content): Här finns innehållet i ett blockelement, det kan vara t.ex. text, bild eller video.
Vaddering (Padding): Ett område utanför innehållet som gör så att innehållet får lite tomt utrymme mot kanterna så att det inte ser så inklämt ut.
Ram/Kantlinje (Border): En kant runt utsidan av paddingen som tydligt avgränsar insidan på blockelementet mot omgivningen.
Marginal/Ytterkant (Margin): Ett osynligt område utanför kantlinjen som anger avståndet till andra element så att de inte ligger kant i kant med varandra.

Jag har skrivit en lite bättre guide, som också innehåller en hel del små tips för hur man formaterar en border(kantlinje). Det finns en hel del mer information om lådmodellen i kapitel 13 (Boxes, sid 300-329). Jag föreslår att ni tittar igenom dessa sidor i boken och försöker förstå vad som beskrivs i min guide innan ni fortsätter med följande uppgifter.

Skapa en sida enligt följande bild och HTML-koden nedanför (4 div:ar svart, gron, rod och bla). Fyll med valfri text ca: 4rader. Formatera dessa enligt bilden utan att använda width eller height. Meningen med uppgiften är att ni ska experimentera med hur blockelement, margin och padding fungerar. Skriv också en förklaring till hur ni formaterat er kod och hur attributen border, margin och padding fungerar i relation till varandra.

Bild på det förväntade boxmodelresultatet. — Notera färgerna på bakgrunden och kanterna. Välj en ljus färgvariant som bakgrundsfärg och en mörk som kantfärg. Se till att din figur har ungefär samma positionering och bredd som rutorna i bilden, d.v.s. avstånd från höger/vänster samt upp/ner. Notera också att den röda rutan är smalare än den blå. Texten har också olika avstånd till kanterna. Allt detta ska göras utan att bestämma en specifik storlek på rutan.

HTML-kod


                            <div class="svart">

		                      <div class="gron">

			                    <div class="rod">

				                  -- valfri text som blir några rader lång --

			                    </div>

			                    <div class="bla">

				                  -- valfri text som blir några rader lång --
           </div>

		                      </div>

	                        </div>

På den svarta boxen så kan vi sätta en width för att sedan använda margin: auto; för att centrera den på skärmen. Men det är den enda width som får användas i den här uppgiften.

CSS-kod


                            .svart{

                                  width: 80%;

                                  margin: 50px auto;

                                  --övrig kod här --

                            }

Det är inte bara bakgrunder och hela sidor som passar att formatera i CSS, även specifika element fungerar jättebra att formattera. Det finns också en del dynamiska funktioner inbyggda i CSS som gör att elementen på en hemsida kan visa olika utseenden beroende på vad användaren gör. En av dessa är hur länkar kan formateras och ändra utseende beroende på om de är aktiva, besökta, om användaren för musen över en länk eller ett område, eller kanske klickar på ett speciellt ställe.

Om man behöver placera block-element vid sidan av varandra så kan man sätta display: inline-block; på de element som ska vara bredvid varandra. Då beter de sig både som block- och inline-element. Det går också att göra normala inline-element till blockelement genom att sätta display: block;. Detta bör dock endast göras på element med ett class- eller id-attribut annars kan man få problem på andra ställen i koden.

Gör en sida där du skapar 4 grupper av identiska länkar (4-7st länkar) men varje grupp ska sedan formateras på sitt eget vis. Förklara på sidan vad :link, :visited, :hover, och :active gör och visa i de olika länkgrupperna att du kan använda dig av dessa. Förklara också varför dessa behöver placeras i en specifik ordning i din CSS-fil för att fungera ordentligt. Varje grupp av länkar ska ha ett eget utseende, men vara tydliga i sin utfomning och visa att de hör ihop inbördes. Minst en av länkmenyerna ska vara horisontell (länkarna på sidan av varandra) och minst en ska vara vertikal (länkarna under varandra). Se till att byta färger, borders, bakgrunder och storlekar på både text och ruta för att göra olika utseenden. Jag har gjort ett par exempel här och ett par till exempel här på hur man kan göra.
Här följer ett förslag på hur HTML-koden kan se ut för länkarna:


					<div id="ett">

					 <ul><strong>LISTA 1</strong>

					  <li><a href="index.html">Min startsida</a></li>

					  <li><a href="http://www.youtube.com/">Youtube</a></li>

					  <li><a href="http://www.svt.se/">SVT</a></li>

					  <li><a href="http://sverigesradio.se/">Sveriges Radio</a></li>

					 </ul>

					</div>

Läs kapitel 14.

Här ska du formatera om en lista med hjälp av css. Ta en valfri lista som du gjorde i Uppgift 2 och formatera den med CSS så att den blir snygg och läsbar.

Undersök hur man kan formatera utseendet på en tabell med CSS. Gör antingen en helt ny tabell eller välj någon du tidigare gjort t.ex. deluppgift 2 eller 4 från Uppgift 4. Formatera den enbart med CSS, ni kan dock behålla alla Colspan/Rowspan som finns i källkoden för att göra det lite enklare. Ni kan också undersöka om ni kan på ett automatiskt sätt variera radfärgerna om man har många rader. För att göra detta måste man kanske lägga till fler rader för att det ska se bra ut.

Undersök hur man kan formatera olika formulär och knappar. Utgå från deluppgift 2 i Uppgift 5 och formatera om de olika knapparna, bockrutorna och inputfälten på ett bra sätt med hjälp av CSS. Ta bort 3d-effekten på rutorna och skapa ett matchande färgschema så att det ser enhetligt och snyggt ut.

<<Box model>>

Box model