Regnery.net Internet

HTML CSS PHP MYSQL JQuery SEO – internetoplossingen

CSS div indelen site

Met CSS in combinatie met HTML kun je een site mooi indelen. Door gebruik te maken van de <div>…</div> tag kun je iedere gewenste indeling voor elkaar krijgen. In het begin is het even lastig om met CSS div een site in te delen, maar uiteindelijk heb je er veel gemak van.

CSS div indelen site

Het volgende voorbeeld laat zien hoe je met <div> tags een site van een indeling kunt geven.

HTML:
<body>
<div id=”left”>…</div>
<div id=”right”>…</div>
</body>

CSS:
#left { float: left; width: 200px; }
#right { float: left; width: 700px; }

Bovenstaande indeling geeft twee kolommen naast elkaar weer. In totaal maak je de pagina 900 pixels breed. Links is 200 pixels breed en rechts is 700 pixels breed. De site komt links in je scherm te staan.

Verklein je beeldscherm eens en je ziet gelijk wat internet explorer doet met je pagina. De rechter kolom komt onder de linker kolom te staan. Je browser gaat zelf aan de slag als de ruimte te beperkt is. Hiermee zul je rekening moeten houden als je site voor meerdere schermen geschikt moet zijn. Bij responsive webdesign optimaliseer je deze techniek en maak je de site voor meerdere soorten apparaten geschikt.

Voorbeeld gecentreerde site met twee kolommen

Het eerste voorbeeld was erg simpel. Nu is het tijd om de techniek uit te breiden met meer opties.

HTML:
<body>
<div id=”main”>
<div id=”left”>…</div>
<div id=”right”>…</div>
</div>
</body>

CSS:
#main { margin: auto; width: 900px;}
#left { float: left; width: 200px; }
#right { float: left; width: 700px; }

In dit voorbeeld bouw je eerst een hoofd container waarin je de site vervolgens gaat opbouwen. Hiermee voorkom je dat de site gekke dingen doet als het scherm te klein is. vervolgens ga je binnen de hoofdcontainer de site opdelen. Werk netjes en let goed op dat je de <div> tags op een juiste manier afsluit.

Tip: als je grotere sites gaat maken, zet dan bij iedere eind-tag van de div wat de begin tag is door <!– eind main –> ervoor te zetten. Hiermee maak je het jezelf gemakkelijk om later de site te onderhouden.

Let goed op dat je de main div de eigenschap margin:auto mee geeft. Hiermee zorg je ervoor dat de pagina mooi in het midden van je beeld komt. Zonder de main div krijg je dit niet goed voor elkaar.