Div's centreren
door Bert ter Voert Iets wat mijzelf en, gezien de regelmatig terugkerende vraag op de forums, velen met mij steeds weer bezighoud, is de vraag hoe toch een pagina zo uit te lijnen dat deze mooi in het midden van het scherm komt te staan. Ook bij veranderende resolutie. Ik geloof dat ik nu een zeer bevredigende oplossing heb, die zowel onder IE als onder Firefox goed werkt.
Ik ben tot deze oplossing gekomen door het doorspitten van de vele suggesties die hier (en elders) op de forums werden gedaan om dit probleem op te lossen. Ik wil dan ook niet spreken van mijn oplossing, maar van een oplossing die voor mij doet wat ik beoog: de inhoud mooi centreren op het beeldscherm.
Maar genoeg gepraat, laten we ons maar eens richten op die oplossing. We gebruiken CSS om de div in het midden te krijgen (en te houden!). Vaak wordt er gesproken van een soort container-div, die gecentreerd wordt en die de rest van de inhoud zal bevatten. Dit heeft echter als nadeel dat je alle andere div’s zult moeten nesten, en dat kan een heel werk zijn om die dan goed uitgelijnd te krijgen. Op de manier die ik zal bespreken is het nesten niet nodig, wat in mijn ogen een groot voordeel is.
Om te beginnen maken we een div die de hoogte en breedte heeft van de weer te geven inhoud (bijvoorbeeld width: 956px; height: 600px;) en kennen deze position: absloute toe. Deze hoeft uiteindelijk niet eens op de pagina te komen, maar kan gemakkelijk zijn tijdens de ontwerpfase (zeker als je ook nog een contrasterende rand opgeeft).
Vervolgens bepalen we het middelpunt van het scherm en maken dat tot linkerbovenhoek van onze div, door het volgende op te nemen in css: top: 50%; left: 50%;.
Tot nu toe hebben we dus de volgende css-code:
#werklaag {
position: absolute;
width: 956px;
height: 600px;
top: 50%;
left: 50%;
}
Maar daarmee staat de div nog niet gecentreerd, zelfs verre van dat! Wat er nu nog moet gebeuren is de marge voor de linker- en bovenzijde bepalen en toevoegen. We hebben de linkerbovenhoek in het midden staan. Om de div als geheel in het midden te krijgen, doen we het volgende. De div moet de helft van zijn breedte naar links opschuiven en de helft van zijn hoogte omhoogschuiven. In ons voorbeeld dus de helft van 956 is 478px naar links en de helft van 600 is 300px naar boven.
Daarvoor gebruiken we in css margin-top en margin-left. Als we nu bovenstaande waardes gewoon zouden invullen (margin-top: 300px; margin-left: 478px;) en het resultaat bekijken, zouden we zien dat de div nog verder van het midden verwijderd is. Om het geheel de goede kant op te krijgen moeten we de negatieve waardes gebruiken.
De volledige css-code voor de juist gecentreerde div wordt dan dus als volgt:
#werklaag {
position: absolute;
width: 956px;
height: 600px;
top: 50%;
left: 50%;
margin-top: -300px;
margin-left: -478px;
}
Nu hebben we ook de coördinaten voor de linkerbovenhoek van onze inhoud: -300px(top) bij -478px(left). We kunnen dus ook de coördinaten voor de rest van de inhoud gaan bepalen.
Stel dat we een div (50px/400px) willen plaatsen die als linkerbovenhoek 100px lager en 210px naar echts moet komen ten opzichte van de linkerbovenhoek van de inhoud. Wat zijn door dan de coördinaten van? 100 px lager wil zeggen dat de marge groter moet worden. We moeten de twee waardes dus optellen: -300 + 100 = -200px. Hetzelfde geldt voor het naar rechts verschuiven: -478 + 210 = -268px. Dit kan enigszins verwarrend lijken omdat we met negatieve getallen werken, maar een div met marge -268 staat wel degelijk verder naar rechts dan een div met marge -478.
De css-code voor deze div zou dan als volgt worden:
#laagx {
position: absolute;
width: 400px;
height: 50px;
top: 50%;
left: 50%;
margin-top: -200px;
margin-left: -268px;
}
Door nu de combinatie van top en left op 50% en margin-top en margin-left te gebruiken, is het niet nodig om div’s te nesten om de gehele inhoud gecentreerd te krijgen en te houden. Mocht het toch nodig zijn om een div te nesten, dan krijgt deze geneste div natuurlijk position: relative; komen de coördinaten in top en left te staan en vervallen margin-top en margin-left.
Een voorbeeld:
In de body van de html-code staat het volgende:
<div id="werklaag"></div>
<div id="laagx">
<div id="genest"></div>
</div>
De css-code voor "werklaag" en voor "laagx" zijn zoals hierboven beschreven. De css-code voor "genest" wordt dan bijvoorbeeld als volgt:
#genest {
position: relative;
width: 200px;
height: 40px;
top: 5px;
left: 20px;
}
Ik heb gemerkt dat, als je eenmaal een beetje gewend bent aan het werken met de negatieve getallen, ik in staat ben snel en met een grote vrijheid (zeker in combinatie met het gebruik van de z-index voor div’s) de layout voor voor een site te maken die mooi gecentreerd op het scherm staat en blijft staan, ook bij veranderende resolutie!
Nu werd ik echter op een punt attent gemaakt, dat een zwakke plek in deze aanpak naar voren bracht. Juist omdat de layout zo mooi gecentreerd blijft, zal bij het verkleinen van de resolutie een steeds groter deel van je inhoud onbereikbaar worden! De schuifbalk die onderaan het scherm zal verschijnen, geeft je wel toegang tot het rechterdeel van de inhoud, maar niet tot het uiterste linkerdeel. En, geef toe, dat is uitermate vervelend als daar nu juist de navigatie voor je site te vinden is.
De navigatie naar de rechterkant verplaatsen is wel erg kort door de bocht en doet verder ook niet echt iets aan het probleem. Dus dan maar weer terug naar de tekentafel en het geheel nog eens goed overdenken.
Over horizontaal uitlijnen is volop informatie te vinden op het net, maar als je gaat zoeken naar verticaal uitlijnen, dan is die informatie toch een stuk schaarser. Hier volgt nu wat ik zelf de meest elegante oplossing vind van alle suggesties die ik tijdens mijn zoektocht tegengekomen ben.
De aanbevolen manier om de horizontale centrering tot stand te brengen is de linker- en rechtermarge op auto te zetten. Dus als we dan weer even uitgaan van de werklaag (zie eerder in dit artikel), dan hebben we nu:
#werklaag {
margin-left: auto;
margin-right: auto;
}
Dit werkt prima in de meeste browsers die CSS2 ondersteunen, maar natuurlijk is er een uitzondering. IE5 voor WIN (het zal eens niet zo zijn…) kan hier niet mee overweg. Nu heb ik allerlei manieren gezien om dit aan te pakken, maar het blijkt vrij simpel op te lossen. Daarvoor maken we gebruik van een andere ‘rariteit’ van IE5, namelijk de manier waarop IE5 het "text-align" attribuut toepast op blokelementen. Door nu de CSS-code text-align: center; toe te kennen aan het element dat #werklaag bevat (aan de body dus) wordt de div ook in IE5 horizontaal gecentreerd. Dat geeft in CSS-code dus het volgende:
body {
text-align: center;
}
#werklaag {
margin-left: auto;
margin-right: auto;
}
BELANGRIJK: omdat het attribuut "text-align" overgeërfd wordt, zul je dit attribuut expliciet moeten declareren in de div’s als je niet wilt dat alle inhoud gecentreerd wordt.
Dit is de horizontale centrering. Dan nu over naar de verticale. Zoals ik al zei, daar is heel wat minder informatie over te vinden. Dus ben ik zelf maar wat aan het experimenteren gegaan. Gewoon de methode van top in procenten en dan een negatieve waarde voor margin-top blijkt niet te werken in combinatie met de nieuwe methode voor het horizontaal uitlijnen.
De oplossing die ik nu zal beschrijven is niet de meest perfecte, maar ik heb geprobeerd om het puur bij CSS te houden en geen combinatie met javascript te maken. Om de div verticaal uit te lijnen, geef ik een percentage in bij margin-top. De juiste waarde hiervan zal afhangen van de hoogte van #werklaag ten opzichte van de schermhoogte die je verwacht. Minpuntje van deze manier is, dat bij verkleinen van de schermhoogte de topmarge niet mee verandert. Pluspunt is dat wel de hele site bereikbaar blijft met de schuifbalken.
Dan tot slot de CSS-code in zijn geheel:
body {
border: 0;
padding: 0;
text-align: center;
height: 96%;
}
#werklaag {
width: 955px;
height: 600px;
margin-left: auto;
margin-right: auto;
margin-top: 9%;
}
Hierbij is height: 96% om te voorkomen dat IE al meteen een schuifbalk laat zien. Overflow instellen op hidden is geen optie, omdat dan bij verkleining van het venster geen schuifbalk te zien zal zijn en een deel van de site dus onbereikbaar wordt. Verder heb ik de margins apart gedefinieerd, omdat sommige browsers blijkbaar moeite hebben met de notatie margin: 9% auto;
Ik hoop dat hiermee anderen ook vooruit kunnen en dat centreren van inhoud niet langer een bron van irritatie of frustratie hoeft te zijn.
Veel succes.
Bert
|
