skriv ut »

CSS - layout

OBS! Innan du börjar använda de mallar som finns i slutet av denna guide är det viktigt att du har grundkunskaper i CSS » och då framförallt i CSS positionering » . Att bara använda mallarna som de är ger ingen egen och unik layout och det är ju ganska meningslöst eller hur? Utgå ifrån mallarna och anpassa dem efter dina egna behov så får du din egen personliga design.

Vad är CSS och varför ska du använda det?

Innehåll och struktur
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. CSS har tagit HTML ett steg längre och möjliggjort formateringar och effekter som inte fanns i HTML standarden. En av fördelarna med CSS är att flera mallar kan användas och de har då företräde inbördes så att en "huvudmall" med de övergripande formateringarna kan ersättas på en lägre nivå av en "lokal mall" som då gäller före huvudmallen. CSS är liksom XML/XHTML ett steg mot att separera innehåll och struktur i dokument. All formatering bör ske i externa mallar vilket gör att mängden kod i själva dokumentet minskar avsevärt och gör att sidorna laddas snabbare i webbläsaren. Då samma mall används för varje dokument behöver inte webbläsaren läsa in formateringsanvisningar på nytt varje gång en ny sida anropas.

Tillgänglighet
En målsättning med CSS är att läsaren ska kunna påverka utseendet av dokumentet när sidorna läses i webbläsaren vilket inte alltid har varit populärt bland författarna av dokumenten då förändringar kan påverka webbplatsens layout. Detta har i praktiken inneburit att vissa grupper har utestängts från att använda många platser på Internet. Syn- och hörselskadade och andra har haft svårigheter att ta del av innehåll på sidorna trots att det finns programvaror för tolkning av innehåll på webbsidor. Tillgänglighet är ett av ledorden när framtidens webbplatser ska utformas och då gäller detta inte bara de som har svårt att läsa dokumenten på en PC. Ett av målen för W3C är att göra webbaserat innehåll tillgängligt på fler plattformar än PC. Det kan vara för PDA (handdator), mobiltelefoner, enheter för talsyntes och punktskrift (Braille). Genom att strukturera dokumenten på rätt sätt ska alltså både synskadade och hörselskadade kunna ta del av innehållet. Det innebär att många webbplatser som byggts med layout som första prioritet inte fungerar om de använder tex Frames, Iframes, Imagemaps, java, javascript, nästlade tabeller, bilder utan ALT-text, GIF-animationer, Flash, Shockwave, PDF-dokument osv. Många funktioner som används idag går då¨alltså bort helt... (läs mer om W3C och webbstandards »)

CSS levels
CSS finns specificerat i olika "nivåer" där CSS1 (1996) innehåller information om relativt enkel formatering som bakgrundsfärger, bakgrundsbilder, teckensnitt och justering av text. CSS2 (1998) går ett steg längre och ger möjlighet att formge hela dokument med positionerade rektangulära områden (boxar) som tidigare bara varit möjligt med tabeller (tables). CSS2 har förbättrats och finns i version CSS21 men kommer att ersättas av CSS3 som idag inte är helt färdig. Håll dig uppdaterad om alla specifikationer i CSS genom att besöka W3C för mer information: CSS1 »  -  CSS2 »  -  CSS3 »

TIPS! CSS har begränsat stöd i framförallt äldre webbläsare men även i IE6. Den webbläsare som bäst följer specifikationerna från W3C är Firefox - detta gäller framförallt CSS2- positionering ». Använd i första hand Firefox när du testar dina CSS-layoter för att se det korrekta resultatet och anpassa sedan koden till IE vid behov. Läs mer om Firefox och andra webbläsare här »

Läs mer om: grunderna i CSS » - CSS-effekter » - CSS-positionering » - CSS-menyer »

CSS för IE och quirks

CSS ska fungera fullt ut i en perfekt värld men i webbläsarnas värld är inget perfekt tyvärr... Internet Explorer visar inte CSS korrekt enligt W3C (läs mer om W3C och docstandards ») och detta gäller även IE6. Tidigare versioner av IE är ännu sämre och om du tänker ta hänsyn till alla användare av IE<6 så måste du använda dig av korrekt doctype men även olika "hack" för att få det att fungera. I denna guide visas inte hur du anpassar CSS till IE<6 och vi hänvisar istället till resurser som visar metoderna.

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

CSS kan användas till layouter och är då i grunden boxar (containers - containing block) som placeras bredvid eller inuti varandra. Många som förespråkar CSS till layouter anser att tabeller <table> uteslutande ska användas till "tabulära data" och inte alls till formatering av innehåll och layout. Denna guide visar hur du kan bygga CSS-layouter helt utan användning av tabeller även om det i praktiken innebär att du måste använda olika "hack" för att åstadkomma relativt enkla formateringar.

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 om boxmodellen i guiden CSS positionering »

