Informatie van de website in het midden
van het scherm houden II: aanpak met CSS
Er bestaan websites die gemaakt lijken zijn voor een bepaalde maximumbreedte van het beeldscherm. Als je
zo'n site bekijkt op een een groter (breder) beeldscherm, ontstaan er aan beide kanten van de tekst brede
marges. De tekstbreedte wordt echter niet aangepast aan de grotere breedte van het scherm.
Hier staat beschreven hoe je dat doet met behulp van CSS.
Een en ander wordt toegelicht aan de hand van een voorbeeld. De code van het voorbeeld kun je downloaden, zie onderaan deze bladzijde.
- De "truc" is om met een <DIV>-element maken dat met behulp van CSS in het midden van het window gezet.
- Dit blok wordt op het hoogste niveau, dus direct onder de <body> gedefiniëerd. Alle informatie wordt
daar in geplaatst. De rest blijft leeg. Zie het onderstaande voorbeeld:
Linker-
margeNuttige inhoud Rechter-
marge - Als je op onderstaande knop drukt verschijnt er een window met daarin een "website", die is opgezet op de manier zoals hierboven is beschreven. Je kunt de werking van de CSS controleren door het window te resizen. Bij openen is het window 600 pixels breed. Het blok in het midden is 400 pixels breed.
- De structuur van de <BODY> bevat twee geneste blokken:
<html>
<head>
.
.
</head>
<body>
<div id="drager">
<div id="inhoud">
.
.
Nuttige inhoud
.
.
</div>
</div>
</body>
</html> - Het blok met id="drager" wordt met CSS gecentreerd.
- Alle nuttige inhoud moet binnen het blok met id="inhoud" worden geplaatst. Als daar van
wordt afgeweken verstoort dat de opmaak van de bladzijde.
- De CSS definiëert ten minste:
Attribuut Specifieke waarden body margin:0;
Dit is nodig om de drager hard tegen de bovenrand van het document te kunnen plaatsen.#drager width:...px; height:...px; margin-left:auto; margin-right:auto;
De attributen margin-left:auto en margin-right:auto zorger er voor dat het blok met id="drager" wordt gecentreerd.
De waarde van height moet groter zijn dan de grootste hoogte van de beeldschermen die je bezoekers zouden kunnen gebruiken. Dat is dus een beetje gissen. Hier is 3000px gebruikt.
Maak deze waarde niet té groot, anders wordt de scrollbalk onhandig!
Als height te klein is ontstaat er aan de onderkant van de bladzijde een marge in de achtergrondkleur van de BODY.
De waarde van width kies je zelf. In het voorbeeld is 400px gebruikt. Voor de meeste websites is 960px een goede waarde.#inhoud margin:0; padding:10px;
Door margin nul te nemen zorg je er voor dat inhoud precies in drager past.
De padding zorgt er voor dat de tekst niet klem tegen de rand komt te zitten.
Opmerking:
Het is ook mogelijk om dit te realiseren met een frameset. Zie daarvoor het item
Informatie van de website in het midden van het scherm houden.
Gebruik:
- De HTML-code omvat de hele <BODY>.
- De CSS-code staat in de <HEAD> of in een gelinkt style-sheet.
Downloaden:
Druk op de knop:
File: voorb285.zip, 1250 bytes.
