MasterCode

door **Theo** » 20 Sep 2008 18:17

Inleiding
Deze tutorial heb ik geschreven naar aanleiding van vele topics op diverse fora die gaan over het gebruik van divs. Ik zal proberen wat verheldering te brengen op dit gebied.

Wat is een div?
Div is een afkorting voor division wat in het Nederlands (vrij vertaald) deel of afdeling betekent. Divs worden zowel grafisch, als structureel gebruikt.

Grafisch gebruik
Met grafisch gebruik bedoel ik dat een div wordt gebruikt voor de layout. Je geeft 'm een border en een leuk achtergrondkleurtje en je hebt 'm voor grafische doeleinden gebruikt.

HTML

Code: Alles selecteren: <div style="border: 1px dashed #f00; background-color: #ccc;">Hier wat tekst</div>

Structureel gebruik
Je kunt een div ook structureel gebruiken. Je zult 'm visueel niet zien (kan wel), maar toch zal hij fuctioneel zijn.

HTML

Code: Alles selecteren: <body> <h1>Hoofd onderwerp</h1> <div> <h2>Subonderwerp 1<h2> <p>tekst met relatie tot suponderwerp 1</p> </div> <p>tekst met relatie tot het hoofdonderwerp</p> </body>

Wat je bij dit voorbeeld ziet is dat er nu structureel een onderscheid wordt gemaakt door een div. Dit is vooral voor zoekmachine-optimalisatie van belang. Zonder de div zal de zoekmachine de eerste paragraaf zien als onderdeel van het hoofdonderwerp, terwijl dat niet geval is. Met de div maak je de onderscheid.

divs en layout
Zoals wellicht bekend: er zijn duizenden wegen naar Rome toe. Er zijn dus ook veel manieren om divs te gebruiken voor je layout. Het grootste probleem is vaak het plaatsen van divs.

Dit kun je op vier hoofdmanieren doen:

Gefixeert plaatsen (fixed): de div heeft een vaste positie op het scherm en scrollt niet mee met de rest van de body.
Absoluut plaatsen (absolute): de div 'zweeft' boven de body en kan op een pixel nauwkeurig geplaatst worden. Het punt waar hij staat wordt bepaald vanaf de randen van de body
Relatief plaatsen (relative): de div 'zweeft' boven de body en kan nauwkeurig geplaatst worden. Het punt waar hij staat wordt bepaald vanaf het punt waar de div oorspronkelijk zou moeten staan.
Static plaatsen (static): de div wordt statisch geplaatst. Oftewel, hij wordt in de body opgenomen

Voorbeeld relatief/absoluut plaatsen:

HTML

Code: Alles selecteren: <div style="position: absolute; left: 50px; top: 40px; width: 100px; height: 125px; z-index: 2;">blaat</div>

Toelichting CSS eigenschappen:
{tekst } = mogelijke eigenschappen

position: de manier van plaatsen {static, absolute, relative, fixed }
width / height: breedte en hoogte van de div. {waarde mét eenheid }
z-index: als je gebruikt maakt van meerdere divs dan kun je deze laten overlappen. Aan de hand van z-index geef je aan in welke 'laag' de div moet zitten. {geheel getal: 1,2,3,4....enz }
left óf right, top óf bottom: hiermee geef je aan hoever de div van het kader van de body zit. Je gebruikt left OF right en top OF bottom. Geef je niks op dan zal de div worden geplaatst op left: 0px; top 0px; {waarde mét eenheid }

Voorbeeld gefixeerd plaatsen:

HTML

Code: Alles selecteren: <div style="position: fixed; top: 10px; left: 200px; width: 100px; height 125px;">blaat</div>

Toelichting
Door de fixed blijft de div op zijn plaats staan. De plaats bepaald je door left / right en top / bottom.

Voorbeeld static plaatsen:

HTML

Code: Alles selecteren: <div style="width: 100px; height 125px;">blaat</div>

Toelichting
Wat hier opvalt is dat ik geen position: ....... gebruikt. Dit omdat static de standaard waarde is die een div meekrijgt. Hierdoor zal de div in de normale opbouw van de pagina vallen. Plaatsing kan worden gedaan aan de hand van margin's

Vergelijking
Het lijkt nu alsof absoluut plaatsen veel makkelijker is. Het heeft echter ook nadelen. Stel: je hebt een aantal divs onder elkaar staan en de inhoud daarvan is dynamisch. Oftwel, de inhoud is de ene keer lang, de andere keer kort. Als de bovendste div meer inhoud krijgt zal hij automatisch oprekken. Hierdoor zal hij de onderstaande div overlappen.

Dit probleem zul je niet hebben als je static positioneert. Dan worden de divs namelijk deel van de body (net als een p, h1 enz.).

Static plaatsen nader bekeken
Omdat ik hier de meeste ervaring mee heb en omdat dit naar mijn idee de beste manier is om divs te plaatsen wil ik dit nader toelichten.
Ik zal dit doen aan de hand van voorbeelden. In de voorbeelden neem ik geen stijlen op. (Zoals: border, background e.d.).

Twee onder elkaar:

HTML

Code: Alles selecteren: <div style="width: 100px; height: 100px;">blaat</div> <div style="width: 100px; height: 100px;">blaat</div>

Twee onder elkaar met tussenruimte:

HTML

Code: Alles selecteren: <div style="width: 100px; height: 100px; margin-bottom: 5px;">blaat</div> <div style="width: 100px; height: 100px;">blaat</div>

Twee naast elkaar:

HTML

Code: Alles selecteren: <div style="width: 100px; height: 100px; float: left;">blaat</div> <div style="width: 100px; height: 100px; float: left">blaat</div>

Twee naast elkaar; rechts uitgelijnd:

HTML

Code: Alles selecteren: <div style="width: 100px; height: 100px; float: right;">blaat</div> <div style="width: 100px; height: 100px; float: right;">blaat</div>

Twee naast elkaar met tussenruimte:

HTML

Code: Alles selecteren: <div style="width: 100px; height: 100px; float: left; margin-right: 5px;">blaat</div> <div style="width: 100px; height: 100px; float: left;">blaat</div>

Gecentreerd:

HTML

Code: Alles selecteren: <body style="text-align: center;"> <div style="width: 700px; height: 100px; margin: 0 auto;">blaat</div>

De text-align: center; zorgt ervoor dat de div in IE gecentreerd wordt. De margin: 0 auto; zal zorgen dat de div in andere browsers gecentreerd wordt.

De hele breedte (van de body):

HTML

Code: Alles selecteren: <div>blaat</div>

De hele breedte (van de body) met een rand vrij:

HTML

Code: Alles selecteren: <div style="margin: 10px;">blaat</div>

Registreren

Informatie

Aanmelden

Informatie

Aanmeldformulier

Gebruikersnaam

Wachtwoord

MasterCode

Artikelen

Templates

Software

Videos

Live support

Webmedia

Informatie

Divs plaatsen

Divs plaatsen

Wie is er online?