Foutloze gecentreerde CSS website
Publicatiedatum: 16-11-2012
Categorie: tips, tricks and tragedies
Auteur: Marinka Noordhout
Een gecentreerde website maken in CSS is niet erg moeilijk, maar bij een kleine resolutie verdween de header uit het beeld zonder dat er een bruikbare scrollbar verscheen om er naar toe te scrollen. Het was even puzzelen maar het resultaat lijkt prima te werken.
Normaal gesproken centreerde ik een site op de volgende manier:
html, body { width: 100%; height: 100%; margin: 0; }
body { text-align: center; }
#wrapper1 { position: relative; top: 50%; margin-top: -300px; }
#wrapper2 { position: relative; width: 960px; height: 600px; margin: 0 auto; background-color: #CCC; outline: 1px dotted red; }
De HTML zag er dan als volgt uit:
<body>
<div id="wrapper1">
<div id="wrapper2">
Hier komt de tekst
</div>
</div>
</body>
Gevolg is een prachtig blok grijs blok met rood stippelrandje in het midden van de site. Probleem is echter dat als je het scherm erg klein maakte je uiteindelijk wel een scrollbar kreeg, maar de tekst niet meer kan bereiken.
Zie hier een voorbeeld 
en maak je browserscherm heel erg klein en probeer te tekst te lezen. Dit is echt een serieus probleem!
Ander nadeel is dat je onmogelijk een achtergrond op dezelfde hoogte kan houden als de achtergrond van het midden blok.
Na wat zoekwerk op internet stuitte ik op een andere methode. Helaas weet ik niet meer waar dus de credits zijn voor de grote onbekende. Deze methode werkt met een lege div die er voor zorgt dat de scrollbar wel op het goede moment verschijnt. De code was als volgt:
html, body { width: 100%; height: 100%; margin: 0; }
body { text-align: center; }
#wrapper1 { position:absolute; height: 100%; width: 100%; }
#wrapper2 { height: 50%; outline: 1px dotted blue; }
#empty { height: 100%; width: 100%; margin-bottom: -300px; min-height: 300px; outline: 1px dotted yellow; }
#main-out { position:relative; clear: both; height: 600px; width: 960px; margin: auto; outline: 1px dotted green; }
#main-in { position:relative; height: 600px; width: 960px; background-color: #d4d4d4; outline: 1px dotted red; }
Met als HTML:
<div id="wrapper1">
<div id="wrapper2">
<div id="empty"></div>
<div id="main-out">
<div id="main-in">
Hier komt de tekst
</div>
</div>
</div>
</div>
Misschien niet erg charmant met een lege div, maar een flinke verbetering voor alle bezoekers met een extreme lage resolutie.
Een horizontale achtergrond over het hele scherm is iets wat mijn designers vaak wensen, maar dat was in deze methode nog een probleem. Door er een extra div bij te plaatsen was dit echter snel opgelost. De roze tekst geeft de toegevoegde code weer:
html, body { width: 100%; height: 100%; margin: 0; }
body { text-align: center; }
#wrapper1 { position:absolute; height: 100%; width: 100%; }
#wrapper2 { height: 50%; outline: 1px dotted blue; }
#empty { height: 100%; width: 100%; margin-bottom: -300px; min-height: 300px; outline: 1px dotted yellow; }
#main-out { position:relative; clear: both; height: 600px; width: 960px; margin: auto; outline: 1px dotted green; }
#main-in { position:relative; height: 600px; width: 960px; background: #d4d4d4 url('http://www.tag-tonic.nl/site-media/line-bg.gif') repeat-x; outline: 1px dotted red; }
#background { background: #d4d4d4 url('http://www.tag-tonic.nl/site-media/line-bg.gif') repeat-x; outline: 1px dotted black; }
<div id="wrapper1">
<div id="wrapper2">
<div id="empty"></div>
<div id="background">
<div id="main-out">
<div id="main-in">
Hier komt de tekst
</div>
</div>
</div>
</div>
</div>
Dus daar heb je de gecentreerde site met perfecte scrollmogelijkheden en een horizontale achtergrond die altijd op de goede plek blijft! Zie hier een voorbeeld
Hopelijk heeft iemand er wat aan.
PS: Waarom die "outline: 1px dotted red"? Dat is mijn beste vriend bij het programmeren. Daarmee kan je precies zien waar blokken staan zonder dat ze andere blokken wegduwen wat wel gebeurd bij border: 1px dotted red, of blokken uit het zich laten verdwijnen als je met background-colors werkt.
PS: Waarom ik altijd alle CSS op 1 regel zet? Dat geeft bij grote projecten ten eerste veel winst bij het laden want het bestand is veel kleiner, en ten tweede zie je veel meer classes in één scherm wat het zoeken veel makkelijker maakt.