﻿
<!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>Lay-out met 3 kolommen, vloeibaar - Koptekst/voettekst</title>
<style type="text/css">
<!--
body {
	font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
	background-color: #4E5869;
	margin: 0;
	padding: 0;
	color: #000;
}

/* ~~ Element-/tagkiezers ~~ */
ul, ol, dl { /* Vanwege de verschillen tussen browsers kunt u het beste geen opvulling en marges gebruiken voor lijsten. Voor consistentie kunt u hier of bij de items (LI, DT, DD) voor de lijsten de gewenste waarden opgeven. Houd er rekening mee dat wat u hier doet, wordt gebruikt in de navigatielijst, tenzij u een specifiekere kiezer opgeeft. */
	padding: 0;
	margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;	 /* als u de bovenmarge verwijdert, voorkomt u dat marges buiten de div vallen waartoe ze behoren. De resterende ondermarge zorgt ervoor dat er ruimte blijft tussen de div en alle volgende elementen. */
	padding-right: 15px;
	padding-left: 15px; /* als u opvulling toevoegt aan de zijkant van de elementen in de divs, in plaats van aan de divs zelf, voorkomt u dat u kadermodelberekeningen moet uitvoeren. U kunt als alternatief een geneste div met opvulling aan de zijkant gebruiken. */
}
a img { /* met deze kiezer verwijdert u de blauwe standaardrand die in bepaalde browsers wordt weergeven rond een afbeelding als deze wordt omgeven door een koppeling */
	border: none;
}

/* ~~ De stijl voor de koppelingen op uw site moet deze volgorde aanhouden, inclusief de groep kiezers waarmee het aanwijseffect wordt gemaakt. ~~ */
a:link {
	color:#414958;
	text-decoration: underline; /* tenzij u zeer unieke opmaak toepast op uw koppelingen, kunt u de koppelingen het beste onderstrepen zodat ze gemakkelijk te herkennen zijn */
}
a:visited {
	color: #4E5869;
	text-decoration: underline;
}
a:hover, a:active, a:focus { /* met deze groep kiezers krijgen gebruikers die navigeren met een toetsenbord, dezelfde aanwijsfunctionaliteit als gebruikers die werken met een muis. */
	text-decoration: none;
}

/* ~~ deze container omvat alle overige divs en geeft de divs hun breedte op basis van een percentage ~~ */
.container {
	width: 80%;
	max-width: 1260px;/* wellicht is het verstandig dat u een maximumbreedte instelt om te voorkomen dat deze lay-out te breed wordt op een groot beeldscherm. Zo zorgt u ervoor dat de regels goed leesbaar blijven. Deze declaratie werkt niet in Internet Explorer 6. */
	min-width: 780px;/* wellicht is het verstandig dat u een minimumbreedte instelt om te voorkomen dat deze lay-out te smal wordt. Zo zorgt u ervoor dat de regels in zijkolommen goed leesbaar blijven. Deze declaratie werkt niet in Internet Explorer 6. */
	background-color: #FFF;
	margin: 0 auto; /* de lay-out wordt gecentreerd via de combinatie van de automatische waarde voor de zijkanten en de breedte. Als u de breedte van de container instelt op 100%, hebt u dit niet nodig. */
}

/* ~~ voor de koptekst wordt geen breedte ingesteld. De koptekst loopt over de volledige breedte van uw lay-out en bevat een tijdelijke aanduiding voor een afbeelding, die u moet vervangen door uw eigen gekoppelde logo ~~ */
.header {
	background-color: #6F7D94;
}

