« NinetNet » CSS » CSS

Inledning

Firefox

När man använder CSS för att placera element på sin sida är det bra att vara medveten om att koderna kan tolkas lite olika i olika webläsare. Det är främst Internet Explorer som tar sig vissa friheter och inte håller sig till vad som är standard.

Därför kan det vara klokt att också installera en läsare som tolkar sidorna enligt de regler som W3C dikterat och utgå från hur sidan fungerar i den läsaren. Du bör också vara medveten om att äldre webläsare inte klarar av att hantera placering med CSS speciellt bra.

En mycket bra gratis webläsare att komplettera med är Mozilla Firefox. Om din sida ser bra ut i FF och IE kommer den förmodligen att funka i de flesta andra nyare webläsare också. Dessutom täcker du in flertalet surfare på webben eftersom 90% surfar med antingen FF eller IE.

Att bara kolla sidan i antingen FF eller IE är ingen vidare bra idé om du vill att sidan ska fungera för flertalet besökare, eftersom det som funkar i den ena ibland ser ut som "hej kom och hjälp mig" i den andra. Kolla alltså din sida i båda vartefter du kodar - det vinner du tid på i längden! Koderna i exemplen nedan tillhör "grunderna" och kommer att se ut på samma sätt i de flesta "moderna" webläsare.

Här kan du ladda hem: Mozilla Firefox

Längre ner finns länkar till sidor med lösningar och "hack" man kan ta till för att få sidorna att fungera på samma sätt oavsett webläsare. Såna trix tycker jag att man bör undvika så långt man bara kan- men de kan komma väl till pass ibland...

DOCTYPE

Innan man börjar placera med CSS bör man för att undvika onödigt strul se till att ha en korrekt DOCTYPE på sina sidor. Det skulle exempelvis kunna se ut så här:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Min Sida</title>
</head>
<body>
:::
</body>
</html>

Du kan läsa mer om olika DOCTYPE'er här: HTML / Doctype & Validering

Normalt flöde

Med en sidas "normala flöde" menas hur sidan visas utan någon formatering. Alltså: Det som skrivs in överst/först i HTML-koden kommer också att visas först/överst på sidan...

Webläsarens fönsteryta/rityta

I en del fall när man placerar element på sidan utgår man från webläsarens fönsteryta/rityta. Med det menas fönstret i webläsaren där websidorna visas. Det kan vara bra att komma ihåg att storleken på denna fönsteryta varierar beroende på vad man har för webläsare och upplösning på skärmen.

Procent

Något som kan vara bra att känna till är att även om anger höjd och bredd på t.ex en box i procent kommer eventuell padding och border att lägga sig utanför boxen. På så sätt kan en box med t.ex en bredd på 33% ta upp några fler procent av utrymmet, liksom...

Till Toppen

Display - inline, block, none

När man vill placera element på en websida är det viktigt att hålla reda på vilka element som visas som inline och vilka som visas som block.

Inline-element visas utan radbrytning.
Block-element visas med en automatisk radbrytning före och efter elementet.

Det är bra att hålla i minnet att <span> är ett inline-element och <div> är ett block-element.

Inline-element

Element som enligt standard visas som "inline" (i linje) är t.ex <strong>, <a> och <img>. Det inline-element som kommer efter ett annat inline-element i koden kommer att hamna bredvid och inte under det första - om det finns plats vill säga.

Exempel - Inline

Om det ser ut så här i koden:


<strong>En länk till en fiffig sida:</strong>

<a href="...">NinetNet's Hemsideguide</a>.

<span style="color: blue">Här kan man lära sig både

<span style="color: red">det ena</span> och

<span style="color: red">det andra</span></span>.

Skulle det kunna se ut så här på sidan:

En länk till en fiffig sida: NinetNet's Hemsideguide. Här kan man lära sig både det ena och det andra.

Block-element

Element som enligt standard visas som "block" är t.ex <h1> - <h6>, <p> och <ul>. Element som kommer efter ett block-element i koden kommer att hamna under och inte bredvid block-elementet.

Exempel - Block

Om koden ser ut så här:

<h6>Rubrik</h6><p>Ett stycke text...</p>

<ul><li>Ett</li><li>Två</li><li>Tre</li></ul>

Skulle det kunna se ut så här på sidan:

Rubrik

Ett stycke text...

Ett
Två
Tre

Display

Genom att använda attributet display med värden som block, inline eller none i css-koden kan man kontrollera hur element visas.

På så sätt kan du till exempel med...

display: block - ange att ett inline-element visas som block
display: inline - ange att ett block-element visas som inline
display: none - förhindra att ett element visas överhuvudtaget

Om stilmallen ser ut så här:


<style type="text/css">

<!--

#ilinje li { display: inline }



#box a { display: block }



#none { display: none }

-->

</style>

och HTML-koden ser ut så här:


