125 besökare, 1 medlem och 1 Student är online nu
Loopia

CSS (Cascading Style Sheets)

TIPS! Läs guiden Responsiv layout » för anpassning till mobila enheter och smartphones.

Layout med CSS - grunderna steg-för-steg

CSS kan användas till layouter och är då i grunden DIV-boxar (containers - containing block) som placeras bredvid eller inuti varandra.

OBS! Det är viktigt att du vet hur innehållet disponeras för att den totala storleken på boxarna ska bli rätt - läs mer i guiden CSS positionering »

DIX-boxarna som innehållet ska placeras i anger du i en extern CSS-mall som du länkar till varje dokument.

I exemplet är CSS-filen sparad med namnet layout.css och innehåller de tre mallarna #sidhuvud - #kolumn1 -#kolumn2 som alltså är boxarnas namn.

CSS-dokumentet kan du skapa i en vanligt texteditor som tex Anteckningar/Notepad eller i din vanliga favorit-editor. Det viktiga är att dokumenten sparas som ett vanligt textdokument med filändelsen ".css".

Innehållet i dokumentet layout.css:

#sidhuvud {
}
#kolumn1 {
float: left;
width: 200px;
}
#kolumn2 {
float: left;
width: 200px;
}

Sidhuvudet sträcker sig över hela sidans bredd men kolumnerna placeras bredvid varandra genom att du angivit float: left - läs mer om justering i sidled i guiden CSS positionering »

Länka ditt HTML-dokument till den externa CSS-mallen ange vilka delar av ditt dokument som ska använda mallarna genom att omsluta innehållet med <DIV>.

Så här kan HTML-koden se ut:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Webdesignskolan, CSS layout</title>
<link href="layout.css" rel="stylesheet" type="text/css">
</head>
<body>

<div id="sidhuvud">
<p>Sidhuvud</p>
</div>

<div id="kolumn1">
<p>Kolumn1: </p>
<p>En layout uppbyggd av DIV-boxar och CSS.</p>
</div>

<div id="kolumn2">
<p>Kolumn2:</p>
<p>CSS - (Cascading Style Sheets) är stilmallar som tillåter både den som skapar dokument och den som läser dem att använda sin egen stilmall. I praktiken har CSS använts till att formge dokument när det gäller färg, teckensnitt, justering av text och objekt mm. En enda CSS-mall kan styra tusentals dokument och det är då enkelt att ändra formateringen genom att det bara i CSS-mallen. </p>
</div>

</body>
</html>

När mallarna är definierade med <DIV> har du skapat boxar där allt innehåll formateras enligt anvisningarna i CSS-mallen:

Klicka här för att se exemplet Öppnas i nytt fönster (Open in new window) 

 

Bakgrundsfärg, marginaler och padding

Boxarna är transparenta som standard men du kan ange en bakgrundsfärg som då visas i området med innehåll och sträcker sig över hela boxens bredd och höjd.

I exemplet är bakgrundsfärg angiven för #sidhuvud och #kolumn1:

#sidhuvud {
background: #cc99cc;
}
#kolumn1 {
float: left;
width: 200px;
background: #ffccff;
}
#kolumn2 {
float: left;
width: 200px;
}

Klicka här för att se exemplet Öppnas i nytt fönster (Open in new window) 

 

För att få boxarna att placeras utan avstånd mot sidans kanter anger du sidmarginal i CSS-mallen för BODY. Det räcker egentligen att ange attributet margin men för funktionalitet i fler webbläsare anges även padding:

Avståndet mellan boxens kant och innehåll kan du påverka med PADDING. Ett avstånd i form av padding läggs till området utanför boxens innehåll och den totala ytan på boxen blir större - läs mer om hur padding påverkar boxarnas storlek i guiden CSS positionering »

Så här kan CSS-koden se ut:

body {
margin: 0;
padding: 0;
}
#sidhuvud {
background: #cc99cc;
padding: 20px;
}
#kolumn1 {
float: left;
width: 200px;
padding: 20px;
background: #ffccff;
}
#kolumn2 {
float: left;
width: 200px;
padding: 20px;
}