Det första exemplet är en vanligt förekommande layout som ofta används när en meny är placerad till vänster och sidinnehållet till höger. Layouten innehåller ett sidhuvud och två kolumner. Ingen relativ eller absolut positionering används för boxarna men däremot float för att placera kolumnerna bredvid varandra. Innehållet i CSS-kolumner bestämmer höjden på kolumnen och ingen textflöde sker mellan kolumnerna. Om du vill att texten i en kolumn ska fortsätta i nästa kolumn så måste du manuellt skriva eller flytta texten från kolumn1 till kolumn2, kolumn3 osv:

OBS! Viktigt! Grunden till layouten är ett vanligt HTML-dokument men viktigt är att du använder rätt doctype - läs mer om att använda rätt doctype i guiden CSS positionering »

 

Bygg din layout steg-för-steg

Skapa din grundlayout med innehåll för sidhuvud och två kolumner genom att följa alla beskrivningar som följer nedan. Med grundkunskaper i hur du bygger en CSS-layout kan du sedan använda någon av mallarna längst ned i denna guide för att skapa din alldeles egna unika layout!

Börja med att ge dina boxar ett textinnehåll:

Koden i exemplet ovan:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Webdesignskolan, CSS layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
Sidhuvud Kolumn1: texten i kolumnen... Kolumn2: texten i kolumnen...
</body>
</html>

Boxarna som innehållet ska placeras i anger du i en extern CSS-mall som du länkar till varje dokument som ska ha den angivna layouten. I exemplet nedan ä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:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Webdesignskolan, CSS layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="layout.css" rel="stylesheet" type="text/css">
</head>
<body>
Sidhuvud Kolumn1: texten i kolumnen... Kolumn2: texten i kolumnen...
</body>
</html>

CSS-mallen är klar och länkad till ditt dokument och nu återstår att ange vilka delar av ditt dokument som ska använda mallarna genom att omsluta innehållet med <DIV>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Webdesignskolan, CSS layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="layout.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="sidhuvud">Sidhuvud</div>
<div id="kolumn1">Kolumn1: texten i kolumnen</div>
<div id="kolumn2">Kolumn2: texten i kolumnen</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:


(Textstorlek och övrig formatering av text visas längre ned)

klicka här för att se exemplet »

OBS! Om du placerat textinnehållet inom <P> får du ett större avstånd över och under textraderna (gäller för Firefox men inte Internet Explorer):

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

Texten inom <P> i Firefox 1:

Egenskaper och avstånd för <P> kan du ange i CSS-mallen vilket också används i de färdiga mallarna i slutet av denna guide. Att använda styckeindelning med <P> är ett bra alternativ för längre texter då du kan ange avstånd före och efter stycken. I kortare textinformation och menyer etc behöver du inte placera texten inom <P>.

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; }

Resultatet i Firefox 1:

Resultatet i Internet Explorer 6:

klicka här för att se exemplet »

När boxarna har en bakgrundsfärg ser du att inga marginaler finns mellan boxens innehåll och kanterna. Även avståndet mellan sidans kant och boxarna är standard och som du ser i exemplen ovan varierar detta i olika webbläsare. 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 margin men för funktionalitet i fler webbläsare anges även padding:

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

Avståndet mellan boxens kant och innehåll kan du påverka med margin eller padding. Skillnaden är att margin tar en del av boxens yta och du får då mindre yta kvar till innehållet. Om du istället använder padding läggs området till 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 »

Boxarna med margin 10px:

Boxarna med padding 10px:

Exemplet ovan använder padding för att ange avstånd mellan boxens fyra sidor och innehållet:

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

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 innebär att bakgrundsfärg eller kantlinje inte fungerar som i Tabeller där du ju enkelt kan ange både höjd och bakgrundsfärg för hela tabellcellen. Det finns olika lösningar som är mer eller mindre bra och här visas ett par alternativ.

Metod 1:
En extra containerbox med bakgrundsfärgen

Ett alternativ är att placera de boxar som ska ha bakgrundsfärg i en "behållare" (containerbox) som då istället får ha bakgrundsfärgen. Den kolumn som inte ska vara färgad tilldelas samma färg som sidans bakgrund (och den har ju då faktiskt en färg ändå).

I exemplet nedan ligger #kolumn1 och #kolumn2 i en yttre container med namnet #kolumncontainer som nu har bakgrundsfärgen:

Notera att den nya mallen med namnet #kolumncontainer nu har bakgrundsfärgen och att #kolumn1 inte har någon bakgrundsfärg längre. Bredden på den omgivande boxen måste vara samma som de två kolumnerna den innehåller inklusive padding. I exemplet är kolumnernas bredd 200 pixlar och de har en padding på 10 pixlar till höger och vänster om innehållet (10+200+10 och 10+200+10 är totalt 440 pixlar):

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