<div id="ilinje">

<ul><li>Ett</li><li>Två</li><li>Tre</li></ul>

</div>



<div id="box">

<a href="..">En Länk</a><a href="..">En Länk</a>

</div>



<p id="none">Här är lite text...</p>

skulle sidan kunna se ut så här:

Ett
Två
Tre

NinetNet's Hemsideguide NinetNet's Hemsideguide

Här är lite text...

Observera att ett element med display: none inte bara blir osynligt utan tas bort helt och hållet ur det normala flödet. Det vill säga: Det tar inte upp något utrymme på sidan.

Det finns en hel del andra värden för attributet "display". Men de här är de man har nytta av i sammanhanget.

Till Toppen

Float - Flytande element

Med attributet float kan du få ett element att flyta åt höger eller vänster på sidan. Det fungerar på liknande sätt som när man använder: "align" på t.ex en tabell. Det finns tre värden att välja på:

float: left - elementet flyter åt vänster.
float: right - elementet flyter åt höger.
float: none - om man särskilt vill ange att elementet inte ska flyta alls.

När man "floatar" ett element kommer efterföljande element automatiskt att lägga sig i "hålet" som uppstår vid sidan av det "floatade" elementet - om det får plats.

De marginaler man anger på ett "floatat" element flyter automatiskt ihop med kringliggande elements eventuella marginaler.

Vill man undvika att efterföljande element flyter upp bredvid det "floatade" elementet måste man använda sig av attributet "clear" (se nedan).

OBS!
• Det fungerar inte att "floata" ett element som positionerats med absolute eller fixed (se nedan).

• Det fungerar inte heller att placera två element med bredd 50% bredvid varandra genom att "floata" endast det ena - de kommer konstigt nog inte att få plats. Men anger man 49% på ett av dem går det minsann bra. Minst en procent måste liksom vikas för själva placeringen...

• Om man anger marginaler på ett "floatat" element kommer Internet Explorer felaktigt att visa upp dubbla marginaler om krinliggande element också har marginaler. Det undviker man genom att även ange: display: inline i stilmallen för ett "floatat" element med marginaler.

Exempel 1

Här floatas en box som innehåller en bild till vänster med float: left. Texten som är skriven mellan <p> och </p> flyter upp vid sidan av bilden. Boxen är något bredare än bilden för att skapa lite utrymme mellan bilden och texten.

Så här skulle det kunna se ut i stilmallen:

<style type="text/css">
<!--
#bild { float: left; width: 100px; }
-->
</style>

Så här i HTML-koden:

<div id="bild">
<img src="strindberg.jpg" alt="August Strindberg">
</div>

<h6>August Strindberg</h6>
<p>Författaren August Strindberg föddes...</p>

Och så här på sidan:

August Strindberg

Författaren August Strindberg föddes 1849 i Stockholm. Han studerade några terminer i Uppsala och försörjde sig sedermera som informator, folkskollärare, skådespelare och journalist. Strindberg var en stor personlighet och nyskapare.

Så här inleds romanen Hemsöborna från 1887:
"Han kom som ett yrväder en aprilafton och hade ett höganäskrus i en svångrem om halsen. Clara och Lotten voro inne med skötekan för att hämta honom på Dalarö brygga; men det dröjde evigheter, innan de kommo i båt."

Exempel 2

Här används tre boxar för att skapa tre spalter som fördelar sig jämnt över sidan.

Så här skulle det kunna se ut i stilmallen:

<style type="text/css">
<!--

.spalt { float: left; width: 33%; }

.text { padding: 3px; }

-->
</style>

Så här i HTML-koden:

<div class="spalt">
<p class="text">Lorem ipsum dolor sit amet, consectetuer...</p>
</div>

<div class="spalt">
<p class="text">Lorem ipsum dolor sit amet, consectetuer...</p>
</div>

<div class="spalt">
<p class="text">Lorem ipsum dolor sit amet, consectetuer...</p>
</div>

Och så här på sidan:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore...

Obs!
Det hade inte fungerat med padding i klassen: spalt. Paddingen hamnar nämligen utanför den angivna bredden på en box även om man anger den i procent. De sammanlagda 99 procenten på spalterna hade inte fått plats på bredden tillsammans med paddingen. Men genom att ange paddingen på ett element som placerats inne i boxen hamnar den innanför och de 33 procenten och bredden på boxen blir fortfarande 33%...

Till Toppen

Attributet Clear

Som standard placeras alltså de efterföljande elementen bredvid ett element som floatats till höger eller vänster om det finns plats. Vill man att ett element som kommer efter ett floatat element ska hamna nedanför måste man använda sig av attributet clear.

OBS!
Attributet clear används på det element som kommer efter det floatade elementet!

clear: left - elementet placeras under left-floatade element som kommer före