Klicka här för att se exemplet Öppnas i nytt fönster (Open in new window) 

 

Kolumnernas höjd och bakgrundsfärg

En begränsning med CSS-boxar är att bakgrundsfärg och bakgrundsbild bara visas bakom innehållet i boxen och inte i de tomma ytorna. Det kan du se i exemplet ovan där Kolumn1 är "kortare" än Kolumn2.

Ett lösning är ange en höjd på DIV-boxen som innehåller kolumnen. Du kan ange höjden med attributen HEIGHT eller MIN-HEIGHT.

Om du vet vad en DIV-box kommer att innehålla kan du ange ett fast värde för höjden med height. I vårt exempel kan vi anta att det tillkommer mer text i en kolumn och väljer då att ange min-height vilket innebär att boxens höjd kan expandera med innehållet.

Så här kan CSS-mallen se ut:

body {
margin: 0;
padding: 0;
}
#sidhuvud {
background: #cc99cc;
padding: 20px;
}
#kolumn1 {
float: left;
width: 200px;
min-height: 350px;
padding: 0 20px 20px 20px;
background: #ffccff;
}
#kolumn2 {
float: left;
width: 200px;
min-height: 350px;
padding: 0 20px 20px 20px;
}

Notera att padding har ändrats så att avstånd i överkant är 0 pixlar.

Så här kan resultatet se ut i webbläsaren:

Klicka här för att se exemplet Öppnas i nytt fönster (Open in new window) 

 

Kantlinjer

Kantlinjer kan anges för boxar och bredden på kantlinjen påverkar den totala storleken på samma sätt som med padding - läs mer om hur kantlinjer påverkar boxarnas storlek i guiden CSS positionering »

En kantlinje till höger om Kolumn1 och Kolumn2 kan du ange med border-right:

body {
margin: 0;
padding: 0;
}
#sidhuvud {
background: #cc99cc;
padding: 20px;
}
#kolumn1 {
float: left;
width: 200px;
min-height: 350px;
padding: 0 20px 20px 20px;
background: #ffccff;
border-right: 1px solid #000;
}
#kolumn2 {
float: left;
width: 200px;
min-height: 350px;
padding: 0 20px 20px 20px;
border-right: 1px solid #000;
}

Så här kan resultatet se ut i webbläsaren:

klicka här för att se exemplet Öppnas i nytt fönster (Open in new window) 

 

Yttre kantlinje runt hela layouten kan du göra genom att skapa en ny DIV-box som omsluter alla övriga boxar. I exemplet används DIV-boxen #kolumncontainer som en "containerbox".

Så här kan HTML-koden se ut:

<body>
<div id="kolumncontainer">
<div id="sidhuvud">Sidhuvud</div>
<div id="kolumn1">Kolumn1: texten i kolumnen</div>
<div id="kolumn2">Kolumn2: texten i kolumnen</div>
</div>
</body>
</html>

CSS-koden ändras så att boxen #kolumncontainer har kantlinjer runt om och boxen #sidhuvud en undre kantlinje.

Notera också att den högra kantlinjen i #kolumn2 är borttagen då den ersatts av kantlinjen i den nya boxen #kolumncontainer:

body {
margin: 0;
padding: 0;
}
#kolumncontainer {
float: left;
width: 500px;
margin: 20px;
padding: 10px;
border: 1px solid #000;
}
#sidhuvud {
background: #cc99cc;
padding: 20px;
border-bottom: 1px solid #000;
}
#kolumn1 {
float: left;
width: 200px;
min-height: 350px;
padding: 0 20px 20px 20px;
background: #ffccff;
border-right: 1px solid #000;
}
#kolumn2 {
float: left;
width: 200px;
min-height: 350px;
padding: 0 20px 20px 20px;
}

Så här kan resultatet se ut i webbläsaren:

klicka här för att se exemplet Öppnas i nytt fönster (Open in new window) 

 

Centrering horisontellt