Omslut de två boxarna (kolumnerna) med den nya yttre boxen:

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

Ge #kolumn2 samma färg som sidans bakgrund (vit i exemplet) så blir det visuella resultatet att Kolumn1 har bakgrundsfärg och Kolumn2 inte har bakgrundsfärg - en illusion som fungerar ganska bra:

CSS-kod som ger #kolumn2 den vita bakgrundsfärgen i exemplet ovan:

body {margin: 0; padding: 0;}
#sidhuvud {background: #cc99cc; padding: 10px;}
#kolumncontainer {background: #FFCCFF; float: left; width: 440px;}
#kolumn1 {float: left; width: 200px; padding: 10px;}
#kolumn2 {float: left; width: 200px; padding: 10px; background: #ffffff;}

klicka här för att se exemplet »

Nackdelar? Javisst! Om du använder en sidbakgrund i form av färg eller bild syns den inte igenom den färgade boxen (vita boxen i exemplet):

klicka här för att se exemplet »

Metod 2:
En extra containerbox med bakgrundsbild

Ett annat alternativ är att använda en bakgrundsbild som upprepas nedåt och är i samma bredd som den kolumn den ska visas bakom, då behövs ingen bakgrundsfärg i någon av kolumnerna. OBS! Bakgrundsbilden kan inte placeras i #kolumn1 eftersom den då inte visas när inget textinnehåll finns. Även i detta exempel krävs en extra containerbox för att bakgrundsbilden ska upprepas ända ner till botten av de två kolumnerna. Om du placerar bakgrundsbilden i #kolumn1 visas den bara bakom textinnehållet i kolumnen och inte till nederkant av #kolumn2. I exemplet används en bild i storleken 220x20 pixlar vilket är samma bredd som #kolumn1 inklusive padding (200+10+10) - höjden på bilden är valfri.

Bakgrundsbilden som används i exemplet:


bakgrund_kolumn.gif »

CSS-koden innehåller nu bakgrundsbilden för mallen #kolumncontainer och den upprepas nedåt i Y-led. Observera att bakgrundsfärgen i #kolumncontainer och den vita bakgrundsfärgen i #kolumn2 är borttagna då de inte längre behövs:

body {margin: 0; padding: 0;}
#sidhuvud {background: #cc99cc; padding: 10px;}
#kolumncontainer {background: url(bakgrund_kolumn.gif) repeat-y; float: left;
width: 440px;}
#kolumn1 {float: left; width: 200px; padding: 10px;}
#kolumn2 {float: left; width: 200px; padding: 10px;}

klicka här för att se exemplet »

Skillnaden mot att använda en bakgrundsbild istället för en bakgrundsfärg är helt enkelt att du kan ange en bredd på bilden och inte behöver dölja färgen under Kolumn2 som tidigare (med den vita bakgrundsfärgen). Boxen #kolumn2 är nu transparent istället för vit och du kan använda en sidbakgrund:

klicka här för att se exemplet »

OBS! Här visas inte lösningar av typen: "använda kantlinjen i en box som bakgrundsfärg för annan box med hjälp av negativa marginaler" etc... Den och andra fantastiska speciallösningar för att åstadkomma enkla formateringar är så omfattande att du då istället kan använda vanliga Tabeller under en övergångsperiod tills alla specifikationer för CSS3 fungerar i praktiken. Det finns även javascript som beräknar boxarnas höjd och ser till att höjden visuellt blir likadana för kolumnerna. Vill du ändå prova olika "hack" kan du se dem i någon av resurserna nedan:

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 höger kantlinje som är 1 pixel bred i både #kolumn1 och #kolumn2 gör att den totala bredden på de två boxarna blir 442 pixlar och det är mer än den angivna bredden 440 pixlar på #kolumncontainer (containerboxen). Resultatet blir att de två boxarna placeras under varandra då utrymmet inte räcker till för placering sida vid sida:

body {margin: 0; padding: 0;}
#sidhuvud {background: #CC99CC; padding: 10px;}
#kolumncontainer {background: url(bakgrund_kolumn.gif) repeat-y; float: left;
width: 440px;}
#kolumn1 {float: left; width: 200px; padding: 10px;
border-right: 1px solid #000000;}
#kolumn2 {float: left; width: 200px; padding: 10px;
border-right: 1px solid #000000;}

De två kolumnboxarna får inte plats sida vid sida:

Lösningen är att ange värde för bredd på boxen #kolumncontainer som är tillräcklig så att de två boxarna #kolumn1 och #kolumn2 får plats. I exemplet räcker det ju att lägga till 2 pixlar så att containerboxen blir 442 pixlar och då rymmer de två kolumnboxarna med kantlinjer. Detta är en tillfällig lösning eftersom bredden måste utökas om kantlinjerna ska ha andra värden än den angivna 1 pixlars bredd.

