80 besökare, 0 medlemmar och 1 Student är online nu
Loopia

CSS (Cascading Style Sheets)

 

Boxar - containers - containing block

Det finns flera begrepp för att beskriva ett område eller "avgränsat innehåll" med specifika egenskaper som tillämpas med CSS.

Boxar eller containers är områden som anges med CSS och kan användas till kolumner, menyer och andra layouter.

I denna guide används benämningen BOX för att beskriva alla förekomster med egenskaper som beskrivs i infomationstexten.

Storleken på boxen är är den faktiska ytan för:
innehåll+padding+kantlinje.

I exemplet nedan är innehållets storlek 250 pixlar, dvs den yta som disponeras för text, bilder och andra objekt.

Övriga attribut som avståndet mellan innehåll och ytterkant (padding) och kantlinjen räknas utöver den faktiska storleken på boxen.

Dessutom räknas bredd på kantlinje utöver den faktiska storleken på boxen.

Så här kan en box se ut:

Den totala storleken på boxen är 350 pixlar
(250+25+25+25+25)
men boxens mått anges till 250 pixlar i CSS-koden:

#box {
width: 250px;
padding: 25px;
border: 25px solid;
}

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

klicka här för att se exemplet

 

Box sizing - content-box eller border-box

Det finns två metoder att ange den totala bredden på en box.

content-box

Den metod som har varit standard länge kallas content-box och fungerar som exemplet ovan. Där anges storleken på boxens innehåll (content). Dessutom tillkommer storlek på padding och border.

#box {
width: 500px;
padding: 25px;
border: 5px solid;
}

border-box

Den andra metoden kallas border-box och innebär att att du anger boxens totala storlek, inklusive padding och kantlinje (border).

#box {
box-sizing: border-box;
width: 500px;
padding: 25px;
border: 5px solid;
}

Här ser du skillnaden mellan de två metoderna:

klicka här för att se exemplet

 

Ange "border-box" som standard

Standardvärdet för Box sizing är att egenskaperna för content-box används om inget annat anges.

Du kan ange att du istället vill använda egenskapen border-box för varje box du formaterar enligt exemplet ovan.

En bättre metod är att ändra standardvärdet för box-sizing genom att ange en sk "box-sizing Reset".

Ange den här koden i den externa CSS-mallen:

html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}

Nu kommer alla storlekar på boxar att använda egenskapen box-sizing: border-box;

Här är samma exempel som ovan men nu har vi använt en "box-sizing Reset". Den första boxen använder standardvärdet för box-sizing: content-box men alla boxar formateras nu med box-sizing: border-box:

klicka här för att se exemplet

 

OBS! I alla exempel nedan används standardvärdet för box-sizing, dvs content-box. Du väljer själv om du vill komplettera koden med "box-sizing Reset" för att använda border-box istället.

 

Använda ID eller CLASS och DIV eller SPAN

Användning av DIV tillsammans med ID eller CLASS har i grunden samma funktion - de påverkar element och områden och fungerar då som containers - dvs de omsluter de element som ska formateras.

Ett namngivet id representerar ett unikt område och varje "id" bör bara användas en gång i varje dokument. En namngiven class kan däremot användas flera gånger i samma dokument.

SPAN är också en container men en sk inline container och kan användas föär att formatera delar av tex ett textområde. SPAN påverkar då en del av området (till skillnad från DIV som påverkar hela textområdet).

Exemplet nedan visar en översikt över hur DIV ID, DIV CLASS och SPAN CLASS kan användas tillsammans.

DIV ID omsluter alla de element som ska formateras och DIV CLASS en del av samma område. SPAN CLASS används på en del av rad och påverkar vissa av orden i exemplet nedan:

klicka här för att se exemplet »

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

#inforuta {
width: 500px;
border: 1px;
}
.green {
color: #336600;
}
.red {
color: #ff0000; text-decoration: underline;
}

 

Boxar - grunder

Boxen som ska utgöra området anger du som en anpassad mall med valfritt namn - läs mer i guiden CSS-grunder »

Namnet på mallen är valfritt men måste inledas med en punkt . eller en brädgård # beroende på om mallen tillämpas med id eller class. Skillnaden är att id bara används för en förekomst eller område medan class kan tillämpas på flera områden i samma dokument.

Exemplet nedan visar CSS-koden för en box med bredd 300 pixlar och padding 25 pixlar.

Marginalerna är tillämpade på <body> och påverkar allt innehåll i dokumentet. Notera att den totala bredden på boxen är 350 pixlar.

