Een rand om je webpagina
Om dit webdocument zit een steenrode rand. Die is gemaakt met CSS. Op deze pagina wordt uit de doeken gedaan hoe je zoiets maakt. De code van het voorbeeld staat onderaan de pagina.
- De HTML- en CSS-code
- Direct na de <body>-tag staan vier classes: rand_b, rand_r, rand_o en rand_l:
<div class="rand_b"></div>.
<div class="rand_r"></div>
<div class="rand_o"></div>
<div class="rand_l"></div>
Binnen deze tags zet je géén code neer; je laat ze dus leeg.
- De CSS van de vier classes luidt:
.rand_b { /* rand boven */
background-color:maroon; position:fixed;
top:0; left:0;
width:100%; height:10px;
}
.rand_o { /* rand onder */
background-color:maroon; position:fixed;
top:0; bottom:0;
width:100%; height:10px;
}
.rand_l { /* rand l1nks */
background-color:maroon; position:fixed;
top:0; left:0;
width:10px; height:100%;
}
.rand_r { /* rand rechts */
background-color:maroon; position:fixed;
top:0; right:0;
width:10px; height:100%;
}
- Toelichting voor de bovenrand:
- De rand mag niet verplaatsen : position:fixed; top:0; left:0;
- De rand is 10px breed en moet de hele beschikbare breedte 'vullen': width:100%; height:10px;
- Door bovenstaande code past de rand zich aan als de breedte van het browser-window wordt veranderd.
- Toelichting voor de onderrand:
- De code voor de onderrand is bijna gelijk aan die voor de bovenrand. Het enige verschil is dat de rand is gepositioneerd tegen de onderzijde van het browser-window: bottom:0 in plaats van top:0.
- Toelichting voor de linker rand:
- De rand mag niet verplaatsen : position:fixed; top:0; left:0;
- De rand is 10px breed en moet de hele beschikbare hoogte 'vullen': width:10px; height:100%;
- Door bovenstaande code past de rand zich aan als de hoogte van het browser-window wordt veranderd.
- Toelichting voor de rechter rand:
- De code voor de rechter rand is bijna gelijk aan die voor de linker rand. Het enige verschil is dat de rand is gepositioneerd tegen de rechter zijde van het browser-window: right:0 in plaats van left:0.
- De CSS van de vier classes zet je in een <style>-blok in de <HEAD>.
- Het kan gebeuren dat er tekst in de rand verdwijnt, hetzij boven, onder, links en/of rechts. Geef de <body>
in zo'n geval een geschikte padding met behulp van een style-attribuut. Op deze bladzijde is gebruikt:
padding-top:5px.
Opmerking:
Je zou kunnen zeggen dat het maken van een rand met behulp van vier classes nogal omslachtig is. Op het eerste gezicht
is dat ook zo. Je zou bijvoorbeeld één <div>-tag kunnen gebruiken en die een rand geven met border.
Het nadeel is dat deze bovenop de content komt te liggen, waardoor 'klikbare' elementen zoals links niet meer werken.
Als je de rand ónder de content zou leggen (met z-index) werken de klikbare elementen wel, maar dan scrollt
de content door de rand heen.
Het heeft ook geen zin om de <body> een rand te geven. Een dergelijke rand kan uit beeld scrollen.