clear: right - elementet placeras under right-floatade element som kommer före

clear: both - elementet placeras under både left och right-floatade element som kommer före

clear: none - om man särskilt vill utesluta ngn av de ovanstående

Alltså! Om t.ex clear: both anges för en box kommer den alltid att visas under ett floatat element som kommer före den boxen i koden.

Exempel

Här används clear: both på det första exemplet ovan.

Så här skulle det kunna se ut i stilmallen:

<style type="text/css">
<!--
#bild { float: left; width: 100px; }
.clear { clear: both }
-->
</style>

Så här i HTML-koden:

<div id="bild">
<img src="bild.jpg" alt="August Strindberg">
</div>

<h6 class="clear">August Strindberg</h6>
<p>Författaren August Strindberg föddes...</p>

Och så här på sidan:

August Strindberg

Till Toppen

Containing Block

När man vill placera innehåll på sin websida med hjälp av CSS måste man börja tänka i "block". Man måste också hålla reda på vilka block som innehåller andra block, för att kunna placera dem korrekt på websidan.

Contain är ett engelskt verb som betyder: innehålla, rymma. Ett "containing block" är med andra ord ett block som fungerar som behållare - en container helt enkelt! Ett "containing block" kan alltså innehålla andra element/boxar/block och har alltid en start-tagg och en slut-tagg.

Även om du kanske inte har tänkt på det tidigare så tillhör alla element på din sida ett "containing block". Generellt kan man säga att en websidas rotelement är sidans första "containing block". Det vill säga: <body> ( i XHTML är <html> rotelement).

Allt annat innehåll på sidan anpassar sig efter vad du har angivit att body ska ha för egenskaper. Har du t.ex angivit en marginal på 50 pixlar kommer innehållet på sidan att anpassa sig efter det!

<body>
<ul>
<li>Ett</li>
<li>Två</li>
</ul>
</body>

Här innehåller <body> en lista som skrivs mellan <ul> och </ul>. Listan innehåller i sin tur listpunkter som skrivs mellan <li> och </li>.

<body> är här "containing block" till <ul>. <ul> är i sin tur "containing block" till <li>!

Exempel

Så här skulle det kunna se ut i stilmallen:

<style type="text/css">
<!--

body { margin: 50px; }

#container { width: 300px; height: 300px; padding: 20px; }

-->
</style>

Så här i HTML-koden:

<body>

<ul>
<li>Ett</li>
<li>Två</li>
</ul>

<div id="container">
<p>Lorem ipsum dolor sit...</p>
</div>

</body>

<body> innehåller här dels en lista <ul> och en <div>, som innehåller lite text - skrivet mellan <p> och </p>.

<body> blir alltså "containing block" till <ul> och <div>. <div> blir i sin tur "containing block" till <p>. <ul> är fortfarande "containing block" till <li>.

Klicka här! för att se hur det ser ut på sidan (öppnas i nytt fönster)

OBS!
När man vill placera ett element på sidan utgår man alltså från elementets "containing block" och dess placering. Men inga regler som inte har undantag! Fixerad positionering utgår alltid från webläsarens fönsteryta. Läs vidare!

Till Toppen

Positionering - Static, Relative, Absolute, Fixed

Med attributet position kan man placera ett element på sidan med värden som: static, absolute, relative eller fixed.

Attributet position används tillsammans med top/bottom och left/right för att placera elementet/boxen på sidan. Att använda både top och bottom eller både left och right är i de flesta fall inte användbart...

...eftersom man med position anger man var man vill att elementets hörn ska placeras. Vanligtvis positionerar man endast ett av hörnen - det som är närmast top/bottom och left/right. Därför bör man också ange antingen höjd eller bredd på element som inte har några "naturliga" hörn.

För att placera elementet kan man ange antingen en fast position med t.ex pixlar eller en position som anpassar sig efter upplösningen på skärmen med procent.

position: static

Värdet static är standard och placerar elementet där det är skrivet i HTML-koden. Det vill säga - det ingår i det normala flödet - kan användas för att ersätta ett tidigare angivet värde.

position: relative

Värdet relative påminner om static - men här förflyttas elementet med utgångspunkt från var det förekommer i det normala flödet. Observera att elementet fortfarande kommer att ta upp plats där det skrivs in i HTML-koden.

position: absolute

Värdet absolute lyfter ut elementet från det normala flödet och ger det en angiven placering.

position: fixed

Värdet fixed påminner en hel del om absolute men elementet blir fixerat och stannar där det är även om sidan scrollas. Observera att "fixed" inte fungerar i Internet Explorer fram t.o.m. version 6. Vi får se vad version 7 har att bjuda på...

Absolut positionering

När man använder position: absolute gäller det att hålla noga reda på VAR man placerar sina element i koden om man har en lite mer avancerad layout...

