Skapa CSS - Layout  1 / Grunder

På den här sidan beskrivs steg för steg hur man kan skapa en enkel layout med CSS / Stilmallar.

Layouten är kodad enligt HTML 4.01 Strict där utseendet och placeringen av sidans olika delar styrs av en CSS i en extern stilmall. Sidan innehåller: Sidhuvud, Sidfot och två kolumner.

Layouten bygger på koder som är korrekta enligt standard - inga märkvärdigheter - den kommer att fungera på samma sätt i flertalet någorlunda moderna webläsare.

Både sidan och stilmallen validerar - men observera att den är bara testad i:
Internet Explorer, Mozilla Firefox, Opera och Netscape för PC.

Inledning, HTML & Stilmall

Inledning

När man skapar en layout med CSS använder man så kallade boxar som placeras bredvid och inuti varandra för att dela upp sidan i sektioner. Man bör ju försöka konstruera sin sida med så minimal och ren kod som möjligt och här förekommer kanske lite fler boxar än vad som egentligen är absolut nödvändigt.

Men layouten är byggd för att man enkelt ska kunna göra egna förändringar utan att hela strukturen brakar ihop. Dessutom är den konstruerad utan "hack" och för att kunna fungera på samma sätt i flertalet webläsare.

Den här layouten kommer att bli elastisk - vilket innebär att bredden kommer att anpassa sig efter textens storlek. Måtten på de olika delarna anges med em och procent.

HTML & Stilmall

Sidans innehåll och struktur skrivs in i själva html-filen. Till att börja med måste den innehålla stommen för en html-sida som kodas enligt HTML 4.01 Strict.

Skapa HTML-dokumentet i en vanlig text-editor som t.ex. Anteckningar. Dokumentet kan döpas till vad som helst - men ska ha fil-ändelsen: html. Till exempel: layout.html. I sidans huvud länkas också till stilmallen som i det här exemplet heter: stilmall.css.

Här är grunden för HTML-dokumentet:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " http://www.w3.org/TR/html4/strict.dtd">
<html lang="sv">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>Sidans titel</title>
<link rel="stylesheet" href="stilmall.css" type="text/css">
</head>
<body> :::: </body>
</html>

Stilmallen skapas också i en vanlig text-editor som t.ex. Anteckningar. Än så länge är det bara ett tomt dokument - som alltså ska döpas till: stilmall.css och placeras i samma mapp som själva sidan. I stilmallen skriver man sedan in de egenskaper som styr sidans utformning.

 Till Toppen 

Skapa sidans struktur

Den här sidan ska innehålla fyra huvuddelar:

Sidans olika delar skapas genom att man infogar boxar med taggen <div> och dess slut-tagg </div>.

Alla boxar får ett eget unikt id och de skrivs in mellan <body> och </body>.

Alltihopa omsluts av en box / container som kommer att innehålla hela sidan: layout.

De fem boxarna skrivs in så här i HTML-koden:

<body>
<div id="layout">

<div id="sidhuvud"><h1>SIDHUVUD</h1></div>
<div id="main"><h2>Kolumn: Main</h2></div>
<div id="side"><h2>Kolumn: Side</h2></div>
<div id="sidfot"><h2>Sidfot</h2></div>

</div>
</body>

På sidan ser det - än så länge - ut så här:

webläsarlayout 1
 Till Toppen 

Bredd & Placering

I stilmallen - dokumentet: stilmall.css - anges nu egenskaperna som kommer att styra sidans utseende.

Till att börja med bestäms de olika sektionernas bredd och placering. Placeringen av boxarna görs med "float".

Så här skrivs det in i dokumentet stilmall.css:

CSS 

#layout {
border: 1px solid #000; }

#sidhuvud {
width: 100%;
border-bottom: 1px solid #000;
float: left; }

#main { width: 68%; float: left; }

#side { width: 32%; float: right; }

