Övningar i layut med CSS Med CSS strukturerar man innehållet i lika delar. Med div-taggar kan man avgränsa delar av kden för sidhuvud, navigeringslänkar, innehåll, etc. Med CSS kan man sedan ge dessa delar lika stil ch på det sättet skapa en layut. Vi har redan i föregående labratin sett hur vi kan skapa en enkel layut. Nu ska vi se hur vi kan styra utfrmningen av den ännu mer. I HTML-kden har vi i dessa övningar fyra div-element med id "header", "nav", "cntent" ch "fter". Vi ska skapa en layut med två klumner enligt följande figur: Detta kan göras på flera sätt ch vi ska här titta på några lika sätt. 1. Studera kden i dkumenten På labratinens webbsida kan du ladda ner en mapp med de webbsidr du ska utgå ifrån. Så m du inte redan gjrt det laddar du ner zip-filen ch packar upp den. Du får då en mapp med ett antal webbsidr. Det är i strt sett samma sidr sm i föregående labratin, men i HTML-kden är de ändringar sm gjrdes i förra labben införda. Stilmallen är uppdelad i två dkument. Öppna startsidan i webbläsaren Öppna filen index.htm i webbläsaren. Ha sedan filen öppen, så att du efter varje steg kan ladda m sidan ch studera resultatet. Stilmallen style.css tillämpas, men den är ännu så länge tm, så filen visas utan någn stil i CSS. HTML- kden Öppna filen index.htm i editrn ch studera HTML-kden. Det finns de fyra div-elementen för "header", "nav", "cntent" ch "fter". Dessa mges ckså av ett div-element med id="wrapper". CSS- kden Öppna filen style_general.css i editrn ch studera kden. Detta är de grundläggande stilinställningarna sm gjrdes i förra labratinen, förutm den enkla layut sm då gjrdes. Öppna filen style.css i din editr. Ha sedan filen öppen, så att du i varje övning kan lägga till mer kd. Skriv in följande kd i style.css: @imprt "style_general.css"; Filen style_general.css imprteras ch kmmer att användas vid presentatinen. Spara filen, gå över till webbläsaren, ladda m sidan ch studera resultatet. 2015-02-17 Rune Körnefrs (rune.krnefrs@lnu.se) 1
2. Förbered för att skapa layuten Medieteknik Nu ska du börja skriva kd för de lika delarna i layuten ch vi börjar med en del förberedelser, innan de lika "bxarna" (div-elementen) placeras på sin plats i layuten. Ta brt förvalda marginaler Elementen html, bdy ch även div kan ha lika förvalda värden på margin ch padding, dvs värden sm gäller även då man inte tar med dessa egenskaper i inställningarna (på engelska kallas det default). Dessa värden kan vara lika i lika webbläsare ch ställer till prblem, m man vill placera elementen precis intill varandra. Så därför brukar man börja CSS-kden med att ta brt dessa förvalda värden genm att sätta margin ch padding till 0. Skriv in följande kd i style.css: * {margin:0; padding:0;} Med * avses alla HTML-element ch vi sätter därmed margin ch padding till 0 för alla element. Det är vanligt att inleda kden på detta sätt ch sedan lägger man till margin ch padding där man vill ha det. Sm du ser försvann även alla förvalda marginaler på rubriker, textstycken, listr, etc. Vi vill i dessa övningar ha kvar dem, utan att behöva skriva kd för att lägga in dem igen. Så vi nöjer ss med att ta brt margin ch padding för html, bdy ch div, istället för alla element. Ändra kden till: html, bdy, div {margin:0; padding:0;} Nu bör det se ut ungefär sm innan denna kd lades dit, fast innehållet bör nu vara precis kant i kant med fönstrets vänster- ch högerkant. Centrera sidan Sidan ska centreras på samma sätt sm i föregående labratin. Skriv in följande kd i CSS-filen: #wrapper {width:800px; margin:0 aut;} Färglägg bxarna Det brukar vara bra att ge bxarna lika bakgrundsfärg, så att man kan se var de hamnar ch vilken yta de upptar. Då man sedan placerat dem rätt, kan man ta brt eller byta ut bakgrundsfärgen till det man vill ha i layuten. Skriv in följande kd i CSS-filen: bdy {backgrund-clr:#fff;} #wrapper {backgrund-clr:#0c3;} #header {backgrund-clr:#f93;} #nav {backgrund-clr:#6cf;} #cntent {backgrund-clr:#ff6;} #fter {backgrund-clr:#f6c;} Med dessa kder får bdy en vit bakgrundsfärg, wrapper blir grön, header range, nav blå, cntent gul ch fter rsa. 2015-02-17 Rune Körnefrs (rune.krnefrs@lnu.se) 2
Du bör kunna se alla färgade ytr. Wrapper kmmer in sm en grön rand mellan en del av de andra. I elementen header, nav ch fter ser det ut sm m det är en marginal ch det är den marginal sm finns för h1, ul ch p. Denna marginal färgläggs inte, så därför lyser färgen från bdy eller wrapper igenm. Eftersm padding för div-elementen är 0, så färgläggs endast den del sm upptas av någt innehåll. Lägg till padding för header, nav, cntent ch fter: Observera att det inte ska vara någn padding på wrapper. 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, eftersm de andra elementen helt täcker den. Sidften #header {backgrund-clr:#f93; padding:8px;} #nav {backgrund-clr:#6cf; padding:8px;} #cntent {backgrund-clr:#ff6; padding:16px;} #fter {backgrund-clr:#f6c; padding:8px;} Sidften blir ganska hög ch det berr på att det i HTML-kden finns en p-tagg runt texten. För p- taggarna finns det en marginal i över- ch underkant, sm gör att vi brukar få en halv tm rad mellan styckena. Men i sidften vill vi inte ha det, så vi ska nu ta brt den ch passar då ckså på att göra en del andra inställningar. Skriv in följande i CSS-kden: #fter p {margin:0; fnt-size:small; fnt-style:italic; text-align:center;} Stilen görs för p-taggen inuti fter ch vi tar brt marginalen för p. Samtidigt gör vi texten lite mindre, kursiv ch centrerad. 3. Navigeringslänkarna Navigeringslänkarna ska ändras så att de inte visas sm en lista, men de ska vara kvar sm länkar under varandra. Vi ska ckså ge dem färger. Vi gör det i lika steg, så att du kan testa ch se effekten av de lika stilinställningarna. Ta brt punktlistan Lägg in följande CSS-kd: #nav ul {margin:0; padding:0;} #nav li {list-style:nne;} En lista är nrmalt inskjuten, så vi tar brt alla marginaler ch padding på ul-taggen. Vi tar ckså brt punkten till vänster m li-taggarna. Färg på länkarna Lägg in följande CSS-kd: #nav a:link,#nav a:visited {backgrund-clr:#009; clr:#fff; text-decratin:nne; padding:4px;} #nav a:hver,#nav a:active {backgrund-clr:#369;} #nav a.thispage {backgrund-clr:#063;} Detta ändrar färgerna ch tar brt understrykningen. 2015-02-17 Rune Körnefrs (rune.krnefrs@lnu.se) 3
Vi lägger ckså till en padding på 4 pixlar, så att inte texten skrivs precis i kanten på den färgade ytan. Lägg till marginaler Du bör nu se att länkarna delvis överlappar varandra. Det berr på att vi satte padding till 4px ch de blir då högre än vad sm krävs för texten. Eftersm li-taggarna sm länkarna ligger i inte har någn marginal sm ger avstånd mellan dem, så får nu inte länkarna plats, utan de överlappar varandra. Lägg till följande CSS-kd för li-taggen: #nav li {list-style:nne; margin:8px 0;} Eftersm padding är 4px för a-taggarna, så blir det 4px både under ch över ch det krävs då 8px mellan dem. Vi sätter margin för li-taggarna till 8px i över- ch underkant ch 0px i vänster- ch högerkant. Nu kmmer länkarna precis intill varandra. Ändra CSS-kden till: #nav li {list-style:nne; margin:16px 4px;} Då får vi in en liten marginal runtm "navigeringsknapparna". Vad sm kan vara lämpliga värden på marginalen, går sedan att justera, då layuten är klar. Gör länkknapparna lika breda Länkknapparna är nu lika breda, eftersm de endast upptar den bredd sm behövs för texten i dem. Detta berr på att länkar är inline-taggar. Det går att göra dem lika breda genm att använda width ch ange en bredd, men vi ska istället göra m dem till blck-taggar. Lägg till följande CSS-kd för länkarna: #nav a:link,#nav a:visited {... display:blck;}... är den kd sm redan finns där, så lägg till texten i fetstil. Länkarna fyller nu ut hela bredden i navigeringsfältet ch är därmed lika breda. De är förstås nu alldeles för breda, men navigeringsfältet ska sedan bli en smalare klumn i layuten ch då kmmer länkarna ckså att se bättre ut. 4. Kpiera stilmallen Nu är det dags att psitinera de lika bxarna (div-taggarna) så sm vi vill ha dem i layuten. Du ska i de följande övningarna göra på lika sätt, så kpiera den stilmall du nu har, så att vi sedan kan utgå från nuvarande läge igen. I perativsystemet tar du en kpia av style.css ch kallar den stylekpia.css. 5. Layut med abslut psitinering I den första layuten gör vi en abslut psitinering med krdinater sm styr var de lika bxarna ska visas. Detta ska göras i fönstret, så att sidften hamnar högst upp ch sidften längst ner i fönstret. Sedan ska vi se till att det endast är div-elementet cntent sm kan scrllas. Du frtsätter nu att använda dkumentet style.css. 2015-02-17 Rune Körnefrs (rune.krnefrs@lnu.se) 4
Static psitinering av wrapper Lägg till följande CSS-kd för wrapper: #wrapper {... psitin:static;}... är den kd sm redan finns där, så lägg till texten i fetstil. Med static på wrapper kmmer den absluta psitineringen med tp, left, etc. på de inre div-taggarna att vara krdinater i hela fönstret. Däremt kmmer marginaler utgå från wrapper. Du ser ännu ingen skillnad, utan det ser ut sm tidigare. Abslut psitinering av header Lägg till följande CSS-kd för header: #header {... psitin:abslute; tp:0px; height:60px;} Prva att även lägga till left:0px; så ser du att psitineringen sker i fönstrets krdinatsystem. Men m vi inte tar med attributet left, så kmmer vänsterkanten att hamna där den mgivande taggen (wrapper) börjar, så ta sedan brt left igen. Bredden blir inte mer än vad sm krävs för texten i rubriken. Lägg även till följande kd 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 ch padding för header är 8px, så width ska vara 800-2*8=784px. Header överlappar nu navigeringslänkarna, men det löser vi då dessa psitineras. Psitinering av nav Lägg till följande CSS-kd för nav: #nav {... psitin:abslute; tp:76px; width:100px;} Värdet på tp är height för header + 2*padding för header, dvs 60+2*8=76px. Höjden blir inte rätt, dvs fyller inte ut hela fönstrets höjd, men vi fixar det senare. Psitinering av cntent Lägg till följande CSS-kd för cntent: #cntent {... psitin:abslute; tp:76px; margin-left:116px; width:652px;} Denna klumn ska skjutas in i förhållande till klumnen med navigeringslänkarna, så vi måste ange var vänsterkanten ska börja. Vi kan dck inte använda left, eftersm den utgår från fönstrets vänsterkant ch vi vet inte hur bred marginalen mellan fönstrets kant ch navigeringslänkarna är den är ju satt till aut i wrapper. Men vi kan istället använda margin-left. Den utgår ifrån wrappers vänsterkant. Värdet på margin-left blir width för nav + 2*padding för nav, dvs 100+2*8=116px. Värdet på width blir ttal width - left - 2*padding, dvs 800-116-2*16=652px. 2015-02-17 Rune Körnefrs (rune.krnefrs@lnu.se) 5
Psitinering av fter Med den stil sm hittills gjrts för övriga element, har fter hamnat bakm de andra elementen, så den syns inte. Nu ska vi se till att fter hamnar längst ner i fönstret. Lägg till följande CSS-kd för fter: #fter {... psitin:abslute; bttm:0px; height:16px; width:784px;} Här använder vi bttm istället för tp. Då utgår vi från fönstrets nederkant. Så med värdet 0px på bttm anger vi att fters nederkant ska ligga 0 pixlar från fönstrets nederkant. Värdet på height kan man prva sig fram till ch 16px verkar vara lagm i detta fall. Justering av höjden för cntent Innehållet i cntent frtsätter nu under fter (m du inte har en väldigt str 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 cntent är för strt). Vi ska nu justera detta, så att cntent slutar där fter börjar. Samtidigt ska vi ckså se till att man kan scrlla cntent. Lägg till följande CSS-kd för cntent: #cntent {... bttm:32px;} Underkanten ska vara 32px från fönstrets underkant. Värdet är height för fter + 2*padding för fter, dvs 16+2*8=32px. Nu försvann den gula färgen under fter, men innehållet flödar frtfarande över. Lägg även till följande CSS-kd för cntent: #cntent {... verflw:aut;} Med verflw anger man hur innehållet ska presenteras, då det inte får plats i den yta sm finns. Med värdet aut läggs det på en rullningslist, då det behövs. Du får nu en rullningslist på cntent, så att innehållet kan scrllas. Prva även att gå till de andra sidrna ch se hur det ser ut där. Justering av höjden för nav Lägg till följande CSS-kd för nav: #nav {... bttm:32px;} Underkanten ska även här vara 32px från fönstrets underkant. Vi behöver dck inget verflw för nav. Layuten är klar Nu är layuten klar. Eller... nja, det ser ju inte särskilt snyggt ut. Det sm är klart är psitinering av de lika elementen. Men sedan återstår det att ta brt eller ändra de lika bakgrundsfärgerna till det sm man vill ha, för att göra det snyggare. Men det hppar vi över i dessa övningar. Du kan experimentera med det på egen hand. 2015-02-17 Rune Körnefrs (rune.krnefrs@lnu.se) 6
6. Layut med hjälp av flat Medieteknik Vi ska nu skapa en liknande layut, fast på ett annat sätt ch du ska då utgå från den stilmall sm du sparade innan du påbörjade föregående layut. Kpia av style.css Stäng style.css i din editr. I perativsystemet byter du namn på style.css till style5.css. Då har du den kvar, ifall du vill gå tillbaks till den senare. Duplicera filen stylekpia.css ch kalla den nya kpian för style.css. Öppna sedan den nya style.css i editrn. Då är du tillbaks till den fil du hade efter övning 3 ch det är den du nu ska arbeta vidare med. Ladda m sidan i webbläsaren, så att du ser att du nu är tillbaks till läget innan layuten skapades. Justera nav, så att den "flyter" till vänster Lägg till följande CSS-kd för nav: #nav {... flat:left; width:100px;} Stilen flat har tidigare använts i föregående labratin för att justera bilderna, så att de flyter till vänster eller höger. Nu använder du flat för div-elementet för navigering. Justera cntent, så att den "flyter" till höger Lägg till följande CSS-kd för nav: #cntent {... flat:right; width:652px;} Vi använder samma bredd på både nav ch cntent sm i föregående layut, så uträkningen av bredden blir densamma sm där. Justera fter, så att den hamnar under båda klumnerna Lägg till följande CSS-kd för nav: #fter {... clear:bth;} Med clear:bth anger vi att elementet inte ska visas förrän både det i vänster- ch högerkanten är klara. Fyll ut vänsterklumnen med färgen för nav Bxen för nav är inte högre än vad sm krävs för innehållet, så nu syns den gröna färgen från wrapper, på den yta sm inte täcks av någn bx. I detta fall kan vi inte ange var underkanten ska bxen ska vara, eftersm vi inte använder krdinater för placeringen. Vi kan heller inte sätta någt värde på height, eftersm vi inte vet hur hög klumnen är det kan variera mellan lika webbläsare. Så lösningen på detta brukar vara att man sätter samma bakgrundsfärg på både wrapper ch nav. Ändra bakgrundsfärgen för wrapper till: #wrapper {backgrund-clr:#6cf;} Layuten är klar Då var även denna layut klar, med undantag av färgerna. 2015-02-17 Rune Körnefrs (rune.krnefrs@lnu.se) 7
Jämförelse av layuterna ch metderna Om vi jämför denna layut med den föregående, så kan vi först knstatera att det gick snabbare att skapa denna ch att det inte behövdes så mycket kd. Men det finns ckså skillnader i utseendet. Den med abslut psitinering begränsade vi till fönstret, så att header, fter ch nav alltid var synliga. Det var endast innehållet i cntent sm scrllades. I den andra layuten med flat, scrllas hela sidan, så header ch navigeringslänkarna scrllas ur fönstret. Andra skillnader är att med flat visas de lika delarna i den rdning de ligger i HTML-dkumentet, medan med abslut psitinering kan man placera dem precis var man vill. T.ex. innehåller fter cpyright-inf ch behöver ju inte vara en sidft, så vill man istället placera den under header, kan man lätt göra det med abslut psitinering. Med flat kan man inte göra det. Däremt kan man lätt byta plats på de båda klumnerna. Prva att ändra till flat:right för nav ch flat:left för cntent. Det finns alltså för- ch nackdelar med båda layuterna, så det går inte generellt säga att den ena metden är bättre än den andra. Spara kpia av stilmallen Ifall du sedan vill gå tillbaks till den kd du skapat här, så bör du nu spara en kpia av stilmallen. I perativsystemet duplicerar du style.css ch kallar den nya filen style6.css. Ha kvar style.css sm den är, eftersm du i nästa övning ska arbeta vidare med den. 7. Layut med lika bredd Användare har lika bredd på skärmarna ch därför kanske inte layuten får plats. Nu har vi visserligen gjrt sidan ganska smal, 800 pixlar, så de flesta får idag plats med det på en vanlig datr. Men tittar man på den i en läsplatta eller mbiltelefn, så är skärmen fta smalare. I nästa labratin ska vi se mer på anpassning till mbiler, men börjar redan nu med att se lite på hur layuten ser ut i ett smalare fönster. Vi börjar här med den layut sm du skapade i övning 6. Gör webbläsarens fönster mindre Ändra webbläsarens fönsterstrlek. Dra i kanten ch minska strleken. Då fönstret blir smalare än sidan, så ser du att den inte får plats ch att det dyker upp en rullningslist i nederkanten. Det berr på att denna layut 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 ckså bli smalare m fönstret är mindre. Ändra ckså bredden för nav ch cntent till prcentuella värden: #nav {... width:12%;} #cntent {... width:81%;} Det var förut 100 respektive 652 pixlar ch utav 800 mtsvarar det 12% respektive 81%. Dra upp fönstrets strlek till mer än 800 pixlar, så att hela layuten får plats. Dra sedan sakta ner strleken till ett smalare fönster. Ganska snart blir cntent för bred ch hppar ner under nav. Det berr på att padding frtfarande anges i pixlar ch efter ett tag blir den ttala bredden för str. 2015-02-17 Rune Körnefrs (rune.krnefrs@lnu.se) 8
Ändra värdena för padding till prcentvärden: #nav {... padding:1%;...} #cntent {... padding:2%;...} Värdena var 8 respektive 16 pixlar ch det mtsvarar 1% respektive 2% av 800 pixlar. Nu fungerar det bättre att minska strleken. Men då klumnen med navigeringslänkarna blir mycket smalare, så får inte länkarna plats. Bredare navigeringsbx Vi skulle vilja ha en minimistrlek på navigeringsbxen. Prva med att lägga till följande kd: #nav {... min-width:100px;} Då blir bredden minst 100 pixlar. Vi får nu samma prblem sm tidigare, med att den ttala bredden blir för str då man minskar fönstrets strlek ch cntent hppar ner under nav. Detta var alltså ingen bra lösning, så ta brt min-width igen. Det blir alltså prblem med att blanda värden i pixel ch prcent. Vi kan hantera detta på lika sätt ch i nästa labratin kmmer vi att titta på s.k. media queries, för att anpassa layuten till lika strlekar. Men redan nu tittar vi på ett annat sätt i nästa övning. 8. Klumner med stil sm ger en tabell Vi ska nu skapa klumnerna genm att göra en tabell. Men, du har kanske hört att man ska undvika tabeller för att göra en layut. Det handlar dck m att man inte ska använda tabeller i HTML, för att skapa layuten, eftersm det ger mfattande ch rörig kd. Vi ska nu använda display i CSS, för att skapa en presentatin sm en tabell. Det är endast nav ch cntent sm ska vara varsin tabellcell, för att skapa två klumner, så vi måste i HTML-kden införa ytterligare ett div-element sm mger dem. Kpia av filerna Vill du ha kvar de filer du hittills jbbat med, så börjar du med att skapa en kpia av dem sm nu ska ändras. Stäng filerna i din editr. I perativsystemet byter du namn på style.css till style7.css, så att du lätt kan hitta den igen. Skapa en ny mapp sm du kallar style8. Dra ner kpir av index.htm, schema.htm, uppgifter.htm, style_general.css ch stylekpia.css i mappen style8. Dra ckså ner en kpia av mappen pics. Håll ned alt-tangenten samtidigt sm du drar filerna till mappen, så blir det en kpia. Byt namn på stylekpia.css till style.css i mappen style8. Öppna sedan alla filerna i mappen style8 i din editr. Öppna ckså filen index.htm i mappen style8 i din webbläsare. 2015-02-17 Rune Körnefrs (rune.krnefrs@lnu.se) 9
Tillägg i HTML- kden Lägg till start- ch sluttagg för ett div-element sm mger nav ch cntent i samtliga HTML-filer: Tabell i CSS Detta gör att vi sedan i CSS kan göra clumns till en tabell ch nav ch cntent till tabellceller. Lägg till följande i CSS-kden: Lägg ckså till kd sm gör nav ch cntent till tabellceller: Det blir två klumner, men vi har frtfarande en fast bredd på sidan. Layut med flexibel bredd Ändra width till max-width i wrapper: Lägg ckså till en bredd på nav: Nu kan du ändra strlek på fönstret. Navigeringsklumnen är alltid 100 pixlar ch den andra klumnen anpassar sig till vad sm finns kvar av fönstrets bredd. Gör du fönstret riktigt smalt, så kan dck bilderna ställa till prblem. Men det hanterar vi i nästa labratin. Slut <div id="clumns"> <div id="nav">... </div> <div id="cntent">... </div> </div> #clumns {display:table; width:100%;} #nav {... display:table-cell;} #cntent {... display:table-cell;} #wrapper {max-width:800px;...} #nav {... width:100px;} Vi har nu sett på några lika sätt att skapa en layut med två klumner. Vill man istället ha tre klumner, så gör man på samma sätt. Man kan helt enkelt lägga till ytterligare ett div-element i HTML-kden ch göra stilinställningar för det på samma sätt sm vi gjrt för nav ch cntent. Det sm brukar vara den största svårigheten med att skapa en layut är att få rätt värden på alla width, margin ch padding. I nästa labratin ska vi se mer på hur man anpassar stilen för lika presentatiner sm skrivare ch mbila enheter. 2015-02-17 Rune Körnefrs (rune.krnefrs@lnu.se) 10