Om du vill centrera en box horisontellt måste du ange en fast bredd på boxen och dessutom får ingen float användas (justering i sidled).

I vårt exempel använder vi float: left; i boxen #kolumncontainer som har kantlinjerna. Om vi tar bort float så kommer de övriga tre boxarnas position påverkas och resultatet kan se ut så här:

Vi väljer istället att göra en ny containerbox med den enda uppgiften att centrera innehållet i alla boxar i förhållande till sidans kanter.

Den nya boxen #centerbox ska omsluta allt annat innehåll.

Så här kan HTML-koden se ut:

<body>
<div id="centerbox">
<div id="kolumncontainer>
<div id="sidhuvud">Sidhuvud</div>
<div id="kolumn1">Kolumn1: texten i kolumnen</div>
<div id="kolumn2">Kolumn2: texten i kolumnen</div>
</div>
</div>
</body>
</html>

För att få en box centrerad horisontellt anges automatiska marginaler till höger och vänster om boxen med margin: auto;

Boxen måste ha en fast bredd. I vårt exempel måste centerboxen vara minst 522 pixlar bred för att boxarna ska få plats. Notera att du måste räkna ihop alla måtten inklusive margin, padding och kantlinjer.

margin: 20+20= 40 pixlar
kolumnbredd: 200+200=400 pixlar
padding: 2x20+2x20=80 pixlar
kantlinjer: 1+1+1=3 pixlar
TOTALT: 523 pixlar

Den nya boxen #centerbox har en bredd på 523 pixlar. I exemplet nedan används en röd kantlinje för att visa bredden i webbläsaren:

body {
margin: 0;
padding: 0;
}
#centerbox {
width: 523px;
margin: 20px auto 20px auto;
border: 1px solid #ff0000;
}
#kolumncontainer {
float: left;
width: 500px;
margin: 0;
padding: 10px;
border: 1px solid #000;
}
#sidhuvud {
background: #cc99cc;
padding: 20px;
border-bottom: 1px solid #000;
}
#kolumn1 {
float: left;
width: 200px;
min-height: 350px;
padding: 0 20px 20px 20px;
background: #ffccff;
border-right: 1px solid #000;
}
#kolumn2 {
float: left;
width: 200px;
min-height: 350px;
padding: 0 20px 20px 20px;
}

Så här kan resultatet se ut i webbläsaren:

klicka här för att se exemplet Öppnas i nytt fönster (Open in new window) 

För att ta bort den röda kantlinjen, som användes för att visuellt se bredden på centerboxen, så kan du radera CSS-koden. I exemplet nedan har vi istället valt att kommentera koden med /* */ så att kantlinjen åter kan användas vid ett senare tillfälle:

#centerbox {
width: 523px;
margin: 20px auto 20px auto;
/* border: 1px solid #ff0000; */
}

 

Centrering vertikalt (och horisontellt)

För att centrera en DIV-box vertikalt måste boxen ha en absolut positionering men däremot behöver ingen bredd eller höjd anges.

I vårt exempel är det container-boxen #centerbox som ska centreras och tilldelas en absolut positionering.

Det finns olika egenskaper för att rotera, skala, flytta och skeva element. I vårt exempel ska vi flytta DIX-boxen med egenskapen TRANSLATE.

Genom att först positionera DIV-boxen 50% nedåt och 50% åt höger och sedan flytta DIV-boxen 50% tillbaka så får vi en centrering som utgår från mittpunkten:

position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);

CSS-specifikationen för translate har inte fullt stöd i alla webbläsare och vi använder ett prefix för att säkerställa att det fungerar i fler webbläsare. Läs mer i guiden CSS-effekter »

Så här kan CSS-koden se ut. Notera att både bredd (width) och marginal (margin) är överflödiga och har tagits bort:

body {
margin: 0;
padding: 0;
}
#centerbox {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);  /* Safari, iOS, Android */
-ms-transform: translateX(-50%) translateY(-50%);  /* Internet Explorer */
-moz-transform: translateX(-50%) translateY(-50%);  /* Mozilla Firefox */
transform: translateX(-50%) translateY(-50%);  /* W3C standard specification */
}
#kolumncontainer {
float: left;
width: 500px;
margin: 0;
padding: 10px;
border: 1px solid #000;
}
#sidhuvud {
background: #cc99cc;
padding: 20px;
border-bottom: 1px solid #000;
}
#kolumn1 {
float: left;
width: 200px;
min-height: 350px;
padding: 0 20px 20px 20px;
background: #ffccff;
border-right: 1px solid #000;
}
#kolumn2 {
float: left;
width: 200px;
min-height: 350px;
padding: 0 20px 20px 20px;
}

Så här kan resultatet se ut i webbläsaren:

klicka här för att se exemplet Öppnas i nytt fönster (Open in new window) 

 

Bredd i relativa och absoluta enheter

Bredden på boxarna i tidigare exempel har angivits i pixlar vilket är en absolut enhet som är oberoende av storleken på andra objekt.

Om du vill att storleken på boxarna ska ändras relativt till fönsterstorleken kan du använda en relativ enhet i % (procent).

I exemplet nedan upptar den omslutande container-boxen #centerbox 70% av webbläsarens fönsterbredd. De tre DIV-boxarna som innehåller sidhuvudet, kolumn1 och kolumn2 har bredd och padding angiven i procent %:

body {
margin: 0;
padding: 0;
}
#centerbox {
width: 70%;
margin: 20px auto 20px auto;
}
#kolumncontainer {
float: left;
width: 98%;
margin: 0;
padding: 10px;
border: 1px solid #000;
}
#sidhuvud {
background: #cc99cc;
padding: 2%;
border-bottom: 1px solid #000;
}
#kolumn1 {
float: left;
width: 20%;
min-height: 350px;
padding: 0 2% 2% 2%;
background: #ffccff;
border-right: 1px solid #000;
}
#kolumn2 {
float: left;
width: 70%;
min-height: 350px;
padding: 0 2% 2% 2%;
}

Så här kan resultatet se ut i webbläsaren:

klicka här för att se exemplet Öppnas i nytt fönster (Open in new window) 

Prova att visa din fönsterstorlek i full bredd för att se när width: 70%; används:

När fönsterstorleken ökas eller minskas ändras storleken på layouten relativt i procent %:

 

Minimal och maximal bredd

Om du använder en bredd som är relativ till fönsterstorleken innebär det att textraderna i boxarna (kolumnerna) kan bli långa vilket kan påverka läsbarheten negativt.

Om du vill ha en maximal bredd på layouten kan du kombinera width med max-width (och min-width). Om webbläsarens fönsterstorlek är större än den angivna maxstorleken så används "max-width" istället för "width".

I exemplet nedan upptar den omslutande container-boxen #centerbox 70% av webbläsarens fönsterbredd men den har en maximal bredd på 800px och en minimal bredd på 500px:

body {
margin: 0;
padding: 0;
}
#centerbox {
width: 70%;
max-width: 800px;
min-width: 500px;
margin: 20px auto 20px auto;
}
#kolumncontainer {
float: left;
width: 98%;
margin: 0;
padding: 10px;
border: 1px solid #000;
}
#sidhuvud {
background: #cc99cc;
padding: 2%;
border-bottom: 1px solid #000;
}
#kolumn1 {
float: left;
width: 20%;
min-height: 350px;
padding: 0 2% 2% 2%;
background: #ffccff;
border-right: 1px solid #000;
}
#kolumn2 {
float: left;
width: 70%;
min-height: 350px;
padding: 0 2% 2% 2%;
}

Så här kan resultatet se ut i webbläsaren när width: 70%; används:

klicka här för att se exemplet Öppnas i nytt fönster (Open in new window) 

Prova att visa din fönsterstorlek i full bredd för att se när max-width: 800px; används:

När fönsterstorleken minskas ändras används min-width: 500px; och en bläddringslist visas:

 

TIPS! Läs guiden Responsiv layout » för anpassning till mobila enheter och smartphones.