CSS: pagina's centreren
In plaats van de volledige breedte van het scherm te gebruiken, nemen de gecentreerde ontwerpen slechts een gedeelte van het scherm in beslag, wat tot kortere en beter leesbare tekstregels leidt.
Er zijn twee basismethoden om een ontwerp te centreren: (1) het gebruik van automarges en (2) het gebruik van negatieve marges.
(1) Het centreren van een ontwerp met automarges.
Begin de lay-out met een wrapper div om de inhoud op het scherm horizontaal te centreren:
<body>
<div id="wrapper">
</div>
</body>
Kies een breedte voor de wrapper div en stel dan de horizontale marges op auto:
#wrapper {
width: 720px;
margin: 0 auto;
}
De breedte mag ook in percentages of em in plaats van pixels worden opgegeven.
Dit werkt in vrijwel alle moderne browsers. Een aantal versies van Microsoft Internet Explorer begrijpt echter geen automarges. Maar Internet Explorer begrijpt "text-align: center" verkeerd, het centreert alles in plaats van alleen de tekst. Hierdoor kunnen we alles in de body, met inbegrip van de wrapper div centreren, en dan de inhoud van de wrapper weer terug naar de linkerzijde zetten met "text-align: left":
body {
text-align: center;
}
#wrapper {
width: 720px;
margin: 0 auto;
text-align: left;
}
De wrapper is nu gecentreerd in alle browsers.
Er zijn browsers die het scherm in de breedte afkappen zonder scrollbar wanneer het browservenster smaller is dan de wrapper div. Dit kan worden voorkomen door het body-element een minimumbreedte te geven die iets groter is als de wrapper div:
body {
text-align: center;
min-width: 760px;
}
#wrapper {
width: 720px;
margin: 0 auto;
text-align: left;
}
Door "min-width" toe te voegen zal er wanneer het browservenster smaller is als de wrapper div, een scrolbar verschijnen zodat toch de hele pagina bekeken kan worden.
(2) Het centreren van een ontwerp met negatieve marges.
Kies eerst weer een breedte voor de wrapper. Stel dan "position" op "relative" met "left" 50%.
Dit zal de linkerrand van de wrapper in het midden van de pagina plaatsen.
#wrapper {
width: 720px;
position: relative;
left: 50%;
}
Natuurlijk moet niet de linkerrand van de wrapper gecentreerd worden, maar het midden van de wrapper moet gecentreerd worden. Dit kan door de wrapper een negatieve marge te geven ter grootte van de helft van de breedte van de wrapper.
#wrapper {
width: 720px;
position: relative;
left: 50%;
marge-left: -360px;
}
Nu is de wrapper gecentreerd op het scherm.
Drijvende lay-outs.
Bij het gebruik van drijvende lay-outs geven we elementen een gewenste breedte en een float "left" of "right". Op strategische punten in de pagina (zoals na de header en aan het begin van de footer) moeten we dan "clearen" om de daarop volgende elementen weer vanaf een gezamelijke startlijn te kunnen laten drijven.
Drijvende lay-out met twee kolommen.
Om een eenvoudige twee-kolommen lay-out te maken die floats gebruikt, beginnen we met een HTML-kader. In dit voorbeeld bestaat het HTML-kader uit een header gebied, een menu gebied, een inhoud gebied en tenslotte een footer. Het hele ontwerp is ingesloten in een wrapper div, die horizontaal gecentreerd wordt:
<div id="wrapper">
<div id="header">
...
</div>
<div id="menu">
...
</div>
<div id="inhoud">
...
</div>
<div id="footer">
...
</div>
</div>
Omdat niet alle browsers op dezelfde manier met marges en borders omgaan is het beter deze niet voor de lay-out te gebruiken. Zo kan voorkomen worden dat de pagina er in de ene browser er prachtig uitziet en in de andere browser er als mislukt uitziet. Dit komt omdat wanneer een pagina strak ingepakt zit en er vanwege browserverschillen extra ruimte nodig is voor de border of marge van een div, deze div naar onderen zakt in plaats van naast de andere div's te blijven.
Daarom is het beter om een virtuele marge te maken door elementen om de beurt naar links en dan naar rechts te floaten. Door nu de breedte zorgvuldig te kiezen, kan er een kleine ongebruikte goot ontstaan die als marge fungeert en die de elementen wat ademruimte geeft die de verschillen tussen de browsers verbergt.
CSS voor het maken van deze lay-out is eenvoudig. We geven elke kolom de gewenste breedte en dan floaten we de ene kolom naar links en de andere naar rechts:
#menu {
width: 180px;
float: left;
}
#inhoud {
width: 520px;
float: right;
}
En, om ervoor te zorgen dat footer correct onder de twee floats wordt geplaatst, moet footer worden gecleared:
#footer {
clear: both;
}
De basislay-out is nu volledig.
Er zijn nog wat kleine ingrepen nodig om alles te vervolmaken.
Het menu staat nu nog strak langs de randen van de div. Dit is het beste te verbeteren door de inhoud padding te geven, andere oplossingen kunnen het "uit de div springen" veroorzaken in sommige browsers:
#menu li {
padding-left: 20px;
padding-right: 20px;
}
Het inhoudsgebied staat ook strak langs de rand van de div en heeft ook wat ademhalingsruimte nodig. Ook hier geven we padding aan de inhoud om te voorkomen dat alles niet meer in de div past in sommige browsers.
#inhoud h1, #inhoud h2, #inhoud p {
padding-left: 20px;
padding-right: 20px;
}
En dat is eigenlijk alles wat nodig is voor een eenvoudige lay-out met twee kolommen.
Drijvende lay-out met drie kolommen.
De HTML die nodig is voor een drie-kolommen lay-out lijkt erg op de HTML die nodig is voor een twee-kolommen lay-out. Het verschil zit hem in het toevoegen van twee extra div's.
<div id="inhoud">
<div id="inhoud_1">
...
</div>
<div id="inhoud_2">
...
</div>
</div>
Door de div inhoud_1 naar links te floaten en de div inhoud_2 naar rechts te floaten wordt de div inhoud in feite in twee stukken gesplitst waardoor er samen met de menu div drie kolommen ontstaan:
#inhoud_1 {
width: 180px;
float: left;
}
#inhoud_2 {
width: 320px;
float: right;
}
De marges worden ook nu weer aangebracht door de inhouds-elementen padding te geven (dus niet de div's zelf!):
#inhoud_2 h1, #inhoud_2 h2,
#inhoud_2 p {
padding-left: 20px;
padding-right: 20px;
}
En zo hebben we een eenvoudige lay-out met drie kolommen.
Voeg deze pagina toe aan je favorieten.
© 2023 cadekeijzer.com