#sidfot {
width: 100%;
border-top: 1px solid #000;
clear: both; }
Förklaring:

#layout

  • Med "border" anges att hela alltet får en svart, 1 px bred kant runt om.

#sidhuvud

  • Bredden på sidhuvudet blir 100%.
  • En svart kantlinje på 1px UNDER.
  • Boxen #sidhuvud ska flyta åt vänster.

#main

  • Bredden på boxen #main blir 68%.
  • Boxen #main ska flyta åt vänster.

#side

  • Bredden på boxen #side blir 32%.
  • Boxen #side ska flyta åt höger.

#sidfot

  • Bredden på boxen #sidfot blir 100%.
  • En svart kantlinje på 1px ÖVER.
  • clear: both ser till att man börjar på ny kula efter kolumnerna.

På sidan skulle det bli ungefär så här:

webläsarlayout 1b
 Till Toppen 

Padding & Kantlinjer

För att sidan ska gå smidigare att stajla ska de tidigare boxarna innehålla ytterligare varsin box. Kolumnerna och sidfoten ska också omslutas av en extra box: kolumncontainer.

Så här ser det ut på sidan:

HTML

<body>
<div id="layout">

<div id="sidhuvud">

<div id="shleft">
<div id="shleftcontent"><h1>SIDHUVUD</h1></div>
</div>

</div>

<div id="kolumncontainer">

<div id="main">
<div id="maincontent"><h2>Kolumn: Main</h2></div>
</div>

<div id="side">
<div id="sidecontent"><h2>Kolumn: Side</h2></div>
</div>

<div id="sidfot">
<div id="sidfotcontent"><h2>Sidfot</h2></div>
</div>

</div>

</div>
</body>

För de nya inre boxarna anges egenskaperna för padding och kantlinjer. Detta är för att måtten på boxarna ska stämma. Padding och kantlinjer lägger sig ju som bekant utanför själva boxens bredd.

Mellan /* och */ skrivs en kommentar (parentes) in i stilmallen. Det kan vara användbart för att hålla reda på mallens olika delar.

Så här ser det ut i stilmallen:

CSS 

/* layout */

#layout {
border: 1px solid #000; }

/* sidhuvud */

#sidhuvud {
width: 100%;
border-bottom: 1px solid #000;
float: left; }

#shleft { float: left; }
#shleftcontent { padding: 5px; }


/* kolumncontainer */

#kolumncontainer { width: 100%; clear: both; }


/* kolumn: main */

#main { width: 68%; float: left; }

#maincontent {
padding: 5px;
border: 1px solid blue; } /* blå kant för syns skull */



/* kolumn: side */

#side { width: 32%; float: right; }

#sidecontent {
padding: 5px;
border: 1px solid green; } /* grön kant för syns skull */



/* sidfot */

#sidfot {
width: 100%;
border-top: 1px solid #000;
clear: both; }

#sidfotcontent {
padding: 5px; }
Förklaring:

#shleft

  • Boxen #shleft ska flyta åt vänster i sidhuvudet.

#shleftcontent

  • Innehållet i #shleft får en padding på 5px.

#kolumncontainer

  • Bredden på containern blir 100%.
  • clear: both ser till att man börjar på ny kula efter sidhuvudet.

#maincontent

  • Innehållet får en padding på 5px.
  • ... och en blå kant för syns skull!

#sidecontent

  • Innehållet får en padding på 5px.
  • ...och en grön kant för syns skull!

#sidfotcontent

  • Innehållet får en padding på 5px.

På sidan ser det nu ut ungefär så här:

webläsarlayout 2

I den här layouten placeras Kolumn: main åt vänster och Kolumn: side åt höger. Men det går precis lika bra att göra tvärtom. Byt bara float i stilmallen!

Så här:

#main { width: 68%; float: right; }

#side { width: 32%; float: left; }

Då ser det ut så här i stället:

webläsarlayout 3
 Till Toppen 

Innehåll & Grund-stajling

