De lineare indeling is de basisvorm van webpagina's. De browser leest de broncode in en verwerkt die van boven naar beneden. Zondere verdere indeling met stylesheets wordt de pagina op de zelfde manier als de broncode weergegeven.
Styleïnformatie beperkt zich tot lettertype en grootte. Ook classes kunnen nog worden gemaakt. Het resultaat is een een koloms opmaak over de volle breedte van het scherm of browservenster.
De layout van deze pagina is een verbetering van dit concept.
Om de pagina's beter te kunnen opmaken is het verstandig om delen tussen div-tags met een unieke naam te plaatsen. Met deze tags kunnen we stukken tekst beter manipuleren op het scherm.
Door met div's te werken is het makelijk om later alle pagina's via een style-sheet te wijzigen.
De bron code voor deze pagina ziet u hieronder staan.
<body>
<div id="top">
<h1>Rob's web</h1>
</div><!--Einde top -->
<div id="titel">
<h1>Lineaire indeling</h1>
</div><!--einde titel -->
<div id="nav-tak">
<p><a href="/index.html">Home</a> - <a href="../../../index.html">Websites bouwen</a> - <a href="../../index.html">Opmaak</a> - <a href="../index.html">Pagina indeling</a> - Lineaire indeling</p>
</div><!--Einde nav-tak -->
<div id="inhoud">
<hr /><p>De lineare indeling is de basisvorm van webpagina's. De browser leest de broncode in en verwerkt die van boven naar beneden. Zondere verdere indeling met stylesheets wordt de pagina op de zelfde manier als de broncode weergegeven.</p>
......
<p>Wilt u dit type pagina gebruiken met een menu erin gebruik dan een horizontale menubalk en plaats deze in een eigen div.</p>
</div><!--einde inhoud -->
</body>
</html>
De div met het ID top wordt gebruikt als kop voor de pagina. Door aan div's een ID te geven is het mogelijk om deze appart op te maken.
In de stylesheet wordt voor de naam van een div een # geplaatst. De onder vermelde code wordt in de stylesheet geplaatst.
#top {
width:1243px;
height:57px;
margin:0 auto;
padding:5px 0 0 10px;
background-color:#ff4;
border-bottom:1px solid #00f}
#top h1 {
margin:0}
De site is ontworpen voor een 1280 breed scherm wat uit oogpunt van leesbaarheid wel de maximale breedte is. Omdat de scrolbalk ook ruimte nodig heeft blijft er netto 1243 pixels over.
De hoogte is niet noodzakelijk maar zo kan je wel enige invloed op de hoogte van de kop krijgen.
Omdat het prettiger is voor gebruikers van breedere schermen om de tekst gecentreerd te lezen gebruiken we margin: 0 auto. De auto zorgt voor het centreren. Deze regel zal dus in iedere div komen te staan even als de breedte.
Met #top h1 wordt gezorgt dat alleen h1 delen in de div top worden aangepast.
Hoewel titel een betere keuze is, staat hierin de titel van de pagina tussen h1 tags. Deze zullen de algemene regels voor h1 tags volgen.
In deze stylesheet is de onderstaande code geplaatst. U kunt zien dat deze voor meerdere ID's geldig is.
#recept, #titel, {
width:1233px;
margin:0 auto;
padding:0 10px;
background-color:#fff;
border-bottom:1px solid #00f}
#nav-tak, #recept {
width:1233px;
margin:0 auto;
padding: 10px;
border-bottom:1px solid #00f
padding: 0px 10px}
Binnen deze div wordt de inhoud van het artikel geplaatst.
In deze stylesheet is de onderstaande code geplaatst.
#inhoud {
width:1233px;
margin:0 auto;
padding:10px;
background-color:#fff}
Zoals u kunt zien het bekende verhaal. Ook hier gelden de algemene regels voor de elementen.
Het is ook mogelijk waardes die hetzelfde zijn samen te voegen. Let wel op dat de width in top 10 pixels breder is dan die van het submenu en de inhoud. Ook een andere plek zoeken voor de code margin: 0 auto, b.v. in body is een optie. U kunt hiermee wat experimenteren. Verander maar een ding tegelijk en controleer wat het doet.
Wilt u dit type pagina gebruiken met een menu erin gebruik dan een horizontale menubalk en plaats deze in een eigen div.