Webdesign Tutorial - Kapitel 4: Enkel sidlayout (CSS)

Om du läste förra kapitlet där vi skrev XHTML-koden för vår enkla sidmall, kommer du nog ihåg att det inte slutade så bra. Vår sida såg ganska ful och tråkig ut när vi tittade på den i ren XHTML utan någon grafisk styling. Det ska vi råda bot på i det här kapitlet.

Först fräschar vi upp minnet med hur vi ville att designen skulle se ut:



Just det, då ska vi se hur vi kan få till det där! Först av allt krävs det ett litet tillägg till vår XHTML-kod, och det är den biten av vår <head>-sektion som talar om för dokumentet att det ska inkludera .css-filen. När det lagts till ser vår head ut såhär:

<head>
  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
  <title>Min sida</title>
  <style type="text/css" media="all">
    @import "exempel.css";
  </style>
</head>

Nu är det dags att börja bygga upp vår exempel.css-fil!



1. Att stajla bodyn

Precis som förut ska vi börja vid utkanten av, eller längst bak i, vår design. Bodyns bakgrund är grundplåten som resten av designen vilar på, ett lager i taget, därför börjar vi med den först. Och i det här fallet är det verkligen inte mycket att orda om eftersom den bara är en färg.

Det finns dock en till sak som vi ska ta hand om, och det är att ta bort ev. marginaler eller utfyllnader genom att sätta margin och padding till noll. Vi gör detta för att webläsare ofta har egna default-värden för dessa, och för att få designen precis som vi vill måste vi sätta våra egna värden för dem - även om vi bara vill ha dem satta till "ingenting".

Det första lilla blocket i vår "exempel.css"-fil ser därför ut såhär:

body{
  background-color: #447799;
  padding: 0px;
  margin: 0px;
}




2. Huvudbehållaren, <div>-elementet "container"

Med den första icke-obligatoriska delen av vår kod, vår "container"-<div>, vill vi åstadkomma några olika saker samtidigt. Först vill vi att den ska ha en svart kantlinje runtom. Sedan vill vi också att den ska kasta en skugga på bakgrunden i underkant och på höger sida. Vi vill också använda den för att bestämma hemsidans fulla bredd, och dessutom vill vi också passa på att centrera den i mitten av webbläsarens fönster.

Vi ska dela upp dessa fyra egenskaper på två steg. Först börjar vi med fyra rader som tar hand om både skuggan och ramlinjen på en gång:

div#container{
  border-right: 4px solid #225577;
  border-bottom: 8px solid #225577;
  background-color: #000000;
  padding: 2px;
}

Kan du se hur det gjordes? Först byggs skuggan upp genom att helt enkelt dra några kantlinjer ("border"), 4 punkter tjock på den högra sidan och 8 punkter under nederkanten. Eftersom vi redan använt "border"-egenskapen kan vi inte förlita oss på den igen för vår egentliga svarta kantlinje runtom sidan, så istället "fejkar" vi den genom att sätta bakgrundsfärgen på hela <div>'en till svart, och flyttar in innehållet 2 punkter från ytterkanten med "padding", vilket betyder att det utrymmet aldrig kan överlappas av någon övrig del av innehållet och därmed skapar det en svart ram runtom!

Då knallar vi vidare och slänger in en egenskap för bredd ("width") som sätter sajtbredden till 700 skärmpunkter, men centreringen är lite klurigare. Metoden man använder för att centrera en <div> med CSS är att sätta marginalerna till "auto", så anpassar de det avståndet till sidorna.

Istället för att skriva ut margin-left: auto; och margin-right: auto; så ska vi använda en kortare formatering. Genom att formulera det som margin: X Y så blir den övre och undre marginalen X, och den vänstra och högra Y. I det här fallet har jag valt 20 punkter för övre och undre marginalen:

div#container{
  border-right: 4px solid #225577;
  border-bottom: 8px solid #225577;
  background-color: #000000;
  padding: 2px;
  width: 700px;
  margin: 20px auto;
}




3. Vår "logga" högst upp på sidan

Även om loggan kanske inte är så fin, så talar den åtminstone om för världen att det här är vår sida och att det är version 1.0 av den. Kommer du ihåg att vi lade till en <span> med en klass i vår XHTML specifikt för det numret? Den ska vi definiera nu! Men först börjar vi med <div>-elementet "logga":