Okej! Dags att peta in mer innehåll i boxarna och stajla sidans grundutseende!

Mer Innehåll

Huvudrubriken i sidhuvudet blir lite trevligare: MIN HEMSIDA  Big Smile Smily.

Kolumnerna får lite textinnehåll och i sidfoten kan man ju t.ex. skriva in en copyright-notering...

Genom att stoppa in några kommentarer även i HTML-koden blir det lättare att hålla reda på var de olika boxarna börjar och slutar!

Så här kan det då se ut:

HTML

<body>
<div id="layout">

<div id="sidhuvud">

<div id="shleft">
<div id="shleftcontent"><h1>MIN HEMSIDA</h1></div>
</div>

</div> <!-- / sidhuvud -->

<div id="kolumncontainer">

<div id="main">
<div id="maincontent">
<h2>Välkommen!</h2>
<p>Lorem ipsum dolor sit amet, consectetuer...</p>
</div>
</div> <!-- / main -->

<div id="side">
<div id="sidecontent">
<h2>Testa!</h2>
<p>Förstora eller förminska...</p>
</div>
</div> <!-- / side -->

<div id="sidfot">
<div id="sidfotcontent">
<p>Copyright &copy; Ditt Namn 200X</p>
</div>
</div> <!-- / sidfot -->

</div> <!-- / kolumncontainer -->

</div> <!-- / layout -->
</body>

Grund-stajling

Genom att välja body som selector i stilmallen kan man ange en del egenskaper som blir gällande för hela sidan om man inte anger något annat.

Sidans layout ska också få en bredd som är anpassad till teckensnittets storlek med enheten em. Det gör att innehållet på sidan blir elastiskt.

Så här ser det ut i stilmallen:

CSS 
body {
padding: 0; margin: 0;
background-color: #ccc; color: #000;
font: 76% Arial, Helvetica, sans-serif; }

/* layout */

#layout {
width: 63em;
border: 1px solid #000; }
Förklaring:

body

  • padding: 0; margin: 0 - tar bort sidans marginaler i alla webläsare.
  • background-color: #ccc; color: #000 - grå bakgrundsfärg och svart textfärg.
  • font: 76% Arial; - teckensnitt: Arial, 76%. Vilket motsvarar 12px.

#layout

  • width: 63em - ger hela layoten en elastisk bredd - motsvarar c:a 755 px i utgångsläget.
  • Fortfarande svart kantlinje runt om.

Här kan du testa hur det ser ut - sidan öppnas i ett nytt fönster!

 Till Toppen 

Bakgrundsfärg & Bakgrundsbild

Ojsan, det blev ju väldigt grått det där! Boxarna är transparenta som standard - så bakgrundsfärger i några av boxarna och en bakgrundsbild i sidhuvudet vore kanske inte helt fel?

Så här:

CSS 
#sidhuvud {
width: 100%;
background-color: #fff; color: inherit;
background-image: url(sidhuvud1.gif);
border-bottom: 1px solid #000;
float: left; }

#kolumncontainer {
width: 100%;
background-color: #fff; color: inherit;
clear: both; }

#sidfot {
width: 100%;
background-color: #eee; color: inherit;
border-top: 1px solid #000;
clear: both; }
Förklaring:

#sidhuvud

  • Vit bakgrundsfärg. color: inherit - betyder att textfärgen ärvs av förälderelementet.
    Här: Svart från body.
  • background-image: url(sidhuvud1.gif) - Bakgrundsbild: sidhuvud1.gif

#kolumncontainer

  • Kolumnerna får vit bakgrundsfärg. Textfärgen ärvs som ovan.

#sidfot

  • Sidfoten får grå bakgrundsfärg. Textfärgen ärvs som ovan.

Här kan du testa hur det ser ut - sidan öppnas i ett nytt fönster!

 Till Toppen 

Rubriker & Text

Sidans rubriker och text behöver också stajlas.