Ett absolut positionerat elements placering anpassas nämligen efter dess "närmaste positionerade förfäder" som blir "containing block". Om det inte existerar någon sådan fungerar webläsarens fönsteryta (inte body) som "containing block".

Med position: absolute lyfter man ut elementet ur sidans normala flöde - elementet lämnar alltså inte något "hål" efter sig på sidan.

I de fyra första exemplen nedan utgår den absoluta positioneringen från webläsarens fönsteryta och dess hörn. Det positionerade elementet anpassar sig efter webläsarfönstrets storlek utan att ta hänsyn till de element på sidan som ingår i det normala flödet. Vilket illustreras i Exempel 4. Exempel 5 visar hur två positionerade element placerar sig i förhållande till varandra.

Exempel 1

Så här skulle det kunna se ut i stilmallen:

<style type="text/css">
<!--
#bild { position: absolute; top: 30px; left: 50px; }
-->
</style>

Så här i HTML-koden:

<img id="bild" src="betty.jpg" alt="Betty Boop">

Och så här på sidan:

Exempel 2

Så här skulle det kunna se ut i stilmallen:

<style type="text/css">
<!--
#bild { position: absolute; top: 30px; right: 50px; }
-->
</style>

Så här i HTML-koden:

<img id="bild" src="betty.jpg" alt="Betty Boop">

Och så här på sidan:

Exempel 3

Så här skulle det kunna se ut i stilmallen:

<style type="text/css">
<!--
#text { position: absolute; bottom: 30px; right: 50px;
width: 150px; height: 150px; }
-->
</style>

Så här i HTML-koden:

<p id="text">Lorem ipsum dolor...</p>

Och så här på sidan:

Exempel 4

Så här skulle det kunna se ut i stilmallen:

<style type="text/css">
<!--
body { margin: 25px; }

#textdiv { width: 700px; height: 500px;
padding: 25px; border: 1px solid #000000; }

#box1 { position: absolute; top: 50px; left: 50px; }

#box2 { position: absolute; top: 50px; right: 50px; }

#box3 { position: absolute; bottom: 50px; left: 50px; }

#box4 { position: absolute; bottom: 50px; right: 50px; }
-->
</style>

Så här i HTML-koden:

<div id="box1">Box 1 </div>
<div id="box2">Box 2 </div>
<div id="box3">Box 3 </div>
<div id="box4">Box 4 </div>
<div id="textdiv">
<p>Lorem ipsum dolor sit amet...</p>
</div>

Klicka här! för att se hur det ser ut på sidan (öppnas i nytt fönster) - pröva också att ändra storleken på fönstret!

Exempel 5

Så här skulle det kunna se ut i stilmallen:

<style type="text/css">
<!--

#container { position: absolute; top: 25px; left: 25px;
width: 416px; height: 70px; border: 1px solid black; }

#absolut { position: absolute; top: 50px; left: 75px; }

-->
</style>

Så här i HTML-koden:


<div id="container">

Det här är första textraden i en absolut positionerad box. Den är utrustad med en svart kant för att det ska bli mer överskådligt. <span id="absolut">Den här texten är absolut positionerad och placerad INUTI den första boxen. Textens placering utgår alltså från den första boxens KANTER. Om den första boxen inte hade varit positionerad skulle placeringen utgått från webläsarens fönsteryta i stället!</span>

</div>

Och så här på sidan:

• Lägg märke till hur innehållet i <span id="absolut"> anpassar sitt innehåll på bredden till <div id="container">. Det beror på att det inte finns varken höjd eller bredd angiven för #absolut.

OBS!
Om du vill positionera ett element med position: absolute och placerar det elementet inuti en box gäller den boxen alltså som "containing block" för elementet endast om boxen själv är positionerad! I vissa lägen kan det då vara fiffigt att placera elementet i en box som man ger egenskapen position: relative utan att förflytta boxen ur det normala flödet. Läs vidare!

Relativ positionering

Ett relativt positionerat elements placering utgår från dess ursprungliga placering i HTML-kodens normala flöde. Man förflyttar alltså bara elementet till höger/vänster och upp/ner.

Elementet kommer fortfarande att ta upp plats på sidan - inte där det visas - utan där det skulle ha visats om det inte varit positionerat... Elementet kommer alltså att lämna efter sig ett "hål" på sin ursprungliga plats.

Exempel

Så här skulle det kunna se ut i stilmallen:

<style type="text/css">
<!--

#text { width: 500px; height: 500px; padding: 20px; }

#box1 { position: relative; bottom: 50px; left: 20px; }

#box2 { position: relative; top: 50px; right: 20px; }

-->
</style>

Så här i HTML-koden:

<div id="text">
<p>Lorem ipsum dolor sit amet...</p>
<div id="box1">Box 1 </div>
<p>Lorem ipsum dolor sit amet...</p>
<div id="box2">Box 2 </div>
<p>Lorem ipsum dolor sit amet...</p>
</div>

