﻿
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>2 kolumner, vänster nav., layout med fast bredd – sidhuvud/sidfot</title>
<style type="text/css">
<!--
body {
	font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
	background-color: #42413C;
	margin: 0;
	padding: 0;
	color: #000;
}

/* ~~ Element-/taggväljare ~~ */
ul, ol, dl { /* På grund av skillnader mellan webbläsare är det bäst att nollställa utfyllnad (padding) och marginal (margin) i listor. För att få det konsekvent kan du ange värdena du vill ha antingen här eller i listobjekten (LI, DT, DD) som de innehåller. Kom ihåg att det du gör här överlappar till navigeringslistan om du inte skriver en mer specifik väljare. */
	padding: 0;
	margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;	 /* om du tar bort toppmarginalen kringgår du ett problem där marginaler kan försvinna från sin innehålls-div. Bottenmarginalen som finns kvar håller den undan från efterföljande element. */
	padding-right: 15px;
	padding-left: 15px; /* om du lägger till utfyllnaden på sidorna av elementen i divarna, i stället för i divarna själva, slipper du all rutmodellsmatematik. Du kan även som alternativ metod använda en kapslad div med utfyllnad på sidorna. */
}
a img { /* den här väljaren tar bort den blå kanten som visas i vissa webbläsare runt en bild när den omges av en länk */
	border: none;
}

/* ~~ Formateringen av webbplatsens länkar måste förbli i den här ordningen – inklusive gruppen av väljare som skapar hover-effekten. ~~ */
a:link {
	color: #42413C;
	text-decoration: underline; /* såvida du inte formaterar dina länkar så att de ser extremt unika ut, är det bäst att använda understrykning för snabb visuell igenkänning */
}
a:visited {
	color: #6E6C64;
	text-decoration: underline;
}
a:hover, a:active, a:focus { /* den här gruppen väljare ger den som använder tangentbord samma hover-upplevelse som den som använder mus. */
	text-decoration: none;
}

/* ~~den här behållaren med fast bredd omger de andra divarna~~ */
.container {
	width: 960px;
	background-color: #FFF;
	margin: 0 auto; /* det automatiska värdet på sidorna, tillsammans med bredden, centrerar layouten */
}

/* ~~ du anger inte någon bredd för sidhuvudet. Det sträcker sig över layoutens hela bredd. Det innehåller en bildplatshållare som ska ersättas med din egen länkade logotyp ~~ */
.header {
	background-color: #ADB96E;
}

/* ~~ Det här är kolumnerna för layouten. ~~ 

1) Utfyllnad (padding) anges bara i topp och/eller botten på divarna. Elementen i de här divarna har utfyllnad på sidorna. Detta besparar dig all ”rutmodellsmatematik”. Kom ihåg att om du lägger till någon utfyllnad eller kant på sidorna på själva diven, läggs detta till bredden som du definierar och bildar den ”totala” bredden. Du kan också välja att ta bort utfyllnaden på elementet i diven och placera en andra div inuti det utan någon bredd och med den utfyllnad som designen kräver.

2) Ingen marginal har angetts för kolumnerna eftersom alla är flytande. Om du måste lägga till marginal ska du undvika att placera den på den sida som du flyter mot (t.ex.: en högermarginal på en div som flyter åt höger). Ofta kan du använda utfyllnad i stället. För divar där den här regeln måste brytas bör du lägga till deklarationen "display:inline" i divens regel för att motverka ett fel där marginalen fördubblas i vissa versioner av Internet Explorer.

3) Eftersom klasser kan användas flera gånger i ett dokument (och ett element kan också ha flera tillämpade klasser), har kolumnerna tilldelats klassnamn i stället för ID:n. Två sidospalts-divar kan t.ex. staplas om det behövs. De kan mycket enkelt ändras till ID:n om det är vad du föredrar, så länge du bara använder dem en gång per dokument.

4) Om du hellre vill ha navigeringen till höger än till vänster låter du helt enkelt de här kolumnerna flyta åt motsatt håll (längst till höger i stället för vänster) så återges de i omvänd ordning. Det är onödigt att flytta runt på divarna i HTML-källan.

*/
.sidebar1 {
	float: left;
	width: 180px;
	background-color: #EADCAE;
	padding-bottom: 10px;
}
.content {

	padding: 10px 0;
	width: 780px;
	float: left;
}

/* ~~ Den här grupperade väljaren anger listorna i innehållsområdet ~~ */
.content ul, .content ol { 
	padding: 0 15px 15px 40px; /* den här utfyllnaden (padding) speglar utfyllnaden åt höger i rubrikerna och styckelinjen ovan. Utfyllnad placerades längst ned för att få mellanrum mellan andra element i listorna och till vänster för att skapa indraget. Detta kan du anpassa efter egna önskemål. */
}

/* ~~ Navigeringslistformaten (kan tas bort om du väljer att använda en fördefinierad flytande popup-meny som Spry) ~~ */
ul.nav {
	list-style: none; /* det här tar bort listmarkeringen */
	border-top: 1px solid #666; /* det här skapar den övre kanten för länkarna – alla andra läggs in med en nedre kant på LI */
	margin-bottom: 15px; /* det här skapar utrymmet mellan navigeringen i innehållet nedan */
}
ul.nav li {
	border-bottom: 1px solid #666; /* det här skapar knappavståndet */
}
ul.nav a, ul.nav a:visited { /* genom att gruppera de här väljarna ser du till att länkarna behåller sitt knapputseende även sedan de besökts */
	padding: 5px 5px 5px 15px;
	display: block; /* det här anger länkblocksegenskaperna och får det att fylla hela den LI som det ingår i. Detta får hela området att reagera på ett musklick. */
	width: 160px;  /*den här bredden gör att hela knappen går att klicka på i IE6. Om du inte behöver ha stöd för IE6 kan den tas bort. Beräkna lämplig bredd genom att subtrahera utfyllnaden på den här länken från bredden på sidospaltsbehållaren. */
	text-decoration: none;
	background-color: #C6D580;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* det här ändrar bakgrunds- och textfärgen för både mus- och tangentbordsanvändare */
	background-color: #ADB96E;
	color: #FFF;
}