Eftersom "storleken" på de marginaler som omsluter stycken och rubriker kan variera något i olika webläsare kan det vara bra att själv bestämma hur de ska se ut - så blir det likadant oavsett webläsare.

Rubrikerna ska också få ett annat teckensnitt än brödtexten och teckenstorleken ska bestämmas.

Huvudrubriken överst på sidan är skriven med h1 - en sådan rubrik bara bör förekomma en gång på varje sida. Här tas marginalen bort för huvudrubriker skrivna i sidhuvudet - för att den ska hamna mitt i sidfoten vertikalt.

Brödtexten fixas till så att den blir lite luftigare genom att utöka radavståndet och texten i sidfoten får ett alldeles eget utseende.

Så här:

CSS 

h1, h2, h3, h4, h5 {
font-family: "Times New Roman", Times, serif;
letter-spacing: 1px;
margin-top: 25px;
margin-bottom: 2px; }

h1 { font-size: 2.5em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.33em; }
h4 { font-size: 1.16em; }
h5 { font-size: 1em; }

p { margin: 0 0 15px 0;
font-size: 1em;
line-height: 140%; }

#shleftcontent h1 { margin: 0; }

#sidfotcontent {
padding: 5px;
text-align: center; }

#sidfotcontent p {
margin: 0;
font-size: x-small; }
Förklaring:

h1, h2, h3, h4, h5

  • Teckensnittet får serifer. I första hand Times New Roman.
  • 25 px marginal ÖVER och 2 px marginal UNDER de andra rubrikerna.
  • letter-spacing: 1px - lite glesare mellan bokstäverna
  • Storlek på rubrikerna. De visas i fetstil automatiskt.

p

  • Alla stycken får en marginal på 15px - endast under.
  • Font-storleken blir 1em - alltså 76% som angivits i body.
  • line-height: 140% utökar radavståndet lite.

#shleftcontent h1

  • Inga marginaler runt huvudrubriken.

#sidfotcontent

  • text-align: center centrerar sidfotens innehåll.
  • Text i sidfoten ska inte ha någon marginal och textstorleken blir x-small.

Här kan du testa hur det ser ut - sidan öppnas i ett nytt fönster!

 Till Toppen 

Dela av Kolumnerna

När man skapar en layout där huvud-innehållet (som här) delas upp i kolumner är det vanligt att man vill skilja kolumnerna åt visuellt - kanske med en linje eller genom att ge dem olika färger.

Förr - när man använde tabeller för layout - innebar det inga som helst problem! Men boxar fungerar inte riktigt på samma sätt som tabeller...

När man placerar två boxar bredvid varandra kommer inte boxarnas höjd att automatiskt anpassa sig efter varandra som tabell-celler gör - vilket illustreras av de blå och gröna kantlinjerna i exemplen. Det enda sättet att få det att fungera likadant är att ta till metoder för att få det att se ut som om de gjorde det...

Vilken metod man använder är en smaksak - men har också med sidans utformning att göra.

Nedan följer förslag på hur man kan gå till väga beroende på hur sidan är uppbyggd.

Med Kantlinjer och Bakgrundsfärg

Det vanligaste är ju att själva huvud-innehållet på sidan har mest innehåll. Alltså kommer DEN kolumnen i de flesta fall att ta upp mest plats på höjden!

Om det är förutsättningen för sidans layout - är det inte alls komplicerat att skapa intrycket av att side-kolumnen är lika hög som kolumnen med huvud-innehållet.

Med andra ord: Om man vet vilken kolumn som tar upp mest plats på höjden ger man den en kantlinje och saken är biff!

Så här skulle det bli i stilmallen:

CSS 
#maincontent {
padding: 5px;
border-right: 1px solid #000; }
Förklaring:

#maincontent

  • border-right: 1px solid #000 - ger huvud-innehållet en svart kant till HÖGER.

Här kan du testa hur det ser ut - sidan öppnas i ett nytt fönster!