Använd brädgård "#" i mallnamnet om mallen tillämpas med ID:

body {
margin: 25px;
}

#box {
background-color: #CCCC99;
width: 300px;
padding: 25px;
}

använd punkt "." i mallnamnet om mallen tillämpas med CLASS:

body {
margin: 25px;
}

. box {
background-color: #CCCC99;
width: 500px;
margin: 25px;
padding: 25px;
}

Här är HTML-koden för att tillämpa mallen i dokumentet.

Om mallnamnet är #box används id:

<html>
<body>
<div id="box">innehållet här</div>
</body>
</html>

Om mallnamnet är .box används class:

<html>
<body>
<div class="box">innehållet här</div>
</body>
</html>

Här är hela koden för exemplet med boxen nedan där CSS tillämpas i samma dokument istället för i egen CSS-mall. Läs mer om tillämpning av CSS i guiden CSS-grunder »

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Webdesignskolan</title>

<style type="text/css">
<!--
body {
margin: 25px;
}
#box {
background-color: #CCCC99;
width: 500px;
margin: 25px;
padding: 25px;
}
-->
</style>

</head>
<body>
<div id="box">innehållet här...</div>
</body>
</html>

klicka här för att se exemplet »

 

Marginaler

Avståndet för hela dokumentets vänster kant, övre kant, höger kant och botten anges som margin men i ett fåtal webbläsare har padding samma egenskap som margin.

Marginaler i HTML anges som både margin och marginwidth för att det ska fungera i flera webbläsare:

leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"

Samma princip gäller för CSS om du vill ange "0" som värde dvs inte ha någon marginal alls. Ange då både margin och padding för att webbläsare ska visa sidans innehåll med samma resultat:

body {
margin: 0;
padding: 0;
}

OBS! Exemplet ovan där padding används gäller endast om marginalen ska ha ett 0-värde. Padding används i övrigt inte för att ange marginaler utan för avstånd mellan innehåll och yttre kanter i en box.

Om marginalen ska anges för DIV-boxen #box i exemplet tidigare eller för hela dokumentet i body beror på sidans övriga innehåll, finns bara en box i dokumentet har det ingen betydelse. Exemplen nedan ger samma resultat.

Ett avstånd på 25 pixlar anges som marginal för endast boxen #box

body { margin: 0; padding: 0; }

#box {
width: 300px;
padding: 25px;
margin: 25px;
}

Ett avstånd på 25 pixlar anges som marginal för allt innehåll i hela sidan med body

body { margin: 25px; }

# box {
width: 300px;
padding: 25px;
}

 

Förkorta CSS-koden

Koden för marginaler anges i ordningen top - right - bottom - left och kan förkortas.

Fyra likadana värden:

Istället för att ange:

margin-top: 25px;
margin-right: 25px;
margin-bottom: 25px;
margin-left: 25px;

eller:

margin: 25px 25px 25px 25px;

kan du istället ange:

margin: 25px;

Fyra olika värden:

Istället för att ange:

margin-top: 5px;
margin-right: 8px;
margin-bottom: 10px;
margin-left: 12px;

kan du istället ange:

margin: 5px 8px 10px 12px;

Två likadana värden:

Istället för att ange:

margin-top: 5px;
margin-right: 8px;
margin-bottom: 10px;
margin-left: 8px;

kan du ange:

margin: 5px 8px 10px;

Två olika värden:

Istället för att ange:

margin-top: 5px;
margin-right: 8px;
margin-bottom: 5px;

margin-left: 8px;

kan du istället ange:

margin: 5px 8px;

 

Positionering - relativt eller absolut

Positionering av boxar kan vara statisk, relativ eller absolut förhållande till dokumentets kanter och övrigt innehåll. Om ingen position anges används "static" som alltså är standardläge (default).

Statisk positionering

Exemplet nedan visar två boxar i statisk positionering. Placeringsordningen styrs av i vilken ordningsföljd boxarna angivits i sidkoden.

Box1 anges först i HTML-koden och placeras alltså före Box2:

<div id="box1"> ingen positionering.</div>
<div id="box2"> ingen positionering.</div>

klicka här för att se exemplet

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

body {
margin: 0;
padding: 0;
}
#box1 {
width: 300px;
padding: 10px;
}
#box2 {
width: 300px;
padding: 10px;
}

Relativ positionering

Relativ positionering innebär att boxen placerats i förhållande till vad den skulle vara i statisk positionering.

