In CSS worden elementen in principe behandeld als rechthoekige dozen of stroken. Voor de beschrijving van de dozen worden de volgende eigenschappen gebruikt die jullie inmiddels zeker bekend zijn:
• width - de breedte van het element
• height - de hoogte van het element
• left - afstand naar links
• right - afstand naar rechts
• top - afstand naar boven
• bottom - afstand naar beneden
• margin - de buitenmarge
• border - de rand om het element
• padding - de binnenmarge, dus de afstand tussen de rand en de inhoud van het element
Deze eigenschappen zijn reeds voorgesteld.
De totale breedte van een element komt overeen met de som van de breedte van de verschillende specificaties. (Dit geldt trouwens ook voor de hoogte).
Een voorbeeld:
div#box {
width: 100px;
padding: 20px; /* 20px aan de linkerkant en 20px aan de rechterkant */
border: 2px solid; /* 2px aan de linkerkant en 2px aan de rechterkant */
margin: 0 30px; /* 30px aan de linkerkant en 30px aan de rechterkant */
}Welke breedte heeft dit div-gebied? Laten we eens kijken naar de afzonderlijke waarden:
• 100 pixels
• 2 keer 20 pixels
• 2 keer 2 pixels
• 2 keer 30 pixels
Dit resulteert in een totale breedte van het element van 204 pixels.
De breedte en hoogte van elementen worden bepaald door width en height. Indien deze gegevens niet expliciet in de stylesheet worden vermeld, geldt het volgende:
• Als width ontbreekt, wordt de box zo breed weergegeven als het omringende element.
• Als height ontbreekt, wordt het element zo hoog weergegeven als de inhoud ervan.
Een voorbeeld:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
div#box {
border: 1px solid; /* 2px aan de linkerkant en 2px aan de rechterkant */
margin: 0 30px; /* 30px aan de linkerkant en 30px aan de rechterkant */
background-color:#6600CC;
}
</style>
</head>
<body>
<div id="box">PSD-Tutorials.de</div>
</body>
</html>
In de browser ziet dit er als volgt uit:
Het overkoepelende element van het div-element is body. Hierdoor wordt het element daadwerkelijk zo breed als het body-element weergegeven. Wat betreft de hoogte, past het zich echter aan aan de inhoud.
Alles op Nul
Elke browser heeft een ingebouwde stylesheet. In deze stylesheets zijn enkele standaardwaarden gedefinieerd. Dit geldt bijvoorbeeld ook voor padding en margin. En deze standaardwaarden variëren helaas tussen de verschillende browsers. Dit aspect maakt het moeilijk om identieke resultaten in verschillende browsers te verkrijgen met betrekking tot het boxmodel. Daarom wordt aanbevolen om de marges die door de browsers worden toegepast op nul te zetten. Dit kan als volgt worden gedaan:
* { padding: 0; margin: 0; }
Voeg deze regel toe aan het begin van je stylesheet. Op deze manier kun je nu beginnen met het plaatsen van de dozen op de gewenste locaties.
Boxtypes
Hoe een element uiteindelijk wordt weergegeven en hoe het andere elementen beïnvloedt, is afhankelijk van het type element. De CSS-specificatie maakt daadwerkelijk onderscheid tussen blokelementen en inline-elementen. (Er zijn nog andere typen, maar die worden op dit moment buiten beschouwing gelaten omdat ze slechts een ondergeschikte rol spelen).
Blokelementen creëren altijd een nieuwe regel. Daaropvolgende elementen beginnen ook in een nieuwe regel. Typische blokelementen zijn onder andere p, div, h1, ul, etc. Voor deze elementen gelden de eerder genoemde eigenschappen voor buitenmarge, binnenmarge, hoogte, breedte en rand.
<h1>Digital Painting & Matte Painting: Bildaufbau definieren</h1> <p>Modul 2 - Teil 2: Ein Bild ist immer ein Ganzes. Jedoch muss man sich immer überlegen, wo der Betrachter als Erstes hinsehen sollte.</p>
Als we kijken naar het resultaat in de browser, zien we dat h1 en p elk een eigen regel creëren.
Inline-elementen creëren daarentegen geen eigen alinea, maar worden weergegeven in de normale tekststroom. Typische inline-elementen zijn span, em, strong, img, br, etc. Voor inline-elementen gelden geen verticale marges en geen opgaven voor breedte en hoogte.
<h1><em>Digital Painting & Matte Painting</em>: Bildaufbau definieren</h1> <p>Modul 2 - Teil zwei: <strong>Ein Bild ist immer ein Ganzes</strong>. Jedoch muss man sich immer überlegen, wo der Betrachter als Erstes hinsehen sollte.</p>
En hier is een blik op het resultaat:
Je kunt nu van elementen die eigenlijk blokelementen zijn, inline-elementen maken.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
h1 {
background-color:#00CCFF;
}
</style>
</head>
<body>
<h1>Digital Painting & Matte Painting</h1>
<p>Modul 2 - Deel 2: <em>Een beeld is altijd een geheel</em>. Maar men moet altijd nadenken over waar de kijker als eerste naar moet kijken.</p>
</body>
</html>Bekijk het resultaat in de browser.
De achtergrondkleur van de h1-kop geeft aan dat het element de volledige breedte inneemt. De breedte is gebaseerd op het bovenliggende body-element.
De eigenschap display komt nu in het spel.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
h1 {
display:inline;
background-color:#00CCFF;
}
</style>
</head>
<body>
<h1>Digital Painting & Matte Painting</h1>
<p>Modul 2 - Deel 2: <em>Een beeld is altijd een geheel</em>. Maar men moet altijd nadenken over waar de kijker als eerste naar moet kijken.</p>
</body>
</html>
Door display: inline verandert de breedte van het element.
De breedte van het element past zich nu daadwerkelijk aan de inhoud aan. Hier is een overzicht van welke waarden aan display kunnen worden toegewezen:
• none – geen weergave
• block – het element wordt weergegeven als een blokelement, wat dus een nieuwe regel veroorzaakt.
• inline – het element wordt weergegeven als een inline-element, verschijnt dus in de doorlopende tekst.
• inline-block – creëert uiterlijk een blok, waarvoor hoogte, breedte en buitenruimte kunnen worden opgegeven. Elk element blijft echter in de doorlopende tekst. Het is dus een combinatie van een blok- en een inline-element.
• list-item – het element wordt weergegeven als een blokelement. Er wordt echter aanvullend een opsommingsteken voor geplaatst.
• run-in – genereert afhankelijk van de inhoud een blok- of een inline-element.
• table – werkt zoals het bekende HTML-element table.
• inline-table – werkt zoals het HTML-element table, maar inline.
• table-row – het element bevat naast elkaar geplaatste kinderlementen. Werkt als het HTML-element tr.
• table-cell – het element vertegenwoordigt een tabelcel en werkt als de HTML-elementen th en td.
• table-row-group – het element bevat een groep elementen met meerdere naast elkaar geplaatste kinderlementen en werkt als het tbody-HTML-element.
• table-header-group – het element bevat een groep elementen met meerdere naast elkaar geplaatste kinderlementen en werkt als het thead-HTML-element.
• table-footer-group – het element bevat een groep elementen met meerdere naast elkaar geplaatste kinderlementen en werkt als het tfoot-HTML-element.
• table-column – hiermee worden de eigenschappen van de cellen van een kolom beschreven. table-column werkt als het col-element uit HTML.
• table-column-group – dit element bevat een groep van elementen waarmee de eigenschappen van cellen van een kolom worden beschreven. Het werkt als het HTML-colgroup-element.
• table-caption – hiermee wordt de titel van de tabel gedefinieerd. De eigenschap werkt als het HTML-element caption.
Er zijn inderdaad verschillende weergavemogelijkheden voor verschillende elementtypen in CSS. Deze spelen een cruciale rol bij het positioneren van elementen. Meer hierover in de volgende tutorials.
