1. No category

Medieteknik
Övningar i layout med CSS Med CSS strukturerar man innehållet i olika delar. Med div-taggar kan man avgränsa delar av koden
för sidhuvud, navigeringslänkar, innehåll, etc. Med CSS kan man sedan ge dessa delar olika stil och på
det sättet skapa en layout. Vi har redan i föregående laboration sett hur vi kan skapa en enkel layout.
Nu ska vi se hur vi kan styra utformningen av den ännu mer.
I HTML-koden har vi i dessa övningar fyra div-element med id "header", "nav", "content" och
"footer". Vi ska skapa en layout med två kolumner enligt följande figur:
Detta kan göras på flera sätt och vi ska här titta på några olika sätt.
1. Studera koden i dokumenten
På laborationens webbsida kan du ladda ner en mapp med de webbsidor du ska utgå ifrån. Så om du
inte redan gjort det laddar du ner zip-filen och packar upp den. Du får då en mapp med ett antal
webbsidor. Det är i stort sett samma sidor som i föregående laboration, men i HTML-koden är de
ändringar som gjordes i förra labben införda. Stilmallen är uppdelad i två dokument.
Öppna startsidan i webbläsaren •
•
•
Öppna filen index.htm i webbläsaren.
Ha sedan filen öppen, så att du efter varje steg kan ladda om sidan och studera resultatet.
Stilmallen style.css tillämpas, men den är ännu så länge tom, så filen visas utan någon stil i CSS.
HTML-­‐koden •
•
Öppna filen index.htm i editorn och studera HTML-koden.
Det finns de fyra div-elementen för "header", "nav", "content" och "footer". Dessa omges också av
ett div-element med id="wrapper".
CSS-­‐koden •
•
•
Öppna filen style_general.css i editorn och studera koden.
o Detta är de grundläggande stilinställningarna som gjordes i förra laborationen, förutom
den enkla layout som då gjordes.
Öppna filen style.css i din editor.
o Ha sedan filen öppen, så att du i varje övning kan lägga till mer kod.
Skriv in följande kod i style.css:
@import "style_general.css";
•
o Filen style_general.css importeras och kommer att användas vid presentationen.
Spara filen, gå över till webbläsaren, ladda om sidan och studera resultatet.
2015-02-17 – Rune Körnefors ([email protected])
1
Medieteknik
2. Förbered för att skapa layouten
Nu ska du börja skriva kod för de olika delarna i layouten och vi börjar med en del förberedelser,
innan de olika "boxarna" (div-elementen) placeras på sin plats i layouten.
Ta bort förvalda marginaler Elementen html, body och även div kan ha olika förvalda värden på margin och padding, dvs värden
som gäller även då man inte tar med dessa egenskaper i inställningarna (på engelska kallas det
default). Dessa värden kan vara olika i olika webbläsare och ställer till problem, om man vill placera
elementen precis intill varandra. Så därför brukar man börja CSS-koden med att ta bort dessa förvalda
värden genom att sätta margin och padding till 0.
•
Skriv in följande kod i style.css:
* {margin:0; padding:0;}
Med * avses alla HTML-element och vi sätter därmed margin och padding till 0 för alla
element.
o Det är vanligt att inleda koden på detta sätt och sedan lägger man till margin och padding
där man vill ha det.
Studera resultatet i webbläsaren.
Som du ser försvann även alla förvalda marginaler på rubriker, textstycken, listor, etc. Vi vill i
dessa övningar ha kvar dem, utan att behöva skriva kod för att lägga in dem igen. Så vi nöjer oss
med att ta bort margin och padding för html, body och div, istället för alla element.
Ändra koden till:
o
•
•
•
html, body, div {margin:0; padding:0;}
•
Studera resultatet i webbläsaren.
o Nu bör det se ut ungefär som innan denna kod lades dit, fast innehållet bör nu vara precis
kant i kant med fönstrets vänster- och högerkant.
Centrera sidan Sidan ska centreras på samma sätt som i föregående laboration.
•
Skriv in följande kod i CSS-filen:
#wrapper {width:800px; margin:0 auto;}
•
Studera resultatet i webbläsaren.
Färglägg boxarna Det brukar vara bra att ge boxarna olika bakgrundsfärg, så att man kan se var de hamnar och vilken yta
de upptar. Då man sedan placerat dem rätt, kan man ta bort eller byta ut bakgrundsfärgen till det man
vill ha i layouten.
•
Skriv in följande kod i CSS-filen:
body {background-color:#FFF;}
#wrapper {background-color:#0C3;}
#header {background-color:#F93;}
#nav {background-color:#6CF;}
#content {background-color:#FF6;}
#footer {background-color:#F6C;}
Med dessa koder får body en vit bakgrundsfärg, wrapper blir grön, header orange, nav blå,
content gul och footer rosa.
Studera resultatet i webbläsaren.
o
•
2015-02-17 – Rune Körnefors ([email protected])
2
Medieteknik
Du bör kunna se alla färgade ytor. Wrapper kommer in som en grön rand mellan en del av
de andra. I elementen header, nav och footer ser det ut som om det är en marginal och det
är den marginal som finns för h1, ul och p. Denna marginal färgläggs inte, så därför lyser
färgen från body eller wrapper igenom. Eftersom padding för div-elementen är 0, så
färgläggs endast den del som upptas av något innehåll.
Lägg till padding för header, nav, content och footer:
o
•
#header {background-color:#F93; padding:8px;}
#nav {background-color:#6CF; padding:8px;}
#content {background-color:#FF6; padding:16px;}
#footer {background-color:#F6C; padding:8px;}
•
o Observera att det inte ska vara någon padding på wrapper.
Studera resultatet i webbläsaren.
o Nu bör du se att hela div-elementen fylls ut med sin bakgrundsfärg. Du kan nu heller inte
se den gröna färgen för wrapper, eftersom de andra elementen helt täcker den.
Sidfoten Sidfoten blir ganska hög och det beror på att det i HTML-koden finns en p-tagg runt texten. För ptaggarna finns det en marginal i över- och underkant, som gör att vi brukar få en halv tom rad mellan
styckena. Men i sidfoten vill vi inte ha det, så vi ska nu ta bort den och passar då också på att göra en
del andra inställningar.
•
Skriv in följande i CSS-koden:
#footer p {margin:0;
font-size:small; font-style:italic; text-align:center;}
•
o Stilen görs för p-taggen inuti footer och vi tar bort marginalen för p.
o Samtidigt gör vi texten lite mindre, kursiv och centrerad.
Studera resultatet i webbläsaren.
3. Navigeringslänkarna
Navigeringslänkarna ska ändras så att de inte visas som en lista, men de ska vara kvar som länkar
under varandra. Vi ska också ge dem färger. Vi gör det i olika steg, så att du kan testa och se effekten
av de olika stilinställningarna.
Ta bort punktlistan •
Lägg in följande CSS-kod:
#nav ul {margin:0; padding:0;}
#nav li {list-style:none;}
•
o En lista är normalt inskjuten, så vi tar bort alla marginaler och padding på ul-taggen.
o Vi tar också bort punkten till vänster om li-taggarna.
Studera resultatet i webbläsaren.
Färg på länkarna •
Lägg in följande CSS-kod:
#nav a:link,#nav a:visited {background-color:#009; color:#FFF;
text-decoration:none; padding:4px;}
#nav a:hover,#nav a:active {background-color:#369;}
#nav a.thisPage {background-color:#063;}
o
Detta ändrar färgerna och tar bort understrykningen.
2015-02-17 – Rune Körnefors ([email protected])
3
Medieteknik
Vi lägger också till en padding på 4 pixlar, så att inte texten skrivs precis i kanten på den
färgade ytan.
Studera resultatet i webbläsaren.
o Du bör nu se att länkarna delvis överlappar varandra. Det beror på att vi satte padding till
4px och de blir då högre än vad som krävs för texten. Eftersom li-taggarna som länkarna
ligger i inte har någon marginal som ger avstånd mellan dem, så får nu inte länkarna plats,
utan de överlappar varandra.
o
•
Lägg till marginaler •
Lägg till följande CSS-kod för li-taggen:
#nav li {list-style:none; margin:8px 0;}
Eftersom padding är 4px för a-taggarna, så blir det 4px både under och över och det krävs
då 8px mellan dem. Vi sätter margin för li-taggarna till 8px i över- och underkant och 0px
i vänster- och högerkant.
Studera resultatet i webbläsaren.
o Nu kommer länkarna precis intill varandra.
Ändra CSS-koden till:
o
•
•
#nav li {list-style:none; margin:16px 4px;}
Då får vi in en liten marginal runtom "navigeringsknapparna". Vad som kan vara lämpliga
värden på marginalen, går sedan att justera, då layouten är klar.
Studera resultatet i webbläsaren.
o
•
Gör länkknapparna lika breda Länkknapparna är nu olika breda, eftersom de endast upptar den bredd som behövs för texten i dem.
Detta beror på att länkar är inline-taggar. Det går att göra dem lika breda genom att använda width och
ange en bredd, men vi ska istället göra om dem till block-taggar.
•
Lägg till följande CSS-kod för länkarna:
#nav a:link,#nav a:visited {... display:block;}
•
o ... är den kod som redan finns där, så lägg till texten i fetstil.
Studera resultatet i webbläsaren.
o Länkarna fyller nu ut hela bredden i navigeringsfältet och är därmed lika breda. De är
förstås nu alldeles för breda, men navigeringsfältet ska sedan bli en smalare kolumn i
layouten och då kommer länkarna också att se bättre ut.
4. Kopiera stilmallen
Nu är det dags att positionera de olika boxarna (div-taggarna) så som vi vill ha dem i layouten. Du ska
i de följande övningarna göra på olika sätt, så kopiera den stilmall du nu har, så att vi sedan kan utgå
från nuvarande läge igen.
•
I operativsystemet tar du en kopia av style.css och kallar den stylekopia.css.
5. Layout med absolut positionering
I den första layouten gör vi en absolut positionering med koordinater som styr var de olika boxarna
ska visas. Detta ska göras i fönstret, så att sidfoten hamnar högst upp och sidfoten längst ner i fönstret.
Sedan ska vi se till att det endast är div-elementet content som kan scrollas.
Du fortsätter nu att använda dokumentet style.css.
2015-02-17 – Rune Körnefors ([email protected])
4
Medieteknik
Static positionering av wrapper •
Lägg till följande CSS-kod för wrapper:
#wrapper {... position:static;}
... är den kod som redan finns där, så lägg till texten i fetstil.
Med static på wrapper kommer den absoluta positioneringen med top, left, etc. på de inre
div-taggarna att vara koordinater i hela fönstret. Däremot kommer marginaler utgå från
wrapper.
Studera resultatet i webbläsaren.
o Du ser ännu ingen skillnad, utan det ser ut som tidigare.
o
o
•
Absolut positionering av header •
Lägg till följande CSS-kod för header:
#header {... position:absolute; top:0px; height:60px;}
•
•
Studera resultatet i webbläsaren.
o Prova att även lägga till left:0px; så ser du att positioneringen sker i fönstrets
koordinatsystem. Men om vi inte tar med attributet left, så kommer vänsterkanten att
hamna där den omgivande taggen (wrapper) börjar, så ta sedan bort left igen.
o Bredden blir inte mer än vad som krävs för texten i rubriken.
Lägg även till följande kod i stilen för header:
width:784px;
Detta fyller ut header till hela bredden. Med width anges den inre bredden, dvs elementets
bredd minus padding. Hela bredden för sidan är 800px och padding för header är 8px, så
width ska vara 800-2*8=784px.
Studera resultatet i webbläsaren.
o Header överlappar nu navigeringslänkarna, men det löser vi då dessa positioneras.
o
•
Positionering av nav •
Lägg till följande CSS-kod för nav:
#nav {... position:absolute; top:76px; width:100px;}
•
o Värdet på top är height för header + 2*padding för header, dvs 60+2*8=76px.
Studera resultatet i webbläsaren.
o Höjden blir inte rätt, dvs fyller inte ut hela fönstrets höjd, men vi fixar det senare.
Positionering av content •
Lägg till följande CSS-kod för content:
#content {... position:absolute; top:76px;
margin-left:116px; width:652px;}
Denna kolumn ska skjutas in i förhållande till kolumnen med navigeringslänkarna, så vi
måste ange var vänsterkanten ska börja. Vi kan dock inte använda left, eftersom den utgår
från fönstrets vänsterkant och vi vet inte hur bred marginalen mellan fönstrets kant och
navigeringslänkarna är – den är ju satt till auto i wrapper. Men vi kan istället använda
margin-left. Den utgår ifrån wrappers vänsterkant.
o Värdet på margin-left blir width för nav + 2*padding för nav, dvs 100+2*8=116px.
o Värdet på width blir total width - left - 2*padding, dvs 800-116-2*16=652px.
Studera resultatet i webbläsaren.
o
•
2015-02-17 – Rune Körnefors ([email protected])
5
Medieteknik
Positionering av footer Med den stil som hittills gjorts för övriga element, har footer hamnat bakom de andra elementen, så
den syns inte. Nu ska vi se till att footer hamnar längst ner i fönstret.
•
Lägg till följande CSS-kod för footer:
#footer {... position:absolute; bottom:0px;
height:16px; width:784px;}
Här använder vi bottom istället för top. Då utgår vi från fönstrets nederkant. Så med
värdet 0px på bottom anger vi att footers nederkant ska ligga 0 pixlar från fönstrets
nederkant.
o Värdet på height kan man prova sig fram till och 16px verkar vara lagom i detta fall.
Studera resultatet i webbläsaren.
o
•
Justering av höjden för content Innehållet i content fortsätter nu under footer (om du inte har en väldigt stor bildskärm – gör i så fall
fönstret för din webbläsare lite mindre, så att du ser hur det blir, då innehållet i content är för stort). Vi
ska nu justera detta, så att content slutar där footer börjar. Samtidigt ska vi också se till att man kan
scrolla content.
•
Lägg till följande CSS-kod för content:
#content {... bottom:32px;}
•
•
o Underkanten ska vara 32px från fönstrets underkant.
o Värdet är height för footer + 2*padding för footer, dvs 16+2*8=32px.
Studera resultatet i webbläsaren.
o Nu försvann den gula färgen under footer, men innehållet flödar fortfarande över.
Lägg även till följande CSS-kod för content:
#content {... overflow:auto;}
Med overflow anger man hur innehållet ska presenteras, då det inte får plats i den yta som
finns. Med värdet auto läggs det på en rullningslist, då det behövs.
Studera resultatet i webbläsaren.
o Du får nu en rullningslist på content, så att innehållet kan scrollas.
o Prova även att gå till de andra sidorna och se hur det ser ut där.
o
•
Justering av höjden för nav •
Lägg till följande CSS-kod för nav:
#nav {... bottom:32px;}
•
o Underkanten ska även här vara 32px från fönstrets underkant.
o Vi behöver dock inget overflow för nav.
Studera resultatet i webbläsaren.
Layouten är klar Nu är layouten klar. Eller ... nja, det ser ju inte särskilt snyggt ut. Det som är klart är positionering av
de olika elementen. Men sedan återstår det att ta bort eller ändra de olika bakgrundsfärgerna till det
som man vill ha, för att göra det snyggare. Men det hoppar vi över i dessa övningar. Du kan
experimentera med det på egen hand.
2015-02-17 – Rune Körnefors ([email protected])
6
Medieteknik
6. Layout med hjälp av float
Vi ska nu skapa en liknande layout, fast på ett annat sätt och du ska då utgå från den stilmall som du
sparade innan du påbörjade föregående layout.
Kopia av style.css •
•
•
•
•
Stäng style.css i din editor.
I operativsystemet byter du namn på style.css till style5.css.
o Då har du den kvar, ifall du vill gå tillbaks till den senare.
Duplicera filen stylekopia.css och kalla den nya kopian för style.css.
Öppna sedan den nya style.css i editorn.
o Då är du tillbaks till den fil du hade efter övning 3 och det är den du nu ska arbeta vidare
med.
Ladda om sidan i webbläsaren, så att du ser att du nu är tillbaks till läget innan layouten skapades.
Justera nav, så att den "flyter" till vänster •
Lägg till följande CSS-kod för nav:
#nav {... float:left; width:100px;}
Stilen float har tidigare använts i föregående laboration för att justera bilderna, så att de
flyter till vänster eller höger. Nu använder du float för div-elementet för navigering.
Studera resultatet i webbläsaren.
o
•
Justera content, så att den "flyter" till höger •
Lägg till följande CSS-kod för nav:
#content {... float:right; width:652px;}
Vi använder samma bredd på både nav och content som i föregående layout, så
uträkningen av bredden blir densamma som där.
Studera resultatet i webbläsaren.
o
•
Justera footer, så att den hamnar under båda kolumnerna •
Lägg till följande CSS-kod för nav:
#footer {... clear:both;}
Med clear:both anger vi att elementet inte ska visas förrän både det i vänster- och
högerkanten är klara.
Studera resultatet i webbläsaren.
o
•
Fyll ut vänsterkolumnen med färgen för nav Boxen för nav är inte högre än vad som krävs för innehållet, så nu syns den gröna färgen från wrapper,
på den yta som inte täcks av någon box. I detta fall kan vi inte ange var underkanten ska boxen ska
vara, eftersom vi inte använder koordinater för placeringen. Vi kan heller inte sätta något värde på
height, eftersom vi inte vet hur hög kolumnen är – det kan variera mellan olika webbläsare. Så
lösningen på detta brukar vara att man sätter samma bakgrundsfärg på både wrapper och nav.
•
Ändra bakgrundsfärgen för wrapper till:
#wrapper {background-color:#6CF;}
•
Studera resultatet i webbläsaren.
Layouten är klar Då var även denna layout klar, med undantag av färgerna.
2015-02-17 – Rune Körnefors ([email protected])
7
Medieteknik
Jämförelse av layouterna och metoderna Om vi jämför denna layout med den föregående, så kan vi först konstatera att det gick snabbare att
skapa denna och att det inte behövdes så mycket kod. Men det finns också skillnader i utseendet. Den
med absolut positionering begränsade vi till fönstret, så att header, footer och nav alltid var synliga.
Det var endast innehållet i content som scrollades. I den andra layouten med float, scrollas hela sidan,
så header och navigeringslänkarna scrollas ur fönstret.
Andra skillnader är att med float visas de olika delarna i den ordning de ligger i HTML-dokumentet,
medan med absolut positionering kan man placera dem precis var man vill. T.ex. innehåller footer
copyright-info och behöver ju inte vara en sidfot, så vill man istället placera den under header, kan
man lätt göra det med absolut positionering. Med float kan man inte göra det. Däremot kan man lätt
byta plats på de båda kolumnerna. Prova att ändra till float:right för nav och float:left för content.
Det finns alltså för- och nackdelar med båda layouterna, så det går inte generellt säga att den ena
metoden är bättre än den andra.
Spara kopia av stilmallen Ifall du sedan vill gå tillbaks till den kod du skapat här, så bör du nu spara en kopia av stilmallen.
•
•
I operativsystemet duplicerar du style.css och kallar den nya filen style6.css.
Ha kvar style.css som den är, eftersom du i nästa övning ska arbeta vidare med den.
7. Layout med olika bredd
Användare har olika bredd på skärmarna och därför kanske inte layouten får plats. Nu har vi
visserligen gjort sidan ganska smal, 800 pixlar, så de flesta får idag plats med det på en vanlig dator.
Men tittar man på den i en läsplatta eller mobiltelefon, så är skärmen ofta smalare. I nästa laboration
ska vi se mer på anpassning till mobiler, men börjar redan nu med att se lite på hur layouten ser ut i ett
smalare fönster.
Vi börjar här med den layout som du skapade i övning 6.
Gör webbläsarens fönster mindre •
•
Ändra webbläsarens fönsterstorlek. Dra i kanten och minska storleken.
Då fönstret blir smalare än sidan, så ser du att den inte får plats och att det dyker upp en
rullningslist i nederkanten. Det beror på att denna layout har en fast bredd på 800 pixlar.
Ändra till "flexibel" bredd •
Ändra width till max-width i wrapper:
#wrapper {max-width:800px; ...}
Då kan bredden vara maximalt 800 pixlar, men kan också bli smalare om fönstret är
mindre.
Ändra också bredden för nav och content till procentuella värden:
o
•
#nav {... width:12%;}
#content {... width:81%;}
•
o Det var förut 100 respektive 652 pixlar och utav 800 motsvarar det 12% respektive 81%.
Studera resultatet i webbläsaren.
o Dra upp fönstrets storlek till mer än 800 pixlar, så att hela layouten får plats. Dra sedan
sakta ner storleken till ett smalare fönster.
o Ganska snart blir content för bred och hoppar ner under nav. Det beror på att padding
fortfarande anges i pixlar och efter ett tag blir den totala bredden för stor.
2015-02-17 – Rune Körnefors ([email protected])
8
Medieteknik
•
Ändra värdena för padding till procentvärden:
#nav {... padding:1%; ...}
#content {... padding:2%; ...}
•
o Värdena var 8 respektive 16 pixlar och det motsvarar 1% respektive 2% av 800 pixlar.
Studera resultatet i webbläsaren.
o Nu fungerar det bättre att minska storleken. Men då kolumnen med navigeringslänkarna
blir mycket smalare, så får inte länkarna plats.
Bredare navigeringsbox Vi skulle vilja ha en minimistorlek på navigeringsboxen.
•
Prova med att lägga till följande kod:
#nav {... min-width:100px;}
•
•
o Då blir bredden minst 100 pixlar.
Studera resultatet i webbläsaren.
o Vi får nu samma problem som tidigare, med att den totala bredden blir för stor då man
minskar fönstrets storlek och content hoppar ner under nav.
Detta var alltså ingen bra lösning, så ta bort min-width igen.
Det blir alltså problem med att blanda värden i pixel och procent. Vi kan hantera detta på olika sätt och
i nästa laboration kommer vi att titta på s.k. media queries, för att anpassa layouten till olika storlekar.
Men redan nu tittar vi på ett annat sätt i nästa övning.
8. Kolumner med stil som ger en tabell
Vi ska nu skapa kolumnerna genom att göra en tabell. Men, du har kanske hört att man ska undvika
tabeller för att göra en layout. Det handlar dock om att man inte ska använda tabeller i HTML, för att
skapa layouten, eftersom det ger omfattande och rörig kod. Vi ska nu använda display i CSS, för att
skapa en presentation som en tabell.
Det är endast nav och content som ska vara varsin tabellcell, för att skapa två kolumner, så vi måste i
HTML-koden införa ytterligare ett div-element som omger dem.
Kopia av filerna Vill du ha kvar de filer du hittills jobbat med, så börjar du med att skapa en kopia av dem som nu ska
ändras.
•
•
•
•
•
•
•
Stäng filerna i din editor.
I operativsystemet byter du namn på style.css till style7.css, så att du lätt kan hitta den igen.
Skapa en ny mapp som du kallar style8.
Dra ner kopior av index.htm, schema.htm, uppgifter.htm, style_general.css och stylekopia.css i
mappen style8. Dra också ner en kopia av mappen pics.
o Håll ned alt-tangenten samtidigt som du drar filerna till mappen, så blir det en kopia.
Byt namn på stylekopia.css till style.css i mappen style8.
Öppna sedan alla filerna i mappen style8 i din editor.
Öppna också filen index.htm i mappen style8 i din webbläsare.
2015-02-17 – Rune Körnefors ([email protected])
9
Medieteknik
Tillägg i HTML-­‐koden •
Lägg till start- och sluttagg för ett div-element som omger nav och content i samtliga HTML-filer:
<div id="columns">
<div id="nav">
...
</div>
<div id="content">
...
</div>
</div>
o
Detta gör att vi sedan i CSS kan göra columns till en tabell och nav och content till
tabellceller.
Tabell i CSS •
Lägg till följande i CSS-koden:
#columns {display:table; width:100%;}
•
Lägg också till kod som gör nav och content till tabellceller:
#nav {... display:table-cell;}
#content {... display:table-cell;}
•
Studera resultatet i webbläsaren.
o Det blir två kolumner, men vi har fortfarande en fast bredd på sidan.
Layout med flexibel bredd •
Ändra width till max-width i wrapper:
#wrapper {max-width:800px; ...}
•
Lägg också till en bredd på nav:
#nav {... width:100px;}
•
Studera resultatet i webbläsaren.
o Nu kan du ändra storlek på fönstret. Navigeringskolumnen är alltid 100 pixlar och den
andra kolumnen anpassar sig till vad som finns kvar av fönstrets bredd.
o Gör du fönstret riktigt smalt, så kan dock bilderna ställa till problem. Men det hanterar vi i
nästa laboration.
Slut
Vi har nu sett på några olika sätt att skapa en layout med två kolumner. Vill man istället ha tre
kolumner, så gör man på samma sätt. Man kan helt enkelt lägga till ytterligare ett div-element i
HTML-koden och göra stilinställningar för det på samma sätt som vi gjort för nav och content. Det
som brukar vara den största svårigheten med att skapa en layout är att få rätt värden på alla width,
margin och padding.
I nästa laboration ska vi se mer på hur man anpassar stilen för olika presentationer som skrivare och
mobila enheter.
2015-02-17 – Rune Körnefors ([email protected])
10