/* ~~ Dit zijn de kolommen voor de lay-out. ~~ 

1) Opvulling wordt alleen boven en/of onder aan de divs geplaatst. De elementen binnen deze divs hebben opvulling aan de zijkanten. Hierdoor hoeft u geen kadermodelberekeningen uit te voeren. Houd er rekening mee dat als u opvulling aan de zijkant of een rand aan de div toevoegt, deze opvulling wordt toegevoegd aan de waarde die u definieert voor de totale breedte. U kunt ook de opvulling voor een element in de div verwijderen en in de div een tweede div invoegen die geen breedte heeft, maar wel de benodigde opvulling voor uw ontwerp bevat.

2) Er is geen marge ingesteld voor de kolommen omdat deze allemaal zwevend zijn. Als u marge moet toevoegen, moet u dit niet doen aan de kant waarnaar de kolom zweeft (bijvoorbeeld een rechtermarge voor een div die is ingesteld op zweven naar rechts). Vaak kunt u hiervoor opvulling gebruiken. Bij divs waarvoor u deze regel niet kunt toepassen, moet u een declaratie ‘display:inline’ toevoegen aan de regel van de div om een fout op te lossen waarbij in sommige versies van Internet Explorer de marge wordt verdubbeld.

3) Omdat klassen meerdere keren kunnen worden gebruikt in een document en meerdere klassen kunnen worden toegepast op een element, zijn aan de kolommen klassenamen toegewezen in plaats van id's. U kunt bijvoorbeeld zo nodig twee zijbalk-divs stapelen. Desgewenst kunt u deze eenvoudig wijzigen in id’s, zolang u maar ervoor zorgt dat u ze één keer per document gebruikt.

4) Indien gewenst kunt u de navigatie aan rechterkant plaatsen in plaats van aan de linkerkant. Hiervoor hoeft u alleen de kolommen in tegenovergestelde richting te laten zweven (allemaal naar rechts in plaats van naar links), waarna ze in omgekeerde volgorde worden weergegeven. U hoeft de divs niet te verplaatsen in de HTML-broncode.

*/
.sidebar1 {
	float: left;
	width: 28%;
	background-color: #93A5C4;
	padding-bottom: 10px;
}
.content {
	padding: 10px 0;
	width: 50%;
	float: left;
}
.sidebar2 {
	float: left;
	width: 22%;
	background-color: #93A5C4;
	padding: 10px 0;
}

/* ~~ De gegroepeerde kiezer zorgt voor de ruimte van de lijsten in het inhoudsgebied ~~ */
.content ul, .content ol { 
	padding: 0 15px 15px 40px; /* deze opvulling is gespiegeld aan de rechteropvulling in de voorgaande regel voor koppen en alinea’s. De opvulling is onderaan geplaatst zodat er ruimte ontstaat tussen overige elementen in de lijsten en is aan de linkerkant geplaatst om de inspringing te maken. Deze opvulling kunt u naar wens aanpassen. */
}

/* ~~ De stijlen voor navigatiebalken (kunnen worden verwijderd als u een voorgedefinieerd vlieguit-menu, bijvoorbeeld Spry, gebruikt) ~~ */
ul.nav {
	list-style: none; /* hiermee verwijdert u de lijstmarkering */
	border-top: 1px solid #666; /* hiermee maakt u de bovenrand voor de koppelingen - de overige worden geplaatst via een onderrand op de LI */
	margin-bottom: 15px; /* hiermee stelt u de ruimte in tussen de navigatie en de inhoud eronder */
}
ul.nav li {
	border-bottom: 1px solid #666; /* hiermee maakt u de scheiding voor knoppen */
}
ul.nav a, ul.nav a:visited { /* als u deze kiezers groepeert, behouden de koppelingen het knopuiterlijk ook nadat erop de koppelingen is geklikt */
	padding: 5px 5px 5px 15px;
	display: block; /* hiermee krijgt de koppeling de blokeigenschappen, waardoor de koppeling de hele LI in het blok vult en het volledige gebied reageert op een muisklik. */
	text-decoration: none;
	background-color: #8090AB;
	color: #000;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* hiermee wijzigt u de achtergrond en tekstkleur van muis- en toetsenbordnavigatie */
	background-color: #6F7D94;
	color: #FFF;
}