Detta innebär att boxen har en faktisk placering men i förhållande till denna placering flyttas boxen relativt med ett visst avstånd. Boxen tar fortfarande upp utrymmet den statiskt har och inga andra element kan placeras där. Låter krångligt men betyder att boxen bara är relativ till sig själv och inte till andra boxar och element.

Exemplet nedan är lika som ovan förutom att Box1 flyttats 50 pixlar från topp och vänsterkant och placerats relativt till sin statiska position:

klicka här för att se exemplet

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

body {
margin: 0;
padding: 0;
}

#box1 {
width: 300px;
padding: 10px;
position: relative;
left: 50px;
top: 50px;
}

#box2 {
width: 300px;
padding: 10px;
}

Absolut positionering

Absolut positionering innebär till skillnad från den relativa positionen att boxen släpper sin statiska placering och låter andra element ta utrymmet.

Boxen placeras ovanpå andra element (även i relativ placering) och kan liknas vid att boxen utgör ett skikt eller Lager som kan placeras över eller under andra objekt.

Ordningen på skikten styr du med Z-index (se nedan).

Exemplet nedan är lika som tidigare förutom att Box1 flyttats 50 pixlar och placerats absolut och släpper sin statiska position så att andra element kan ta det utrymmet:

klicka här för att se exemplet

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

body {
margin: 0;
padding: 0;
}

#box1 {
width: 300px;
padding: 10px;
position: absolute;
left: 50px;
top: 50px;
}

#box2 {
width: 300px;
padding: 10px;
}

OBS! Notera att Box2 har statisk postition i exemplen ovan, det är alltså bara Box1 som positionerats relativt och absolut.

 

Placering över och under - Z-index

X- och y värden positionerar områden i två dimensioner. Den tredje dimensionen är Z-index och genom att tilldela området ett värde anges ordningen nerifrån och upp (eng: stack order)

Varje box ligger i en egen nivå som kan anges med en siffra, ett högre värde placerar boxen högre upp och boxen med det lägsta värdet placeras underst.

Både positiva och negativa värden kan användas och om inget värde anges gäller den ordning som angivits i koden, boxar som angivits först placeras under de som angivits senare.

I exemplet nedan placeras de tre boxarna ovanför varandra genom att två av boxarna har ett värde för Z-index:

klicka här för att se exemplet

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

#box1 {
width: 300px;
}

#box2 {
width: 300px;
position: absolute;
left: 140px;
top: 50px;
z-index: 1;
}

#box3 {
width: 200px;
position: absolute;
left: 350px;
top: 30px;
z-index: 2;
}

 

Float - justering i sidled

Om andra områden eller element ska finnas bredvid en box kan du använda egenskapen FLOAT för att påverka ett textflöde eller andra element och boxar.

Attributet "float" justerar en DIV-box till höger eller vänster längs sin nuvarande linje.

OBS! Float fungerar inte om du använt absolut positionering.

Exemplen nedan visar en box utan float och en box med float. Notera hur det påverkar den efterföljande texten som inte är placerad i någon box.

Ingen FLOAT:

FLOAT LEFT:

klicka här för att se exemplet

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

body {
margin: 0;
padding: 0;
}

#box1 {
width: 300px;
padding: 10px;
float: left;
}

<body>
<div id="box1">Innehåll i boxen</div>
Textrader som påverkas av float här...
</body>

HTML-koden:

<body>
<div id="box1">Innehåll i boxen</div>
Textrader som påverkas av float här...
</body>

Exemplet nedan använder float: left; på två boxar som gör att de placeras sida vid sida.
Notera att texten flödar till höger om Box2:

klicka här för att se exemplet

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

body {margin: 0;
padding: 0;}

#box1 {
width: 180px;
padding: 10px;
float: left;
}

#box2 {
width: 180px;
padding: 10px;
float: left;
}

FLOAT Right

Exemplet nedan använder float: left; på Box1 och float: right; på Box2:

klicka här för att se exemplet

#box1 {
width: 200px;
padding: 10px;
float: left;
}

#box2 {
width: 200px;
padding: 10px;
float: right;
}

 

Centrering av box

Centrering av boxar sker genom att använda marginalerna som får dynamiska egenskaper genom att ange värdet AUTO för vänster- och högermarginal.

Topp- och bottenmarginal kan ha andra värden. I exemplet nedan är värdet 0.

I exemplet nedan är boxen centrerad men inte innehållet i boxen:

klicka här för att se exemplet

body {
margin: 0;
padding: 0;
}

#box1 {
width: 300px;
padding: 10px;
margin: 0 auto 0 auto;
}

 

Clear - kontrollera flödet