I vårt exempel är containerboxens uppgift att innehålla bakgrundsbilden som föreställer bakgrundsfärg i #kolumn1. En lösning kan då vara att låta containerboxen ha en automatisk bredd som anpassas efter innehållet i boxen. Om inget värde för bredd anges i en box gäller "auto" vilket innebär att bredden anpassas till innehållet. I exemplet nedan är värdet för "width" borttaget och bredden anpassas till innehållet som ju är de två kolumnboxarna:

body {margin: 0; padding: 0;}
#sidhuvud {background: #cc99cc; padding: 10px;}
#kolumncontainer {background: url(bakgrund_kolumn.gif) repeat-y; float: left;}
#kolumn1 {float: left; width: 200px; padding: 10px;
border-right: 1px solid #000000;}
#kolumn2 {float: left; width: 200px; padding: 10px;
border-right: 1px solid #000000;}

De två kolumnerna får nu plats sida vid sida:

Kantlinjen till höger i #kolumn1 slutar där innehållet slutar - kantlinjen har alltså samma egenskaper som bakgrundsfärgen. För att få bakgrundsfägen att sträcka sig ända ner till nederkant av båda kolumnerna gjorde vi en bakgrundsbild och placerade i en containerbox men det behövs inte för att få kantlinjen att nå till nederkant av båda kolumnerna. Lösningen är att ange kantlinje både till höger och vänster i #kolumn2 och ta bort den högra kantlinjen i #kolumn1:

body {margin: 0; padding: 0;}
#sidhuvud {background: #cc99cc; padding: 10px;}
#kolumncontainer {background: url(bakgrund_kolumn.gif) repeat-y; float: left;}
#kolumn1 {float: left; width: 200px; padding: 10px;}
#kolumn2 {float: left; width: 200px; padding: 10px;
border-left: 1px solid #000000; border-right: 1px solid #000000;}

klicka här för att se exemplet »

Yttre kantlinjer runt hela layouten kan du göra genom att ange kantlinjer för de olika boxarna var för sig och se till att tillsammans ger en sammanhållen "ram" runt hela layouten. En enklare metod kan vara att istället använda den "containerbox" du redan har och alltså ange kantlinjerna på boxen #kolumncontainer. För att även sidhuvudet ska ligga inom kantlinjerna måste boxen #sidhuvud placeras inom containerboxen:

<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 #sidhuvud en undre kantlinje. Kantlinjen mellan kolumn1 och kolumn2 ligger som tidigare i #kolumn2 (vänster kantlinje) men den högra kantlinjen i boxen är borttagen då den ersatts av den yttre kantlinjen i containerboxen:

body {margin: 0; padding: 0;}
#kolumncontainer {background: url(bakgrund_kolumn.gif) repeat-y; float: left;
border: 1px solid #000000;}
#sidhuvud {background: #cc99cc; padding: 10px;
border-bottom: 1px solid #000000;}
#kolumn1 {float: left; width: 200px; padding: 10px;}
#kolumn2 {float: left; width: 200px; padding: 10px;
border-left: 1px solid #000000;}

Yttre kantlinje angiven i containerboxen:

klicka här för att se exemplet »

Centrering horisontellt

OBS! Viktigt! För att centrering horisontellt ska fungera i IE6 är det viktigt är att du använder rätt doctype - läs mer om att använda rätt doctype i guiden CSS positionering »

Centrering kräver att du anger en fast bredd på boxen och att ingen float används (justering i sidled). Då vi har en bakgrundsbild i boxen #kolumncontainer och den inte fungerar utan float så väljer vi 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 #centrering ska omsluta allt annat innehåll:

<body>
<div id="centrering">
<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 som då också måste ha en fast bredd. I exemplet måste den omgivande containerboxen vara minst 443 pixlar för att boxarna ska få plats (bredd=200+200, padding=2x10+2x10, kantlinjer=1+1+1). Den nya boxen #centrering har en bredd på 450 pixlar för att ha lite extra utrymme om exempelvis kantlinjerna behöver utökas senare:

body {margin: 0; padding: 0;}
#centrering {width: 450px; margin-right: auto; margin-left: auto;}
#kolumncontainer {background: url(bakgrund_kolumn.gif) repeat-y; float: left;
border: 1px solid #000000;}
#sidhuvud {background: #cc99cc; padding: 10px; border-bottom: 1px solid #000000;}
#kolumn1 {float: left; width: 200px; padding: 10px;}
#kolumn2 {float: left; width: 200px; padding: 10px; border-left: 1px solid #000000;}

Boxarna centrerade i förhållande till sidans kanter:

klicka här för att se exemplet »

Alternativ lösning för centrering horisontellt

Om du av någon anledning inte kan eller vill använda rätt doctype och webbläsaren - läs IE - går över i quirks-mode finns en alternativ lösning för att få innehållet i en box centrerat horisontellt - läs mer i guiden CSS positionering »