div#logga{
  background-color: #bb0000;
  padding: 5px 15px;
  font-family: Times New Roman, Georgia, serif;
  font-size: 50px;
  font-weight: bold;
  line-height: 70px;
  color: #ff8800;
  height: 70px;
}

Hoppsan, mycket kod blev det! Nåja, det är inte så svårt att tyda. Den första raden är en ganska logisk inställning av bakgrundsfärgen till en röd ton. Sedan följer en kort-form igen, men den här gången för "padding" istället för "margin", som talar om att vi vill att innehållet i <div>-elementet börjar 5 punkter från topp och botten, och 15 punkter från vänster och höger kant.

Sedan kommer en massa font-grejor. Font-family väljer Times New Roman som vårt typsnitt, och om det inte existerar, Georgia, eller det generella familjenamnet serif. Sedan sätter vi textstorleken till 50 punkter hög, följt av ett "bold"-värde för fet stil.

Att sätta "line-height"-värdet är mest en formalitet eftersom något passande i regel väljs automatiskt ändå, men i det här fallet vill jag gärna bestämma själv att texten ska ta upp exakt 70 skärmpunkter på höjden. "Color"-värdet talar om att färgen på texten ska vara en varm orange ton.

Sist av allt sätter vi höjden på <div>'en till 70 punkter. Detta är egentligen inte heller helt nödvändigt eftersom vi bara har några få ord i elementet och line-height redan har tagit hand om deras höjd, men jag vill gärna kasta in en generell höjd-inställning ändå. Kom dessutom ihåg att width- och height-värden sätts utan att räkna in någon ev. padding, så i det här fallet när vi har en topp- och botten-padding på 5 punkter, blir hela området för loggan i själva verket 80 punkter högt.

Allt som är kvar av vår "logga" nu är att göra texten "v1.0" lite mindre. Detta görs enkelt genom en enda snabb egenskap på span-klassen:

.versionText{
  font-size: 25px;
}




4. Huvudmenyn

Då har det blivit dags att ta itu med den fruktade navigations-menyn. Precis som den var den mest avancerade delen av XHTML-koden, så kommer den också att bli det som kräver mest CSS-kod i kapitlet för att fungera som vi vill. Fem definitioner måste göras, med många egenskaper i varje. Först ska <div>-elementet definieras, sedan <ul>-listan, dess <li>-alternativ, och sist <a>-länkarna i både deras "inaktiva" läge samt hur de ska bete sig när muspekaren glider över dem.

Vi tar <div>-elementet först:

div#meny{
  border-top: 2px solid #000000;
  border-bottom: 2px solid #000000;
  background-color: #ff8800;
  padding: 0px;
  height: 25px;
}

Ganska grundläggande grejor där. Vi sätter en kantlinje i svart, 2 punkter bred, både över och under för att avgränsa lite mot loggan och innehållet. Bakgrunds-färgen sätts till en orange ton - samma färg som vi använde för loggans text. Efter att vi försäkrat oss om att det inte finns någon padding och att höjden håller sig inom 25 punkter, går vi vidare till vårt list-element <ul>:

#meny ul{
  width: 100%;
  list-style: none;
  padding: 0px;
  margin: 0px;
}

För de allmänna inställningarna för hela list-objektet, talar vi först om att vi vill att listan (vår meny) ska använda, om så behövs, fulla bredden av behållaren den ligger i. Sedan kommer list-style: none; som används för att ta bort de små punkter som vanligtvis visas i en oordnad lista - de vill vi ju inte ha med i vår huvudmeny.

Efter att vi nollat bort marginaler och utfyllnad går vi vidare till listans "punkter":

#meny li{
  display: inline;
  padding: 0px;
  margin: 0px;
}

List-enheter (<li>) är, som <div>'ar, per default ett block-element, vilket betyder att de fyller den fulla tillgängliga bredden och att varje element börjar på en ny rad. Genom egenskapen display kan vi konvertera detta beteende till det hos ett inline-element istället, så allt kommer på samma rad. Det är det här som gör vår meny vågrät istället för lodrät!