/* ~~ Sidfoten ~~ */
.footer {
	padding: 10px 0;
	background-color: #CCC49F;
	position: relative;/* det här aktiverar IE6 hasLayout att rensa ordentligt */
	clear: both; /* den här rensningsegenskapen tvingar behållaren att läsa av var kolumnerna slutar och innesluta dem */
}

/* ~~ olika float/clear-klasser ~~ */
.fltrt {  /* den här klassen kan du använda för att låta ett element flyta åt höger på sidan. Det flytande elementet måste komma före elementet som det ska ligga bredvid på sidan. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* den här klassen kan du använda för att låta ett element flyta åt vänster på sidan. Det flytande elementet måste komma före elementet som det ska ligga bredvid på sidan. */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* den här klassen kan du placera på en <br /> eller tom div som sista element efter den sista flytande diven (i behållaren, #container) om sidfoten tas bort ur behållaren */
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}
-->
</style>
</head>
<body>
<div class="container">
  <div class="header"><a href="#"><img src="" alt="Infoga logotyp här" name="Insert_logo" width="180" height="90" id="Insert_logo" style="background-color: #C6D580; display:block;" /></a> 
    <!-- end .header --></div>
  <div class="sidebar1">
    <ul class="nav">
      <li><a href="#">Länk ett</a></li>
      <li><a href="#">Länk två</a></li>
      <li><a href="#">Länk tre</a></li>
      <li><a href="#">Länk fyra</a></li>
    </ul>
    <p> Länkarna ovan visar en grundläggande navigeringsstruktur som använder en punktad lista formaterad med CSS. Använd detta som startpunkt och ändra egenskaperna för att skapa en egen unik design. Om du behöver flytande popup-menyer skapar du egna med a Spry menu, en menu widget from Adobe's Exchange eller en mängd andra javascript- och CSS-lösningar.</p>
    <p>Om du vill ha navigeringen högst upp behöver du bara flytta ul.nav högst upp på sidan och återskapa formateringen.</p>
    <!-- end .sidebar1 --></div>
  <div class="content">
    <h1>Instruktioner</h1>
    <p>Tänk på att CSS-koden för dessa layouter har en stor mängd kommentarer. Om du gör merparten av ditt arbete i designvyn kan du titta på koden och få tips om hur du arbetar med CSS för fasta layouter. Du kan ta bort kommentarerna innan du publicerar din webbplats. Om du vill lära dig mer om de tekniker som används i CSS-layouterna kan du läsa den här artikeln på Adobe Developer Center – <a href=http://www.adobe.com/go/adc_css_layouts">http://www.adobe.com/go/adc_css_layouts</a>.</p>
    <h2>Rensningsmetod</h2>
    <p>Eftersom alla kolumner är flytande används en clear:both-deklaration i sidfotslinjen i den här layouten. Denna rensningsmetod tvingar behållaren att läsa av var kolumnerna slutar för att kunna visa eventuella kanter och bakgrundsfärger som du angett i behållaren. Om utformningen kräver att du tar bort sidfoten från behållaren måste du använda en annan rensningsmetod. Det mest pålitliga är att lägga till en &lt;br class="clearfloat" /&gt; or &lt;div class="clearfloat"&gt;&lt;/div&gt; efter den sista flytande kolumnen (men innan behållaren avslutas). Det ger samma rensande effekt.</p>
    <h3>Logotypersättning</h3>
    <p>I den här layouten användes en bildplatshållare i sidhuvudet där du troligen vill placera en logotyp. Du bör ta bort platshållaren och ersätta den med en egen länkad logotyp. </p>
    <p> Om du använder egenskapskontrollen för att navigera till din logotyp med hjälp av SRC-fältet (i stället för att ta bort och ersätta platshållaren) ska du tänka på att ta bort de infogade bakgrunderna och visningsegenskaperna. De här infogade formaten används bara för att få logotypplatshållaren att visas i webbläsare i demonstrationssyfte. </p>
    <p>Kontrollera att panelen CSS-format har inställningen Aktuell när du ska ta bort de infogade formaten. Markera bilden och högerklicka sedan och ta bort visnings- och bakgrundsegenskaperna i rutan Egenskaper i panelen CSS-format. (Du kan givetvis alltid gå direkt in i koden och radera de infogade formaten från bilden eller platshållaren där.)</p>
    <h4>Bakgrunder</h4>
    <p>Bakgrundsfärgen på en div fungerar så att den bara visas för innehållets längd. Det innebär att om du skapar en sidokolumns utseende med hjälp av en bakgrundsfärg eller kant, så kommer den inte att sträcka sig ända ner till sidfoten utan slutar där innehållet slutar. Om innehålls-diven alltid har mer innehåll kan du placera en kant på innehålls-diven för att skilja den från kolumnen.</p>
    <!-- end .content --></div>
  <div class="footer">
    <p>Den här sidfoten innehåller deklarationen position:relative; för att ge Internet Explorer 6 hasLayout till sidfoten så att den rensar ordentligt. Om du inte behöver ha stöd för IE6 kan du ta bort den.</p>
    <!-- end .footer --></div>
  <!-- end .container --></div>
</body>
</html>