Om du använder relativ bredd i % på boxarna kan du använda sidmarginalerna för att centrera horisontellt - läs mer om det längre ned »

Centrering vertikalt

Det finns ännu inga egenskaper för vertikal centrering i CSS men enligt W3C kommer det förmodligen i specifikationerna för CSS3 - läs mer om W3C och specifikationerna för CSS här  »

Om du använder tabeller <table> kan du ange att innehållet i en cell ska justeras i höjdled med egenskapen: vertical-align: middle men det är inte möjligt i CSS-boxar. Naturligvis kan du använda tabeller även i en CSS-layout tillsammans med boxar men i denna guide fokuserar vi på användning av positionerade boxar. Detta är är ju också ett exempel på att CSS-layouter inte är lösningen på alla problem och att det kan vara en bra idé att använda "äldre" men väl fungerande teknik under en övergångstid och att tabeller faktiskt kan användas till annat än tabulär data...

Den här metoden kräver att boxen har en absolut position och dessutom en fast storlek i pixlar (eller enhet annan än %) - läs mer om enheter i guiden CSS positionering ». Tricket är att förskjuta boxen halva fönsterstorleken till höger och nedåt med värdet 50% för den absoluta positionen och sedan använda negativa marginaler som flyttar tillbaka halva boxens storlek till vänster och uppåt. Det både låter krångligt och är krångligt men skärmdumparna nedan visar stegvis vad som sker. Den stora nackdelen med denna metod är att du aldrig kan ange en relativ storlek på boxen i procent % eller "auto".

Notera att storleken på containerboxen #centrering alltså inte får anges procentuellt och det innebär att storleken i bredd och höjd måste vara lika stor som innehållet i containerboxen. I vårt exempel är bredden på kolumnerna med kantlinjer 443 pixlar men vi anger värdet för boxen #centrering till 450 pixlars bredd. Höjden på boxen är svår att förutse då det är innehållet (texten) som avgör höjden i våra kolumner men vi provar med värdet 350 pixlars höjd. Den absoluta positionen är 50% från toppen och vänster kant (de automatiska marginalerna för centrering horisontellt är borttagna):

body {margin: 0; padding: 0;}
#centrering {position: absolute; left: 50%; top: 50%;
width: 450px; height: 350px;}
#kolumncontainer {background: url(bakgrund_kolumn.gif) repeat-y; float: left;
border: 1px solid #000000;}
#sidhuvud {background: #cc99cc; padding: 10px; border-bottom: 1px solid #000000;}
#kolumn1 {float: left; width: 200px; padding: 10px;}
#kolumn2 {float: left; width: 200px; padding: 10px; border-left: 1px solid #000000;}

STEG 1: Absolut positionering 50% från sidans topp och vänsterkant:

Boxen #centrering är nu förskjuten 50% i förhållande till webbläsarens övre och vänster kant. Nästa steg är att flytta tillbaka boxen så att centrumpunkten på boxen är i centrum av webbläsarens fönster. Det gör du genom att ange negativa marginaler som är lika med 50% av boxens bredd och höjd. I exemplet anges vänster marginal till -225px (hälften av 450 pixlar) och toppmarginalen till -175px (hälften av 350 pixlar):

body {margin: 0; padding: 0;}
#centrering {position: absolute; left: 50%; top: 50%;
width: 450px; height: 350px; margin-left: -225px; margin-top: -175px;}
#kolumncontainer {background: url(bakgrund_kolumn.gif) repeat-y; float: left;
border: 1px solid #000000;}
#sidhuvud {background: #cc99cc; padding: 10px; border-bottom: 1px solid #000000;}
#kolumn1 {float: left; width: 200px; padding: 10px;}
#kolumn2 {float: left; width: 200px; padding: 10px; border-left: 1px solid #000000;}

STEG 2: Negativa marginaler flyttar boxen uppåt och till vänster:

klicka här för att se exemplet »

Den röda streckade markeringen i exemplet visar den exakta storleken på containerboxen #centrering och som du ser så är den något större än de boxar den omsluter. Bredden på boxen är lättare att ange än höjden som ju anpassas efter innehållet i kolumnerna. Bredden får inte vara mindre än innehållet vilket då skulle medföra att innehållet förskjuts nedåt. Höjden kan vara både mindre eller mer utan att innehållet påverkas men påverkar positionen på boxen som inte då inte blir exakt centrerad i höjdled:

Bredden på containerboxen mindre än innehållet förskjuter texten nedåt:

Höjden på containerboxen mindre än innehållet påverkar den vertikala centreringen:

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 andra objekt och storleken på webbläsarens fönster. Om du vill att storleken på boxarna ska ändras relativt fönsterstorleken, och framförallt om användaren väljer en egen textstorlek i webbläsaren, använder du istället en relativ enhet som % eller em - läs mer om enheter i guiden CSS positionering »