Lägg till Bakgrundsfärg

Om man dessutom vill att kolumnerna ska ha speciella bakgrudsfärger anger man dem i huvud-kolumnen (om den tar upp störst plats) och i containern som omsluter de båda kolumnerna - för att ge intrycket av att de båda är lika höga.

Så här:

CSS 
#kolumncontainer {
width: 100%;
background-color: #eee; color: inherit;
clear: both; }

#maincontent {
padding: 5px;
background-color: #fff; color: inherit;
border-right: 1px solid #000; }
Förklaring:

#kolumncontainer

  • Grå bakgrundsfärg - syns i endast side-kolumnen. Textfärgen ärvs.

#maincontent

  • Vit bakgrundsfärg. Textfärgen ärvs

Här kan du testa hur det ser ut - sidan öppnas i ett nytt fönster!

Med Bakgrundsbild

En bakgrundsbild är bra att ta till om man inte riktigt vet vilken av kolumnerna som kommer att ta upp störst plats på höjden.

Fast layout

Om man har en layout med fast bredd kan man skilja kolumnerna åt med en bakgrundsbild som har samma bredd som layouten. Den infogas då i boxen som omsluter de båda kolumnerna. Här: #kolumncontainer.

Med den här metoden fungerar det bäst utan bakgrundsfärg i kolumnerna med innehåll. Hur själva bakgrundsbilden ser ut är upp till var och en - här finns ju alla möjligheter.

Så här:

CSS 
#layout {
width: 776px;
border: 1px solid #000; }

#kolumncontainer {
width: 100%;
background-color: #fff; color: inherit;
background-image: url(layout1.gif);
clear: both; }
Förklaring:

#layout

  • Layouten får en fast bredd på 776 pixlar.

#kolumncontainer

  • Bakgrundsfärg som matchar bakgrundsbilden - textfärgen ärvs.
  • Bakgrundsbild: layout1.gif - 776 pixlar bred.

Här kan du testa hur det ser ut - sidan öppnas i ett nytt fönster!

Elastisk layout

Om man har en layout med elastisk bredd och inte riktigt vet vilken av kolumnerna som tar störst plats fungerar det inte så bra att göra som ovan.

När teckestorleken på sidan utökas skulle layouten förändras och kolumnerna skulle bli bredare än delarna i bakgrundsbilden.

Då kan man i stället infoga en bakgrundsbild som fungerar som avdelare och ange exakt var man vill att den ska placeras med enheten procent.

Precis som ovan infogas den i boxen som omsluter de båda kolumnerna.
Här: #kolumncontainer.

Så här:

CSS 
#layout {
width: 63em;
border: 1px solid #000; }

#kolumncontainer {
width: 100%;
background-color: #fff; color: inherit;
background-image: url(avdelare1.gif);
background-position: 68% 0;
background-repeat: repeat-y;
clear: both; }
Förklaring:

#layout

  • Layouten får en elastisk bredd på 63em.

#kolumncontainer

  • Vit bakgrundsfärg - textfärgen ärvs.
  • Bakgrundsbild: avdelare1.gif.
  • background-position: 68% - bakgrunden placeras 68% in på sidan.
  • background-position: 0 - bakgrunden placeras 0 px från boxens top.

Här kan du testa hur det ser ut - sidan öppnas i ett nytt fönster!

OBS!
Den här metoden används fortsättningsvis - eftersom exempel-layouten är elastisk.

 Till Toppen 

Centera Layouten

Om man vill ha layouten centrerad eller inte är en smaksak - men så här gör man i alla fall!  Smily

För att det ska fungera på samma sätt även i äldre webläsare kombineras här några metoder.

Så här:

CSS 
body {
padding: 0; margin: 0;
text-align: center;
background-color: #ccc; color: #000;
font: 76% Arial, Helvetica, sans-serif; }

#layout {
width: 63em;
margin: 0 auto;
text-align: left;
border: 1px solid #000; }
Förklaring:

body

  • text-align: center - centrerar layouten i lite äldre webläsare.

#layout

  • margin: 0 auto - centrerar layouten.
  • text-align: left - justerar tillbaka innehållet åt vänster.

Här kan du testa hur det ser ut - sidan öppnas i ett nytt fönster!

 Till Toppen 

Avslutningsvis

Klart!

HTML

<body>
<div id="layout">

<div id="sidhuvud">

<div id="shleft">
<div id="shleftcontent"><h1>MIN HEMSIDA</h1></div>
</div>

</div> <!-- / sidhuvud -->

<div id="kolumncontainer">

<div id="main">
<div id="maincontent">
<h2>Välkommen!</h2>
<p>Lorem ipsum dolor sit amet, consectetuer...</p>
</div>
</div> <!-- / main -->

<div id="side">
<div id="sidecontent">
<h2>Testa!</h2>
<p>Förstora eller förminska...</p>
</div>
</div> <!-- / side -->

<div id="sidfot">
<div id="sidfotcontent">
<p>Copyright &copy; Ditt Namn 200X</p>
</div>
</div> <!-- / sidfot -->

</div> <!-- / kolumncontainer -->

</div> <!-- / layout -->
</body>
CSS 
body {
padding: 0;
margin: 0;
text-align: center;
background-color: #ccc; color: #000;
font: 76% Arial, Helvetica, sans-serif; }

h1, h2, h3, h4, h5
{ font-family: "Times New Roman", Times, serif;
letter-spacing: 1px;
margin-top: 25px;
margin-bottom: 2px; }

h1 { font-size: 2.5em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.33em; }
h4 { font-size: 1.16em; }
h5 { font-size: 1em; }

p { margin: 0 0 15px 0;
font-size: 1em;
line-height: 140%; }


/* layout */

#layout {
width: 63em;
margin: 0 auto;
text-align: left;
border: 1px solid #000; }


/* sidhuvud */

#sidhuvud {
width: 100%;
background-color: #fff; color: inherit;
background-image: url(sidhuvud1.gif);
border-bottom: 1px solid #000;
float: left; }

#shleft { float: left; }
#shleftcontent { padding: 5px; }
#shleftcontent h1 { margin: 0; }


/* kolumncontainer */

#kolumncontainer { width: 100%;
background-color: #fff; color: inherit;
background-image: url(avdelare1.gif);
background-position: 68% 0;
background-repeat: repeat-y;
clear: both; }


/* kolumn: main */

#main { width: 68%; float: left; }

#maincontent { padding: 5px; }


/* kolumn: side */

#side { width: 32%; float: right; }

#sidecontent { padding: 5px; }


/* sidfot */

#sidfot {
width: 100%;
background-color:#eee; color: inherit;
border-top: 1px solid #000;
clear: both; }

#sidfotcontent {
padding: 5px;
text-align: center; }

#sidfotcontent p {
margin: 0;
font-size: x-small; }

Den här layouten gör alltså inte anspråk på att vara speciellt snygg! Den är tänkt som en mall som inte är alltför komplicerad att jobba vidare med.

Layouten är alltså elastisk men paddingen i boxarna är här angiven till 5 pixlar - vilket kanske inte är optimalt alla gånger. Men det går utmärkt att ändra. Om man vill kan man ange paddingen med enheten em. Då kommer även paddingen att anpassa sig efter textens storlek.

I boxarna finns inte heller någon höjd (height) angiven. Det är inte nödvändigt i en sån här enkel layout. Om man ändå vill precisera höjden är det bäst att använda enheten em. Annars ska man hålla i minnet att innehållet kan komma att flyta utanför boxarna när texten förstoras manuellt!

Här kan du hämta en zipfil med Grund-layout 1 och Stilmallen:
Grundlayout 1.


Är du intresserad av att snygga till designen lite? Kolla in nästa sida!

 Till Toppen