• Box 1 kommer att förflyttas 50 pixlar uppåt från botten av den ursprungliga placeringen. Och 20 pixlar åt vänster (left)

• Box 2 kommer att förflyttas 50 pixlar nedåt från toppen av den ursprungliga placeringen. Och 20 pixlar åt höger (right)

Klicka här! för att se hur det ser ut på sidan (öppnas i nytt fönster)

Position: relative - utan förflyttning

I vissa lägen kan det vara användbart att ha en box med position: relative utan att förflytta boxen alls. Exempelvis om man vill att ett element positionerat med position: absolute ska ha en box som ingår i det normala flödet som "containing block".

Då skulle man skriva så här i stilmallen:

#box { position: relative; }

Fixerad positionering

Till skillnad från ett absolut eller relativt positionerat element placeras ett element med position: fixed alltid i förhållande till webläsarens fönsteryta. Fönsterytan räknas alltid som "containing block". Elementet lyfts ut ur sidans normala flöde och blir fixerat - och det stannar där det är även om sidan scrollas.

OBS!
Internet Explorer stöder inte fixerad positionering fram t.o.m. version 6. Förhoppningsvis kommer det att fungera från version 7 och framåt. I IE visas än så länge ett fixerat element där det skrivits in i sidans normala flöde.

Exempel

Så här skulle det kunna se ut i stilmallen:

<style type="text/css">
<!--

#box { position: fixed; top: 60px; left: 40px;
width: 100px; height: 100px; }

#text { width: 500px; padding: 20px; }

-->
</style>

Så här i HTML-koden:

<div id="box">Fixerad Box</div>
<div id="text">
<p>Lorem ipsum dolor sit amet, consectetuer...</p>
</div>

Klicka här! för att se hur det ser ut på sidan (öppnas i nytt fönster) - pröva också att scrolla sidan. (Fungerar alltså inte i Internet Explorer)

Till Toppen

Z-index - Stapelordning

I alla exempel hittills har elementen varit positionerade på höjden och bredden. Men eftersom positionerade element ibland överlappar varandra kan det också vara bra att kunna styra ordningen på dem i djupled.

Med z-index kan man placera ett element på z-axeln så att det hamnar framför eller bakom ett annat element.

Generellt fungerar det så att om man inte anger något z-index så kommer det element som skrivits in först i själva HTML-koden att visas bakom ett element som skrivits in senare i koden - om elementens placeringar överlappar varandra. Vill man ändra på det måste man alltså ange ett z-index!

Ett z-index utgår från "0" och kan ha värden som: 1, 3, 10, 105. Ju högre värde - desto närmare användaren hamnar elementet. Man kan också ange negativa värden - men det hanteras än så länge på lite olika sätt i olika webläsare.

Exempel 1

Så här skulle det kunna se ut i stilmallen:

<style type="text/css">
<!--

#box1 {
	position: absolute;
	left: 20px;
	top: 20px;
	z-index: 1; }

#box2 {
	position: absolute;
	left: 40px;
	top: 40px;
	z-index: 2; }

#box3 {
	position: absolute;
	left: 60px;
	top: 60px;
	z-index: 3; }

#box4 {
	position: absolute;
	left: 80px;
	top: 80px;
	z-index: 4; }

#box5 {
	position: absolute;
	left: 100px;
	top: 100px;
	z-index: 5; }

-->
</style>

Så här i HTML-koden:

<div id="box1">z-index: 1</div>

<div id="box2">z-index: 2</div>

<div id="box3">z-index: 3</div>

<div id="box4">z-index: 4</div>

<div id="box5">z-index: 5</div>

Och så här på sidan:

Vidare...

Det här verkar kanske enkelt - och det är det också på sätt och vis - men har man en komplicerad layout kan det bli lite trixigt.

Om två element har samma värde på z-index visas det element som skrivits in sist i HTML-koden främst d.v.s. närmast användaren - "ovanpå" element med lägre värde. Standard är också att ett transparent element placeras framför ett annat om det upptar samma plats.

Z-index och Containing block

Det är viktigt att känna till att ett "containing block" alltid skapar sin egen hierarki för z-index. Varje "containing block" skapar alltså en egen liten värld när det gäller z-index. Ett "containing block" har alltså alltid z-index: 0 i förhållande till andra indexerade element i den egna hierarkin - även om dess z-index egentligen är satt till 77 eller 86.

För att placera ett element ovanpå ett element som "tillhör" ett annat "containing block" behöver du alltså bara anpassa värdet på ditt elements z-index med utgångspunkt från värdet på det andra elementets "containing block".

Låter det krångligt? Tja. Tänk så här: Rangordna först dina "containing block" med utgångspunkt från vilka du vill visa främst o.s.v. Sedan kan du rangordna de element som ingår i varje "containing block" med utgångspunkt från att varje "containing block" har z-index: 0 inom sin egen hierarki.