Använd enheten % om boxarna ska ha en relativ storlek till webbläsarens fönster. Det innebär att bredden på boxarna ändras och att textinnehållet flödar om och radbryts på andra ställen. I exemplet nedan upptar #kolumn1 50% av webbläsarens fönsterbredd och containern som omsluter boxarna har bredden 100%:

body {margin: 0; padding: 0;}
#kolumncontainer {width: 100%; float: left;}
#sidhuvud {background: #cc99cc; padding: 10px; border-bottom: 1px solid #000000;}
#kolumn1 {float: left; width: 50%;}
#kolumn2 {float: left;}

50% bredd på de två kolumnerna:

...kolumnstorleken är då relativ till fönsterstorleken:

klicka här för att se exemplet »

OBS! I exemplen ovan används ingen padding eller border. Boxmodellen innebär ju att även padding och border räknas med i boxens totala bredd även om det värde för bredd du anger avser boxens innehåll - läs mer om boxmodellen i guiden CSS positionering »

Bredden måste anges för alla boxar och att ange width: auto eller att utelämna värde för bredd för automatisk bredd eller fungerar inte i Firefox. För att fylla ut webbläsarfönstret från kant till kant måste den totala breden på alla objekt vara 100% vilket ju är svårt att uppnå om du använder kantlinjer (border) och padding angivna i enheten pixlar.

I exemplet nedan används ingen kantlinje (border) men däremot padding och kolumnboxarna har padding 2% och bredd 46% vilket tillsammans blir 100% (2+46+2+2+46+2):

body {margin: 0; padding: 0;}
#kolumncontainer {width: 100%; float: left;}
#sidhuvud {background: #cc99cc; padding: 2%; border-bottom: 1px solid #000000;}
#kolumn1 {float: left; width: 46%; padding: 2%;}
#kolumn2 {float: left; width: 46%; padding: 2%;}

klicka här för att se exemplet »

Om du använder kantlinjer vill du förmodligen att de har en fast bredd och måste då använda en absolut storlek. I exemplet nedan används 1px border och 10px padding vilket innebär att bredden på kolumnboxarna måste minskas. Om du använder 50% bredd som i exemplet ovan förskjuts boxarna då den totala bredden blir mer än 100% tillsammans med kantlinjer och padding. Vilken bredd i % du ska ha på kolumnboxarna är svårt att säga då enheterna px och % blandas och du får prova dig fram till ett värde som passar för olika bredd på webbläsarfönstret.

Kolumnbredden 45% tillsammans med kantlinjer 1 pixel och padding 10 pixlar gör att exemplet nedan fungerar ganska bra i olika upplösningar på webbläsarfönstret. Däremot kan inte containern som omsluter boxarna (och innehåller de yttre kantlinjerna) vara 100% eftersom en horisontell bläddringslist då visas i fönstret. Bredden för #kolumncontainer är istället angiven till 99% och kantlinjen är 1 pixel:

body {margin: 0; padding: 0;}
#kolumncontainer {width: 99%; float: left; border: 1px solid #000000;}
#sidhuvud {background: #cc99cc; padding: 10px; border-bottom: 1px solid #000000;}
#kolumn1 {float: left; width: 45%; padding: 10px;}
#kolumn2 {float: left; width: 45%; padding: 10px; border-left: 1px solid #000000;}

klicka här för att se exemplet »

Centrering horisontellt - boxar med relativ bredd

Horisontell centrering av boxar i förhållande till sidkanterna kan ske på olika sätt. Om du använder en relativ bredd på boxarna kan du använda sidmarginalerna för att centrera boxarna horisontellt.
(Om du använder absolut bredd kan du ange automatiska marginaler - "auto" - se tidigare exempel » )

Bredden på boxarna är densamma som i exemplet ovan men sidmarginalerna är ändrade till den fasta bredden 40 pixlar. Avståndet mellan sidans höger och vänster kant är oförändrad men kolumnbredden är relativ till fönsterstorleken:

body {margin-top: 10px; margin-right: 40px; margin-left: 40px; padding: 0px;}
#kolumncontainer {width: 99%; float: left; border: 1px solid #000000;}
#sidhuvud {background: #cc99cc; padding: 10px; border-bottom: 1px solid #000000;}
#kolumn1 {float: left; width: 45%; padding: 10px;}
#kolumn2 {float: left; width: 45%; padding: 10px; border-left: 1px solid #000000;}

klicka här för att se exemplet »

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 om webbläsarens fönsterstorlek är större än den angivna maxstorleken så används "max-width".

I exemplet nedan är containerboxen 99% av fönsterstorleken men maximalt 700 pixlar:

body {margin: 20px; padding: 0px;}
#kolumncontainer {width: 99%; max-width: 700px; float: left; border: 1px solid #000000;}
#sidhuvud {background: #cc99cc; padding: 10px; border-bottom: 1px solid #000000;}
#kolumn1 {float: left; width: 20%; padding: 10px;}
#kolumn2 {float: left; width: 70%; padding: 10px; border-left: 1px solid #000000;}

klicka här för att se exemplet »

OBS! Tyvärr har Internet Explorer (tidigare versioner än IE7) problem att förstå max-width och ignorerar detta. Vill du ändå att det ska fungera i IE måste du lägga till ett javascript (som gör att koden inte längre validerar enligt W3C):
body {margin: 20px; padding: 0px;}
#kolumncontainer {width: 99%; max-width: 700px;
width: expression(document.body.clientWidth > 700? "700px": "auto");
float: left; border: 1px solid #000000;}
#sidhuvud {background: #cc99cc; padding: 10px; border-bottom: 1px solid #000000;}
#kolumn1 {float: left; width: 20%; padding: 10px;}
#kolumn2 {float: left; width: 70%; padding: 10px; border-left: 1px solid #000000;}

klicka här för att se exemplet »

Du kan kombinera max-width genom att ange en minsta bredd på kolumnerna med min-width och om fönstrets storlek är mindre än den angivna minimibredden visas den horisontella bläddringslisten:

body {margin: 20px; padding: 0;}
#kolumncontainer {min-width: 500px; max-width: 700px; float: left; border: 1px solid #000000;}
#sidhuvud {background: #cc99cc; padding: 10px; border-bottom: 1px solid #000000;}
#kolumn1 {float: left; width: 20%; padding: 10px;}
#kolumn2 {float: left; width: 70%; padding: 10px; border-left: 1px solid #000000;}

Minimal bredd på kolumnerna är uppnådd i FF och bläddringslisten visas:

klicka här för att se exemplet »

TIPS! Internet Explorer (tidigare versioner än IE7) ignorerar min-width och max-width och för att få exemplet ovan att fungera i IE måste du använda ett "hack" i form av ett javascript som du hittar här:

www.doxdesk.com/software/js/minmax.html »

CSS-meny i layouten

Menyer i form av listor <UL> som formaterats med CSS passar ju extra bra i en CSS-layout. Exemplen nedan visar hur du använder en horisontell meny och en vertikal meny i din layout. Läs mer om hur du bygger menyerna från grunden i guiden CSS-menyer »

Horisontell meny

HTML-koden för en horisontell meny som placerats i boxen #sidhuvud:

<body>
<div id="kolumncontainer">
<div id="sidhuvud">
<div id="menycontainer">
<ul>
<li><a href="sida.htm">Meny 1</a></li>
<li><a href="sida.htm">Meny 2</a></li>
<li><a href="sida.htm">Meny 3</a></li>
<li><a href="sida.htm">Meny 4</a></li>
<li><a href="sida.htm">Meny 5</a></li>
</ul>
</div> Text till höger om menyn... </div>
<div id="kolumn1">Texten i kolumn1 här...</div>
<div id="kolumn2">Texten i kolumn2 här...</div>
</div>
</body>
</html>

CSS-koden:

body {margin: 1em 0 0 1em; padding: 0;}
/* sidlayout */
#kolumncontainer {float: left; width: 47em; border: 1px solid #000000;}
#sidhuvud {height: 2.5em; padding: 0.8em 0 0 0; background: #cc99cc;
border-bottom: 1px solid #000000;}
#kolumn1 {float: left; width: 9em; padding: 0.5em;}
#kolumn2 {float: left; width: 33em; padding: 0.5em; border-left: 1px solid #000000;}
/* meny */
#menycontainer ul {float: left; margin: 0; padding: 0 0 0 1em;}
#menycontainer li {border: 1px solid #000000; background: #ffccff; float: left; display: inline; margin-right: 1em; padding: 0.3em 0;}
#menycontainer ul a {text-decoration: none; padding: 0.3em 1em;}
#menycontainer a:link {color: #000000;}
#menycontainer a:visited {color: #000000;}
#menycontainer a:hover {background: #ffcc66;

klicka här för att se exemplet »

TIPS! Menyerna och layouterna är angivna med relativa enheter för att vara skalbara. Ändra storlek i webbläsaren för att se hur din layout fungerar. Snabbkommandot i Firefox och Internet Explorer är CTRL+plus eller CTRL+minus och det finns 16-17 storlekar (återställ till standard med CTRL+0).
Snabbkommandon finns inte i IE6 men du kan välja menyn "Visa/Textstorlek" där du har fem olika storlekar att välja på ("mellan" är standardvärdet). Dessutom kan du med scrollhjulet på musen CTRL+scrolla för att andra textstorlek både i Firefox och IE.

Bredden för layouten i exemplet ovan är angiven i enheten em och anpassas efter den valda textstorleken i webbläsaren. Om du istället vill ha en fast bredd anger du bredden i pixlar:

body {margin: 1em 0 0 1em; padding: 0;}
/* sidlayout */
#kolumncontainer {float: left; width: 750px; border: 1px solid #000000;}
#sidhuvud {height: 2.5em; padding: 0.8em 0 0 0; background: #cc99cc; border-bottom: 1px solid #000000;}
#kolumn1 {float: left; width: 140px; padding: 10px;}
#kolumn2 {float: left; width: 567px; padding: 10px; border-left: 1px solid #000000;}
/* meny */
#menycontainer ul {float: left; margin: 0; padding: 0 0 0 1em;}
#menycontainer li {border: 1px solid #000000; background: #ffccff; float: left; display: inline; margin-right: 1em; padding: 0.3em 0;}
#menycontainer ul a {text-decoration: none; padding: 0.3em 1em;}
#menycontainer a:link {color: #000000;}
#menycontainer a:visited {color: #000000;}
#menycontainer a:hover {background: #ffcc66;}

klicka här för att se exemplet »

Vertikal meny

HTML-koden för en vertikal meny som placerats i boxen #kolumn1:

<body>
<div id="kolumncontainer">
<div id="sidhuvud">Text i sidhuvudet här...</div>
<div id="kolumn1">
<div id="menycontainer">
<ul>
<li><a href="sida.htm">Meny 1</a></li>
<li><a href="sida.htm">Meny 2</a></li>
<li><a href="sida.htm">Meny 3</a></li>
<li><a href="sida.htm">Meny 4</a></li>
<li><a href="sida.htm">Meny 5</a></li>
</ul>
</div>Text under menyn här...</div>
<div id="kolumn2">Texten i kolumn2 här...</div>
</div>
</body>
</html>

CSS-koden:

body {margin: 1em 0 0 1em; padding: 0;}
/* sidlayout */
#kolumncontainer { float: left; width: 47em; border: 1px solid #000000;}
#sidhuvud {background: #cc99cc; padding: 10px; border-bottom: 1px solid #000000;}
#kolumn1 {float: left; width: 9em; padding: 1em; background: #ffccff; border-right: 1px solid #000000;}
#kolumn2 {float: left; width: 33em; padding: 0.5em;}
/* meny */
#menycontainer ul{width: 8em; margin: 0; padding: 0; background: #CC99CC;
border: 2px solid #ffffff;}
#menycontainer li{list-style: none; padding: 0.3em 0.1em;}
#menycontainer ul a{text-decoration: none; padding: 0.1em 4em 0.1em 0.3em;}
#menycontainer a:link{color: #000000;}
#menycontainer a:visited{color: #000000;}
#menycontainer a:hover{background: #ffcc66;}

klicka här för att se exemplet »

Textformatering för layouten

Formatering av texten gör du genom att ange egenskaperna för <BODY> <P> <H> eller de olika boxarna #sidhuvud #kolumn1 #kolumn2. Läs mer om formatering i guiden CSS - grunder »

Exempel på textformatering av layouten med den vertikala menyn:

klicka här för att se exemplet »

CSS-koden där grundstorleken för all text angivits i <BODY>. De två kolumnerna #kolumn1 #kolumn2 har olika teckensnitt och storlek vilket också gäller rubrikerna <H1><H3>:

body {margin: 1em 0 0 1em; padding: 0; font-size: 1em}
h1 {font: 2em Arial, sans-serif; margin: 0.1em 0;}
h3 {font: 1.5em Arial, sans-serif; font-style: normal; margin: 0.1em 0;}
/* sidlayout */
#kolumncontainer { float: left; width: 47em; border: 1px solid #000000;}
#sidhuvud {background: #cc99cc; padding: 0.5em; border-bottom: 1px solid #000000;}
#kolumn1 {float: left; width: 10em; padding: 0.5em; background: #ffccff;
font: italic 1em Georgia, serif;}
#kolumn2 {float: left; width: 40em; padding: 0.5em; border-left: 1px solid #000000;
font: 0.75em/2em Verdana, sans-serif;}
/* meny */
#menycontainer ul{width: 8em; margin: 0; padding: 0; background: #cc99cc; border: 2px solid #ffffff;}
#menycontainer li{list-style: none; padding: 0.3em 0.1em;
font: bold 0.8em Verdana, sans-serif;}
#menycontainer ul a{text-decoration: none; padding: 0.1em 4em 0.1em 0.3em;}
#menycontainer a:link{color: #000000;}
#menycontainer a:visited{color: #000000;}
#menycontainer a:hover{background: #ffcc66;}

Radavstånd har angivits för #kolumn2 där koden för teckenstorlek och radhöjd: font-size: 0.75em; line-height: 2em; förkortats till: font: 0.75em/2em

 

TIPS! Använd gärna våra färdiga mallar som du hittar i guiden CSS-layout och CSS-meny »