Boxar som justerats med float gör att innehåll i dokumentet flödar höger eller vänster om boxen och du kan förhindra detta genom att ange CLEAR med attributen:

clear: right;
clear: left;
clear: both;

CLEAR utökar toppmarginalen i ett område så att boxen hamnar under tidigare element i koden. Det kan gälla element till höger, vänster eller båda sidor om området.

Exemplet nedan visar två boxar placerade bredvid varandra med olika justering.

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

<div id="box1">Innehåll här</div>
<div id="box2">Innehåll här</div>
<h2>Lorem ipsum </h2>
<p>Lorem ipsum dolor sit amet</p>

FLOAT LEFT

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

#box1 {
background-color: #cccc99;
width: 180px;
margin: 0;
padding: 10px;
float: left;
}
#box2 {
background-color: #ffff66;
width: 180px;
margin: 0;
padding: 10px;
float: left;
}

FLOAT RIGHT

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

#box1 {
background-color: #cccc99;
width: 180px;
margin: 0;
padding: 10px;
float: left;
}
#box2 {
background-color: #ffff66;
width: 180px;
margin: 0;
padding: 10px;
float: right;
}

CLEAR LEFT

CLEAR utökar toppmarginalen i ett område så att boxen hamnar under tidigare element i koden. I exemplet nedan justeras Box2 i underkant av Box1:

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

#box1 {
background-color: #cccc99;
width: 180px;
margin: 0;
padding: 10px;
float: left;
}
#box2 {
background-color: #ffff66;
width: 180px;
margin: 0;
padding: 10px;
float: right;
clear: left;
}

 

Layout i DIV-boxar

Boxar kan användas som kolumner även om innehållet inte flödar mellan kolumnerna. Positioneringen är i grunden likadan för kolumner men måtten och olika enheterna bör du anpassa till dina egna behov.

OBS! Om du vill att innehållet ska flöda mellan kolumnerna ska du istället använda attributet COLUMN - läs mer i guiden Kolumner »

Grundexemplet är två kolumner med kantlinje och avstånd både mellan kolumnerna och dokumentets kanter:

klicka här för att se exemplet

body {
margin: 10px;
}
#col1 {
width: 300px;
float: left;
padding: 0 10px 0 10px;
border-right: 1px solid #999;
}
#col2 {
width: 300px;
float: left;
padding: 0 10px 0 10px;
}

Här används kantlinjer på båda sidor och avstånd mellan kolumnerna skapas genom att ge Kolumn1 en högermarginal:

klicka här för att se exemplet

body {
margin: 10px;
}
#col1 {
width: 290px;
float: left;
padding: 0 10px 0 10px;
border-right: 1px solid #999;
border-left: 1px solid #999;
}
#col2 {
width: 290px;
float: left;
padding: 0 10px 0 10px;
margin: 0 0 0 20px;
border-right: 1px solid #999;
border-left: 1px solid #999;
}

 

Höjd på DIV-boxar

Om vi anger en bakgrundsfärg i kolumnerna visar detta att boxarnas höjd är olika då de är proportionella till textinnehållet och inte har en fast höjd.

Om du anger en fast höjd på en box måste innehållet alltid få plats i boxen vilket kan vara svårt att beräkna då textens storlek kan variera .

Lösningen är att lägga kolumnerna (de två boxarna) i en yttre box som då fungerar som en "behållare" eller container.

Så här ser de två kolumnerna ut innan de placeras i en container. De båda boxarna har samma bakgrundsfärg:

klicka här för att se exemplet

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

body {
margin: 10px;
}
#col1 {
width: 300px;
float: left;
padding: 10px;
background: #d9abfc;
border-right: 1px solid #999;
}
#col2 {
width: 300px;
float: left;
padding: 10px;
background: #d9abfc;
}

För att få samma höjd på båda kolumnerna placeras de i en container-box.

Färgen i de två kolumnboxarna tas bort och anges istället för container-boxen.

I exemplet har containern inga fasta bredd- eller höjdmått utan värdet "auto" - innehållet i containern får då bestämma storleken:

klicka här för att se exemplet

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

<div id="container">
<div id="col1">Text i kolumn 1</div>
<div id="col2">Text i kolumn 2</div>
</div>

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

body {
margin: 20px;
}
#container {
width: auto;
background: #d9abfc;
float: left;
}
#col1 {
width: 290px;
float: left;
padding: 10px;
border-right: 1px solid #999;
}
#col2 {
width: 290px;
float: left;
padding: 10px;
}

Läs mer om CSS-layouter här  »