Så vid det här laget har vi talat om för vår meny-lista att inte visa några punkter, och att varje alternativ ska dyka upp på samma rad från vänster till höger. Nu är det dags att definiera de sista egenskaperna - de som anger hur länkarna ska bete sig. Detta görs i två steg, först drar vi upp ett antal "allmänna" egenskaper som gäller alla ankartaggar (<a>) i menyn oavsett om muspekaren befinner sig över dem eller inte:

#meny a{
  display: block;
  width: auto;
  float: left;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 13px;
  font-weight: bold;
  line-height: 25px;
  text-decoration: none;
  background-color: transparent;
  color: #aa0000;
  padding: 0px 15px;
}

Oj, där blev det mycket igen. Vi ska kika på egenskaperna en i taget för att se vad alla gör. Först talar vi om för länkarna att de ska bete sig som block-element, istället för inline som är deras default. Med andra ord precis tvärtom mot för vad vi gjorde med list-alternativen! Men, borde då inte detta få länkarna att också fylla den fulla sidbredden och hamna ovanpå varandra eftersom block-element börjar på en ny rad?

Svaret är såklart ja, men - genom att därefter sätta deras bredd till auto (dvs anpassar sig till vad innehållet är) och "floata" taggarna till vänster, får vi dem att "sväva" sida vid sida och därmed, trots att länk-alternativen beter sig som stora block, så får de ändå alla plats på samma rad.

Sedan finns det inte så mycket att säga om de följande fyra raderna, de talar bara om vilket typsnitt länkarna ska använda, i vilken storlek, att de ska vara fetstil, och hur hög radhöjden ska vara.

Eftersom vi inte vill ha våra meny-länkar understrukna, så använder vi text-deciration: none; för att ta bort detta. Sedan går vi vidare med att sätta bakgrunds-färgen till transparent (vilket betyder att det blir bakgrunds-färgen på <div>'en som "syns igenom"), text-färgen till en röd ton och slutligen en padding, som får vara noll för topp och botten men som lägger till ett litet "glapp" på sidorna om texten inom varje länk-"block". Mer exakt 15 punkter.

OK, dags att bestämma vad som ska hända när muspekaren ligger över länkarna:

#meny a:hover, #meny a:active, #meny a:focus{
  background-color: #dd4400;
  color: #ffff00;
}

Det var inte så svårt, eller hur? Allt vi egentligen vill göra är att låta bakgrunden bli en lite mörkare orange och textfärgen gul istället för röd, enligt skärmdumpen högst upp på sidan.

En sak som var lite nytt är att nu sätter vi plötsligt beteendet för tre olika saker på en gång, separerade med kommatecken. De är helt enkelt olika "lägen" som länkarna kan befinna sig i, "hover", "active" och "focus" beroende på vad musen gör med dem. Om du vill se vad de enskilda lägena betyder kan du prova att definiera dem en och en med olika värden för varje, och sedan leka lite med menyn och se vad som händer.



5. Innehållet

Det var ganska mycket inställningar som krävdes bara för att skapa menyn. Som tur är blir resten lite enklare. Nu har vi nått ner till ytan för innehållet på sidan, där vi börjar med att först definiera vår <div> som heter "innehall":

div#innehall{
  border-top: 5px solid #dddddd;
  background-color: #ffffff;
  padding: 20px;
}

En enkel vit bakgrund har valts och utfyllnaden ("paddingen") runt hela sidan har satts till 20 punkter. Jag slängde också in en 5 punkter bred ljusgrå kantlinje högst upp på sidan, vilket skapar en - ganska ful, men ändock - liten "skugg-effekt" under menyn.

För innehållets räkning vill vi också talar om hur rubriker och stycken ska se ut:

h1{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 25px;
  font-weight: bold;
  line-height: 30px;
  margin-top: 0px;
  margin-bottom: 30px;
}

p{
  font-family: Verdana, Geneva, sans-serif;
  font-size: 12px;
  line-height: 18px;
}

Vid det här laget bör det vara ganska uppenbart vad ovanstående inställningar gör. Om du är osäker på vilken effekt en viss egenskap åstadkommer, prova att ändra på dem lite och se vad som händer när du laddar om sidan!

Vi har en liten detalj kvar i innehållsdelen. Kommer du ihåg "vulputate"? Just det, ordet jag gjorde en länk av. Vi vill ju tala om för webbläsaren hur den ska se ut också. Istället för att som förut definiera den specifikt inom #innehall så kommer jag dock att utelämna id-namnet den här gången och bara definiera beteendet för alla länkar på sidan, såhär:

a{
  font-weight: bold;
  background-color: transparent;
  text-decoration: underline;
  color: #0000dd;
}

a:focus, a:active, a:hover{
  background-color: #aaddff;
}

Detta kommer ändå inte att påverka vår meny eftersom de länkarna blev definierade unikt inom sitt element, men jag anser det ändå vara god form att lägga sådana här "allmänna" (där endast namnet på tagg-typen anges) definitioner högst upp i .css-filen, för att undvika att de hamnar i konflikt med de mer unika undantagen.

När det gäller inställningarna själva så bör de återigen inte innehålla några överraskningar. Jag väljer inget typsnitt utan låter länken köra på vad som råkar användas för tillfället, men något jag vill påtvinga länktexten är att den ska visas i fetstil. Jag ger den också en blå färg, stryker under ordet, och låter bakgrundsfärgen ändras från ingenting till ljusblå vid "hover". Klart!

Ja, inte helt klart förstås. Vi har ju fortfarande sidfoten kvar att ta hand om innan vi kan stämpla ut för dagen.



6. Sidfoten

Att göra <div>'en för sidfoten är också en enkel historia eftersom den ser ut ungefär som menyn:

div#sidfot{
  border-top: 2px solid #000000;
  background-color: #ff8800;
  font-family: Verdana, Geneva, sans-serif;
  font-weight: bold;
  font-size: 13px;
  line-height: 25px;
  padding: 0px 15px;
  height: 25px;
  color: #bb0000;
}

Många inställningar, men inget alltför konstigt. En svart kantlinje högst upp för att avgränsa sidfoten från innehållet, samma bakgrundsfärg som menyraden, några text-inställningar, lite extra utfyllnad på sidorna, se till att höjden på elementet är samma som rad-höjden på texten vilket får texten att centreras vertikalt, och slutligen en röd textfärg.

Men sen var det ju det där med hur vi får en text till vänster och en annan till höger. Vi skapade ju två <div>'ar för detta, "nereVanster" och "nereHoger", så nu ska vi beskriva deras egenskaper:

div#nereVanster{
  height: 25px;
  float: left;
}

div#nereHoger{
  height: 25px;
  float: right;
}

Det är allt som behövs! En är "floatad" till vänster, den andra till höger. Jag sätter också höjden för att vara säker på att de får plats inom deras "parent"-<div>.

Den absolut sista detaljen vi har kvar i vår CSS-kod, är sidfot-länkarna. Vi vill ju att e-posten till höger ska vara klickbar, men istället för att definiera länken inom #nereHoger-elementet, sätter vi den mer allmänt inom #sidfot-elementet bara. På det viset vet vi, att om vi senare vill ha en länk även på vänstra sidan, så kommer den att bete sig på samma sätt.

Sista kod-snutten för sidfot-länkarna ser ut såhär:

#sidfot a{
  background-color: transparent;
  text-decoration: underline;
  color: #aa0000;
  padding: 0px 5px;
}

#sidfot a:hover, #sidfot a:active, #sidfot a:focus{
  background-color: #aa0000;
  text-decoration: none;
  color: #ffff00;
  padding: 0px 3px;
}



Och det var faktiskt allt! Om du har skrivit in all XHTML- och CSS-kod enligt de angivna exemplen så bör du vid det här laget ha en fullt fungerade och helt validerad mall att bygga en hemsida från. Om du inte gillar utseendet jag valde kan du lätt själv ändra färger, typsnitt, kantlinjebredder och andra egenskaper i .css-filen.

Jag erkänner dock att en design baserad på ren kod - även om den är bra som introduktion - inte är mycket att titta på eller attrahera en publik med. För att krydda den lite kan man till exempel rita lite schysst grafik och lägga in som bakgrunds-bilder på bodyn och <div>-elementen, och även byta ut "loggan" mot en finare ritad logotyp. Det finns många saker man kan göra, men de ligger dessvärre inte inom ramarna för denna tutorial. Istället ska vi nu börja titta lite på hur vi kan optimera vår sida för sökmotorerna!





< Tidigare: Enkel sidlayout (XHTML)

robert@eagleowl.se 026-16 13 61 www.eagleowl.se
©2018 EagleOwl