Div element
1. Wat is een div nu eigenlijk?
2. Alle attributen in het kort
3. Waarom nu eigenlijk style met behulp van id en class?
4. Floating div's
5. Positioning
6. Absolute vs. Relative
7. Positioning en table-effect
Wat is een div nu eigenlijk?
Div staat voor de afkorting division, het is eigenlijk een bijzondere paragraaf. Het is fijn om een pagina precies te positioneren of bijvoorbeeld iets een bepaalde grote mee te geven. Na iedere div wordt door de meeste browsers een linebreak gezet, maar hier bestaan natuurlijk oplossingen voor. Wat je er verder mee kunt doen is bepaalde stijlen aan hele gedeeltes html meegeven, dus niet zodat je iedere table weer opnieuw de style/css mee moet geven.
Maar dat is nog niet alles, met div's kun je gedeeltes van je pagina namen geven, die je later kunt gebruiken in bijvoorbeeld DHTML of JavaScript.
De belangrijskte attributen bij en div zijn: class, dir, id, lang, onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, style en title. Hiervan ga ik style uitdiepen met behulp van class en id.
De attributen in het kort
| Class |
De class tag zorgt ervoor om dat je div de style krijgt die jij aan de desbetreffende class-naam in je CSS hebt gegeven met .classnaam{} |
| Dir |
Hiermee declareer je de kant die de tekst opgaat, je kunt kiezen tussen van links naar rechts (dir="ltr") en van rechts naar links (dir="rtl")
|
| Id |
Een id meegeven aan een div is eigenlijk niks meer dan elke div een naam geven, let wel op: elke naam kan maar één keer gebruikt worden. Ook kun je hiermee weer een style toevoegen met #idnaam{} in je CSS |
| Lang |
De lang tag is eigenlijk niet meer dan aanduiden wat de taal is die in een div wordt gebruikt, dit wordt aangeduid met 2 letters (lang="en" of lang="nl") |
| Onclick |
Onclick spreekt eigenlijk al voor zichzelf, alles wat je hier wil laten uitvoeren gebeurt als je één keer klikt op de div |
| Ondblclick |
De 'dbl' in ondblclick staat voor double (dubbel), dus het is eigenlijk hetzelfde als onclick maar dan met twee keer klikken |
| Onkeydown |
Hierbij wordt er weer iets uitgevoerd als je in het desbetreffende gedeelte op een toets drukt |
| Onkeypress |
Geeft ongeveer hetzelfde effect als onkeydown |
| Onkeyup |
Wederom hetzelfde effect als onkeydown en onkeypress |
| Onmousedown |
Bij onmousedown kun je een event laten plaatsvinden als je op de desbetreffende div je muis indrukt |
| Onmousemove |
Hetzelfde effect als bij onmousedown, alleen dan als je je muis eroverheen beweegt |
| Onmouseout |
Dit geeft hetzelfde effect als onmousemove |
| Onmouseover |
Het is misschien allemaal onnuttig, maar hetzelfde effect als onmousemove en onmousedown |
| Onmouseup |
Bij deze is het iets anders, hier wordt het pas uitgevoerd als je de muisknop loslaat |
| Style |
Style is eigenlijk het meest uitgebreide van de div, normaal gesproken plaats je alle style in de CSS, wat ik hier dus ook zal gaan doen. Het geeft een bepaalde 'layout' mee aan alles wat zich in die div bevind |
| Title |
Dit geeft een naam mee aan de div, als je er dan met je muis overheen gaat komt er zo'n geel popupje net als bij plaatjes (leuk gegeven misschien:
staat voor een linebreak) |
Waarom nu eigenlijk style met behulp van id en class?
[Google_AD]
Eigenlijk hebben de style, id en class allemaal één hele grote overeenkomst: ze behoren allemaal tot CSS. CSS staat voor Cascade Style Sheets, zoals je ziet staat
het woordje 'Style' hier al in verwerkt, komt dat je niet bekend voor? Natuurlijk, daar gaan we het hier over hebben. Nu zul je je afvragen wat
id en class daar dan weer mee te maken hebben. Nou dat is eigenlijk heel simpel, als jij een class of een id meegeeft aan je div, dan neemt hij de style aan
die overeenkomt met de desbetreffende naam uit de CSS. Id heeft er nog een functie langs, hij geeft ook nog een naam aan de desbetreffende div.
Twee voorbeeldjes:
Class CSS:
.class {
border: 1px dashed #FF0000;
color: #000000;
text-align: center;
width: 100px;
margin: 0px;
padding: 4px;
}
<div class="class">Class CSS</div>
Class CSS
#id {
border: 1px dashed #0000FF;
color:
#000000;
text-align:
center;
width:
100px;
margin:
0px;
padding:
4px;
}
Floating div's
Float staat eigenlijk heel simpel voor het laten vliegen van div's, hiermee kun je maximaal 3 div's langs elkaar plaatsen. Ik ga het uitleggen aan de hand van voorbeelden.
We beginnen met 2 div's langs elkaar te plaatsen
div.floatl {
border: 1px dashed #FF0000;
color: #000000;
text-align: center;
width: 100px;
margin: 0px;
padding: 4px;
float: left;
}
div.floatr {
border: 1px dashed #FF0000;
color: #000000;
text-align: center;
width: 100px;
margin: 0px;
padding: 4px;
float: right;
}
<div class="floatl">1</div>
<div class="floatl">2</div>
<div class="floatr">3</div>
<div class="floatr">4</div>
1
2
3
4
MAAR nu zitten we met een probleem, we hebben meer categorieën en dus willen we een border meegeven waar een container div voor nodig is.
Als we het gewoon op dezelfde manier gaan doen als net krijgen we problemen, namelijk de div's worden boven de container gezet. We lossen dat op met de class div.spacer.
div.container {
border: 1px solid #000000;
width: 300px;
padding: 4px;
}
div.float {
border: 1px dashed #FF0000;
color: #000000;
text-align: center;
width: 100px;
margin: 0px;
padding: 4px;
float: left;
}
div.spacer {
clear: both;
}
<div class="container">
<div class="spacer"><!-- No Content --></div>
<div class="float">1</div>
<div class="float">2</div>
<div class="spacer"><!-- No Content --></div>
</div>
Positioning
Naar mijn mening is dit het belangrijkste (en moeilijkste) deel van een div. Met positoning kun je een div heel erg precies positioneren, dat kan vanuit de hoeken van de pagina, hetzij de hoeken van een bepaalde
container. Ik zal jullie zo goed mogelijk proberen de mogelijkheden van positioning te laten zien. Maar eerst even een kort overzicht met belangrijke punten.
| Position |
Je kunt position onderverdelen in relative en absolute. Ik ga op alletwee zo diep mogelijk in |
| Left |
Dit geeft aan hoever de div van links af moet komen |
| Top |
Dit geeft aan hoever de div van de top af moet komen |
| Visibility |
Geeft aan of een div zichtbaar of onzichtbaar moet zijn |
| Z-index |
Geeft aan hoever hij de ene div op de andere moet 'stapelen' |
| Clip |
Zorgen dat de div een balk word |
| Overflow |
Wat er wordt gedaan als de content buiten de div komt, wel of geen scrollbars? |
Absolute vs. Relative
Het is natuurlijk nodig dat je als designer alles in goed volgorde zet. Je moet het dus dan ook precies zo zetten als dat de lezer het moet lezen.
Hiervoor gaan we 'absolute' en 'relative' gebruiken in div's. Wat veel mensen denk is dat de 'absolute' uitgaat van de gehele pagina, terwijl dit niet zo is,
het gaat uit van de div waar hij inzit. Hierbij moet je wel de container div 'relative' geven omdat, anders neemt hij de pagina en niet de container. Hierdoor kun je zoveel
div's neerzetten als je wilt zonder dat ze gaan schuiven, ze behouden de positie die jij ingesteld hebt. LET OP: als je een 'absolute' tag nergens inzet pakt hij
de pagina top. Een ander punt waar je bij absolute positioning goed op moet letten is dat hij overal overheen zweeft, dus zorg dat je de ruimtes goed instelt.
Een paar voorbeeldjes:
Wat dus fout zal gaan als je iets in een container wilt hebben is
.class {
position: absolute;
top: 20px;
left: 20px;
}
<div class="class">Floating</div>
Waarom dit fout gaat? hij pakt namelijk de top van de pagina, en niet van de container div. Wil je dat doen? Dan doen we het zo
.container {
position: relative;
}
.class {
position: absolute;
top: 20px;
left: 20px;
}
<div class="container">
<div class="class">Floating</div>
</div>
Positioning en table-effect
Velen van jullie zullen denken, maar wat heb ik hier nu allemaal aan? Nu kan ik nog geen website maken net als met die goede oude tables.
FOUT! Je kunt wel degelijk een 2 of 3-row pagina netjes in elkaar zetten met div's. Met behulp van CSS en div kun je heel mooi een layout in elkaar zetten.
Aan de hand van voorbeeldjes ga ik het proberen duidelijk te maken. Hierbij komt vooral de info over positioning en float's van pas, daarom heb ik ze ook meer behandeld dan de rest.
Layout met links links
.menu {
position: absolute;
border: 1px dashed #000000;
left: 5px;
padding: 0px;
width: 150px;
}
.content {
border-top: 1px dashed #000000;
border-right: 1px dashed #000000;
border-bottom: 1px dashed #000000;
margin-left: 150px;
padding: 0px;
margin-right: 15px;
}
<div class="menu">
Menu
</div>
<div class="content">
Floating Content
</div>
Maar wat nou als ik er een header bij wil?
.header {
margin: 20px;
padding: 10px;
height: 100px;
}
.menu {
position: absolute;
left: 15px;
top: 160px;
width: 200px;
}
.content {
top: 0;
margin-left: 200px;
margin-right: 15px;
}
<div class="header">Header</div>
<div class="menu">
Menu
</div>
<div class="content">
Floating Content
</div>
Is drie rijen ook mogelijk?
.links {
position: absolute;
left: 5px;
padding: 0px;
top: 0px;
width: 150px;
}
.midden {
margin-left: 150px;
padding: 0px;
margin-right: 150px;
top: 0px;
}
.rechts {
position: absolute;
right: 15px;
padding: 0px;
top: 0px;
width: 150px;
}
<div class="links">
Links
</div>
<div class="midden">
Midden
</div>
<div class="rechts">
Floating Rechts
</div>
Zoals je wel weer ziet, met div's is ook alles mogelijk. En wat is nou vooral het grote voordeel aan div's? Naar mijn mening
is dat, dat je niet zoveel html hebt, het is overzichtelijker en compacter. Verder gaat alles tegenwoordig via CSS, en met div's
kun je hele goede CSS sites creëren. Het laatste, maar zeker niet het minste, is dat je div's heel nauwkeurig op je pagina kunt positioneren.
Bedankt voor het lezen van mijn tutorial en ik hoop dat jullie er iets aan hebben.
|
Wat is jouw favoriete javascript framework? (S: 18, R: 2)