Här följer ett exempel för att illustrera det hela - med utgångspunkt från exemplet ovan.

Exempel

Så här skulle det kunna se ut i stilmallen:

<style type="text/css">
<!--

#container1 {
	position: absolute;
	left: 20px;
	top: 20px;
	z-index: 0;
	background-color: blue; }

#container2 {
	position: absolute;
	left: 150px;
	top: 150px;
	z-index: 1;
	background-color: green; }

.box1 {
	position: absolute;
	left: 20px;
	top: 20px;
	z-index: 1; }

.box2 {
	position: absolute;
	left: 40px;
	top: 40px;
	z-index: 2; }

.box3 {
	position: absolute;
	left: 60px;
	top: 60px;
	z-index: 3; }

.box4 {
	position: absolute;
	left: 80px;
	top: 80px;
	z-index: 4; }

.box5 {
	position: absolute;
	left: 100px;
	top: 100px;
	z-index: 5; }

-->
</style>

Så här i HTML-koden:

<div id="container1">
<div class="box1">z-index: 1</div>
<div class="box2">z-index: 2</div>
<div class="box3">z-index: 3</div>
<div class="box4">z-index: 4</div>
<div class="box5">z-index: 5</div>
</div>

<div id="container2">
<div class="box1">z-index: 1</div>
<div class="box2">z-index: 2</div>
<div class="box3">z-index: 3</div>
<div class="box4">z-index: 4</div>
<div class="box5">z-index: 5</div>
</div>

Klicka här! för att se hur det ser ut på sidan (öppnas i nytt fönster).

Tips!

För att z-index ska fungera på tillfredsställande sätt i "alla" webläsare råder jag dig att alltid ge de element du vill placera med z-index ett värde från 0 och uppåt. Försök att undvika negativa värden så långt som det är möjligt. Negativa värden hanteras än så länge väldigt olika i olika webläsare.

Till Toppen

Centrera

Vill man centrera element med CSS går det till på ett lite annorlunda sätt än med HTML direkt på sidan. I CSS finns ingenting som riktigt motsvarar "align=center".

Här anpassar man i stället elementets marginaler med värdet auto eller procent. Man kan också använda: position: absolut. Observera att du ska ha en korrekt doctype på sidan för att det här ska fungera (se ovan).

Centrera Horisontalt

Det smidigaste sättet att centrera horisontalt är att använda egenskapen: margin. Med "margin: 0 auto" anges att marginalerna under och över elementet ska vara "0" och höger och vänster marginalerna: "auto" - vilket centrerar elementet.

Det här fungerar i Internet Explorer, Mozilla, Netscape och Opera av senare modell. Tyvärr kan man inte räkna med att det här fungerar i alla äldre webläsare.

Exempel 1

Här centeras en box på sidan.

Så här skulle det kunna se ut i stilmallen:

<style type="text/css">
<!--

.box { width: 250px; height: 250px; margin: 0 auto; }

-->
</style>

Så här i HTML-koden:

<div class="box">&nbsp;</div>

Klicka här! för att se hur det ser ut på sidan (öppnas i nytt fönster).

Exempel 2

Här centeras en bild som placerats i en box på sidan. Höjd och bredd på boxen är höjden och bredden på bilden.

Så här skulle det kunna se ut i stilmallen:

<style type="text/css">
<!--

.bildbox {
width: 300px; height: 234px;
margin: 0 auto;
 }

-->
</style>

Så här i HTML-koden:

<div class="bildbox">
<img src="naket.jpg">
</div>

Klicka här! för att se hur det ser ut på sidan (öppnas i nytt fönster).

Exempel 3

Här centeras en box innuti en annan box - som också centrerats.

Så här skulle det kunna se ut i stilmallen:

<style type="text/css">
<!--

.ytterbox {
width: 300px; height: 350px;
margin: 0 auto;
}

.innerbox {
width: 150px; height: 150px;
margin: 0 auto;
}

-->
</style>

Så här i HTML-koden:

<div class="ytterbox">
<div class="innerbox">&nbsp;</div>
</div>

• Lägg märke till att den inre boxen alltså centreras med utgångspunkt från den yttre.

Klicka här! för att se hur det ser ut på sidan (öppnas i nytt fönster).

Centrera Sidans Layout

Det är ju vanligt att man vill centrera en hel sidas layout. Här används samma metod som ovan - men det kan också vara bra att ange sidans marginaler och padding till "0".

Exempel 1

Här centreras den yttre boxen: layout. Den tilldelas också: position: relative - för att det ska fungera att positionera efter den boxen. Resten av innehållet på sidan placeras sedan i boxen: content.

Så här skulle det kunna se ut i stilmallen:

<style type="text/css">
<!--
html, body { margin: 0; padding: 0; background-color: #BBD3D8; }

#layout { width: 736px; margin: 0 auto;
position: relative;
border: 12px double #ffffff;
background-color: #BBD3D8;
}

#content {
width: 100%; height: 600px;
background-color: #ffffff;
}
-->
</style>

Så här i HTML-koden:

<div id="layout">
<div id="content">&nbsp;</div>
</div>

• Observera att den yttre boxens höjd anpassas efter den inre boxens höjd. Tar man bort höjden på den inre boxen anpassas höjden efter innehållet man placerar i den boxen.

Klicka här! för att se hur det ser ut på sidan (öppnas i nytt fönster).

Exempel 2

Vill man ha en flexibel layout som anpassar sig efter webläsarens upplösning kan man i stället ange marginalen till höger och vänster i procent.

Det förutsätter förstås att resten av layoten också är flytande - att bredden på de boxar som placeras inuti layout-boxen också anges utan fast mått på bredden. Annars kommer det att se tokigt ut.

Så här skulle det kunna se ut i stilmallen:

<style type="text/css">
<!--
html, body { margin: 0; padding: 0; background-color: #BBD3D8; }

#layout {
margin: 0 10%;
position: relative;
border: 12px double #ffffff;
background-color: #BBD3D8;
}

#content { width: 100%; height: 600px;
background-color: #ffffff;
}
-->
</style>

Så här i HTML-koden:

<div id="layout">
<div id="content">&nbsp;</div>
</div>

• Fortfarande anpassas den yttre boxens höjd efter den inre boxens höjd. Tar man bort höjden på den inre boxen anpassas höjden efter innehållet man placerar i den boxen.

Klicka här! för att se hur det ser ut på sidan (öppnas i nytt fönster).
Pröva att dra i webläsarens kanter för att förminska och förstora fönstret.

Centrera Vertikalt

Vill man centrera vertikalt med CSS blir det med en gång lite trixigare. Här måste man i nuläget använda sig av position: absolute för att få det att fungera i flertalet webläsare. Tyvärr kan man inte räkna med att det fungerar i äldre webläsare eller IE för Mac.

Vill man placera en box på mitten vertikalt anger man placeringen på boxen till
"top: 50%". Men eftersom det då blir boxens överkant som placeras måste man ange en "minus-marginal" som är hälften av boxens höjd för att placera MITTEN av boxen till den angivna positionen.

OBS!
När man positionerar med position: absolute utgår alltid positionen från webläsarens fönsteryta - som blir s.k. "containing block" - om man inte placerar sitt element i ett annat block som också är positionerat.

Läs om detta här: Containing block Absolut positionering

Exempel

Så här skulle det kunna se ut i stilmallen:

<style type="text/css">
<!--
html, body { margin: 0; padding: 0; }

.box {
width: 250px; height: 250px;
position: absolute;
top: 50%;
margin-top: -125px; /* hälften av höjden i height*/
}
-->
</style>

Så här i HTML-koden:

<body>
<div class="box">&nbsp;</div>
</body>

• Här utgår alltså den vertikala positionen från webläsarens fönsteryta - eftersom det inte omges av något positionerat "containing block".

Klicka här! för att se hur det ser ut på sidan (öppnas i nytt fönster).

Centrera Vertikalt & Horisontalt

Vill man centrera både vertikalt och horisontalt med Css går det till på samma sätt som ovan. Fungerar precis som de tidigare exemplen i Internet Explorer, Mozilla, Netscape och Opera av senare modell - men räkna som sagt inte med att det fungerar i äldre webläsare eller IE för Mac.

Exempel 1

Så här skulle det kunna se ut i stilmallen:

<style type="text/css">
<!--
html, body { margin: 0; padding: 0; }

#layout {
width:766px; height: 500px;
position: absolute;
left: 50%; top: 50%;
margin-left: -383px; /* hälften av bredden i width */
margin-top: -250px; /* hälften av höjden i height */
}
-->
</style>

Så här i HTML-koden:

<body>
<div id="layout"> </div>
</body>

Klicka här! för att se hur det ser ut på sidan (öppnas i nytt fönster).

Den här varianten kan - som illustreras ovan - användas för att placera en hel sidas layout precis på mitten av sidan - om man vill det! Då placeras sedan resten av sidans innehåll i boxen: layout.

Eftersom Internet Explorer som standard alltid visar en "tom" bläddringslist om man inte anger annat - kan det då vara idé att ange overflow: auto på sidan för att ta bort den när den inte behövs - för att "snygga till" layouten, liksom.

<style type="text/css">
<!--
html, body { margin: 0; padding: 0; overflow: auto; }
-->
</style>

Klicka här! för att se hur det ser ut på sidan (öppnas i nytt fönster).

Till Toppen