/* ~~De voettekst ~~ */
.footer {
	padding: 10px 0;
	background-color: #6F7D94;
	position: relative;/* hiermee kan de eigenschap hasLayout voor IE6 op de juiste wijze worden gewist */
	clear: both; /* met deze eigenschap voor wissen kan de container bepalen waar de zwevende kolommen eindigen en ze insluiten */
}

/* ~diverse klassen voor zweven/wissen~~ */
.fltrt {  /* met deze klasse kunt u een element aan de rechterkant van uw pagina laten zweven. Het zwevende element moet voorafgaan aan het element waarnaast het op de pagina staat. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* met deze klasse kunt u een element aan de linkerkant van uw pagina laten zweven. Het zwevende element moet voorafgaan aan het element waarnaast het op de pagina staat. */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* deze klasse kunt u gebruiken voor een <br /> of een lege div als het laatste element dat volgt op de laatste zwevende div (binnen de container) wanneer de voettekst uit de container is verwijderd of er buiten is geplaatst */
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}
-->
</style>
<!--[if lte IE 7]>
<style>
.content { margin-right: -1px; } /* deze negatieve marge van 1 pixel kan voor elke kolom in deze lay-out worden gebruikt en heeft altijd hetzelfde corrigerende effect. */
ul.nav a { zoom: 1; }  /* met de zoomeigenschap wordt de eigenschap hasLayout voor IE geactiveerd waarmee de extra witruimte tussen de koppelingen kan worden gecorrigeerd */
</style>
<![endif]-->
</head>
<body>
<div class="container">
  <div class="header"><a href="#"><img src="" alt="Logo hier invoegen" name="Insert_logo" width="28%" height="90" id="Insert_logo" style="background-color: #8090AB; display:block;" /></a> 
    <!-- end .header --></div>
  <div class="sidebar1">
    <ul class="nav">
      <li><a href="#">Koppeling één</a></li>
      <li><a href="#">Koppeling twee</a></li>
      <li><a href="#">Koppeling drie</a></li>
      <li><a href="#">Koppeling vier</a></li>
    </ul>
    <p> De bovenstaande koppelingen geven een basisnavigatiestructuur aan in een ongenummerde lijst die is opgemaakt met CSS. Als u dit als basis gebruikt, kunt u de eigenschappen aanpassen om de structuur aan te passen aan uw voorkeuren. Als u vlieguit-menu’s wilt gebruiken, kunt u deze zelf maken met een Spry-menu, een menuwidget van Adobe Exchange, of met een van de vele andere JavaScript- of CSS-oplossingen.</p>
    <p>Als u de navigatie bovenaan wilt houden, verplaatst u ul.nav naar de bovenkant van de pagina en past u een nieuwe stijl toe.</p>
    <!-- end .sidebar1 --></div>
  <div class="content">
    <h1>Instructies</h1>
    <p>Houd er rekening mee dat de CSS voor deze lay-outs veel opmerkingen bevat. Als u meestal in de ontwerpweergave werkt, moet u eens naar de code kijken voor tips over het gebruik van CSS voor vloeibare lay-outs. U kunt deze opmerkingen verwijderen voordat u uw site start. Lees voor meer informatie over de technieken die worden gebruikt in deze CSS-lay-outs het volgende artikel in Adobe Developer Center op - <a href="http://www.adobe.com/go/adc_css_layouts">http://www.adobe.com/go/adc_css_layouts</a>.</p>
    <h2>Wismethode</h2>
    <p>Omdat alle kolommen zwevend zijn, bevat deze lay-out een declaratie clear:both in de voettekstregel. Met deze methode kan de container bepalen waar de kolommen eindigen, zodat de randen en achtergrondkleuren die u in de container hebt geplaatst, kunnen worden weergegeven. Als voor uw ontwerp de voettekst uit container moet worden verwijderd, hebt u een andere wismethode nodig. De betrouwbaarste methode is om &lt;br class="clearfloat" /&gt; or &lt;div class="clearfloat"&gt;&lt;/div&gt; toe te voegen na de laatste zwevende kolom (maar vóór de afsluiting van de container). Dit heeft hetzelfde effect.</p>
    <h3>Logo vervangen</h3>
    <p>In deze lay-out is in de koptekst een tijdelijke aanduiding voor een afbeelding gebruikt op de positie waar u waarschijnlijk uw logo wilt plaatsen. U kunt het beste de tijdelijke aanduiding verwijderen en vervangen door uw eigen gekoppelde logo. </p>
    <p> Houd er rekening mee dat als u via het veld Bron in de eigenschappencontrole naar uw logo bladert, in plaats van de tijdelijke aanduiding te verwijderen en vervangen, u de inlineachtergrond en weergave-eigenschappen moet verwijderen. Deze inlinestijlen dienen alleen om de tijdelijke aanduiding voor logo’s in browsers weer te geven voor demonstratiedoeleinden. </p>
    <p>Als u de inlinestijlen wilt verwijderen, moet u controleren of het deelvenster CSS-stijlen is ingesteld op Huidig. Selecteer de afbeelding, klik in het deelvenster Eigenschappen van het deelvenster CSS-stijlen met de rechtermuisknop en verwijder de weergave- en achtergrondeigenschappen. (U kunt natuurlijk ook rechtstreeks naar de code gaan en daar de inlinestijlen voor de afbeelding of tijdelijke aanduiding verwijderen.)</p>
    <h4>Voorwaardelijk commentaar voor Internet Explorer</h4>
    <p>Deze vloeibare lay-outs bevatten voorwaardelijk commentaar voor Internet Explorer (Internet Explorer Conditional Comment; IECC) waarmee twee problemen worden opgelost. </p>
    <ol>
      <li>De div-grootte in lay-outs op basis van percentages wordt anders afgerond in de verschillende browsers. Als bijvoorbeeld een waarde als 144,5px of 564,5px moet worden weergegeven in een browser, wordt deze waarde afgerond naar het dichtstbijzijnde hele getal. In Safari en Opera worden de waarden naar beneden afgerond, in Internet Explorer wordt naar boven afgerond en in Firefox wordt één kolom naar boven afgerond en één kolom naar beneden zodat de volledige container wordt gevuld. Vanwege deze afronding kunnen er inconsistenties optreden in bepaalde lay-outs. Met deze IECC hebt u de beschikking over een negatieve marge van 1 pixel waarmee u het probleem kunt oplossen voor Internet Explorer. U kunt de marge naar elke kolom verplaatsen, aan de linker- of rechterkant, afhankelijk van uw lay-outwensen.</li>
      <li>De zoomeigenschap is toegevoegd aan het anker binnen de navigatielijst omdat in sommige gevallen extra witruimte wordt weergegeven in IE6 and IE7. Met de zoomeigenschap krijgt Internet Explorer de beschikking over de eigen hasLayout-eigenschap, waarmee dit probleem kan worden opgelost.</li>
    </ol>
    <!-- end .content --></div>
  <div class="sidebar2">
    <h4>Achtergronden</h4>
    <p>De achtergrondkleur van elke div wordt per definitie alleen weergegeven voor de lengte van de inhoud. Als u een scheidingslijn wilt gebruiken in plaats van een inhouds-div, plaatst u een rand aan de zijkant van de inhouds-div (maar alleen als deze altijd meer inhoud bevat).</p>
    <!-- end .sidebar2 --></div>
  <div class="footer">
    <p>Deze voettekst bevat de declaratie position:relative waarmee in Internet Explorer 6 de voettekst de eigenschap hasLayout krijgt zodat de voettekst op de juiste wijze kan worden gewist. Als ondersteuning voor IE6 niet vereist is, kunt u deze declaratie verwijderen.</p>
    <!-- end .footer --></div>
  <!-- end .container --></div>
</body>
</html>