Hack - bara för Hacke Hackspett!

Som du säkert har förstått kan det här med att positionera med CSS se lite olika ut i olika webläsare. På den här sidan presenteras koder som fungerar på samma sätt i de vanligaste webläsarna.

Men äldre webläsare har ju förstås problem med att tolka koder som inte var uppfunna på deras tid... Och det här med att placera med CSS är ju en relativt ny teknik. Som tidigare nämnts tolkar också Internet Explorer ibland vissa koder efter eget huvud och ligger lite efter när det gäller att tolka enligt standard.

På grund av detta har finurliga typer hittat på en massa "hack" för att få koden att se likadan ut i alla webläsare. Det är ju i och för sig bra...

Men enligt min uppfattning bör man undvika sådana "hack" i så stor utsträckning som möjligt. Ett eller annat kan väl vara bra att ta till ibland - men försök hellre att bara använda korrekta koder som fungerar på samma sätt i de vanligaste webläsarna.

Varför? Jo, förr eller senare kommer antagligen sidor som är uppbyggda med sådana där finurligheter att börja se ut som värsta äggröran när webläsarna hinner ikapp och börjar tolka koderna korrekt. Då får man "hacka" om alltihopa.

Att "hacka" är tidsödande. Dessutom kan man påverka genom att vägra vara "Hacke Hackspett". Om alla webdesigners bara skulle använda koder som är korrekta enligt standard - skulle ju alla tillverkare till slut vara tvungna att anpassa sig - annars byter ju användarna läsare.

Så därför presenteras inga finurliga "hack" här! Men på några av sidorna som länkas till nedan kan du säkert hitta ett eller annat...

Till Toppen

Avslutningsvis - Länkar

Css Zen Garden

Om du vill kolla in vad som verkligen går att åstadkomma med css ska du besöka
Css Zen Garden.

Vitsen med det hela är att en mängd designers (du och jag, kanske?) utgår från en och samma HTML-sida (XHTML 1.0 Strict) för att skapa sin egen unika layout. Det är inte tillåtet att göra några som helst förändringar i själva HTML-koden. All layout och formatering ska göras via en extern stilmall.

Layouter med hyperavancerad css godkänns inte. Sidan ska visas på samma sätt för flertalet användare. Det betyder att de koder som används är dem du någorlunda tryggt kan använda själv. Det är ingen skillnad på hur layout med CSS fungerar i HTML och XHTML som levereras som "text/html".

Klicka här för att se hur sidan ser ut utan css - den svenska översättningen (sidan öppnas i nytt fönster).

Surfa sen in på Css Zen Garden och titta på alla de läckra layouterna, som alltså helt och hållet är gjorda med CSS! Här hittar du orginal-layouten på svenska!

Mer om placering med CSS

Den autistiska göken: Relativt och Absolut - på svenska
Den autistiska göken: Flytande Formgivning - på svenska
Brainjar - på engelska
Floatutorial - på engelska

CSS Layout

Standardice - CSS och smarta tabeller - på svenska
Css Maxdesign - på engelska
3 color layout - på engelska
Glish - på engelska
CSS Tableless Web Sites- på engelska
Bluerobot- på engelska
Web Development Mistakes- på engelska

CSS Referenser

W3schools - på engelska
Zoon - på svenska
Quirksmode - på engelska
Stylin' - Martin bloggar om Webdesign i allmänhet och Stilmallar i synnerhet! Bra och SNYGGT!

Tips & Trix

Left Justified - på engelska
Mezzoblue - på engelska
How To Clear Floats - på engelska
Quirksmode Conditional comments - på engelska
The Underscore Hack - på engelska
Box Model Hack - på engelska
The Centered Box - på engelska
Vertical Center Solution - på engelska
Vertical Centring with CSS - på engelska
Nifty Corners - på engelska
The Noodle - på engelska
A list apart - på engelska
Images, Tables, and Mysterious Gaps - på engelska

CSS - Placering

Inledning

Firefox

DOCTYPE

Normalt flöde

Webläsarens fönsteryta/rityta

Procent

Display - inline, block, none

Inline-element

Block-element

Rubrik

Display

Float - Flytande element

August Strindberg

Attributet Clear

August Strindberg

Containing Block

Positionering - Static, Relative, Absolute, Fixed

position: static

position: relative

position: absolute

position: fixed

Absolut positionering

Relativ positionering

Position: relative - utan förflyttning

Fixerad positionering

Z-index - Stapelordning

Vidare...

Z-index och Containing block

Tips!

Centrera

Centrera Horisontalt

Centrera Sidans Layout

Centrera Vertikalt

Centrera Vertikalt & Horisontalt

Hack - bara för Hacke Hackspett!

Avslutningsvis - Länkar

Css Zen Garden

Mer om placering med CSS

CSS Layout

CSS Referenser

Tips & Trix