|
Vele websites centreren hun hele website over het browservenster. Dit kun je bereiken met tabellen, maar wij gaan het in dit artikel anders doen. Tabellen moeten worden gebruikt om data op een overzichtelijke manier weer te geven. Eigenlijk zijn tabellen dus niet bedoeld om de lay-out van een website te verzorgen. Herinner je nog het verschil tussen HTML en CSS? HTML dient om de structuur van je pagina weer te geven en CSS voor de opmaak. Tags gebruiken waarvoor ze dienen noemen we semantiek in de webwereld.
We gaan dan ook werken met CSS om een website te centreren over het hele browservenster. Om de website gecentreerd te krijgen, gaan we gebruik maken van de div-tag. Een div is een tag die dienst doet als "container"; je kunt er tekst in kwijt, maar ook afbeeldingen, tabellen, hyperlinks e.d. Deze div kun je dan plaatsen waar je ook maar wilt, desnoods tot op de pixel nauwkeurig.
Containerdiv maken
Om te beginnen zet je alle inhoud van je website in één grote div.
...
<body>
<div id="main">
hier alle inhoud van de pagina
</div>
</body>
</html> Deze komt slechts één keer voor op eender welke pagina van je website. Gebruik dus id om de opmaak van de div te koppelen i.p.v. class. Je kunt meteen ook al een ander groot voordeel t.o.v. tabellen zien. Bij tabellen krijg je snel een onoverzichtelijke structuur en met div's blijft je HTML-code veel beperkter.
Containerdiv opmaken
We gaan nu onze opmaakcodes maken:
body {
text-align: center;
}
#main {
width: 720px;
margin: 0 auto;
text-align: left;
}Alles wat in de <body>-tag komt gaan we centreren. Dit is niet echt nodig aangezien alle inhoud in een div staat en niet meer gewoon los in de body. De reden waarom we deze regel toch plaatsen is omdat het anders simpelweg niet werkt in Internet Explorer.
De totale breedte van de website / div wordt ingesteld op 720px. Deze waarde kun je natuurlijk veranderen, maar wij houden hier rekening met het percentage van internauten die een scherm gebruiken met een resolutie van 800*600.
Nadien komt de eigenlijke code voor het centreren. We zorgen ervoor dat de marge aan de bovenkant en onderkant 0 pixels bedraagt en aan de rechter- en linkerkant automatisch wordt ingesteld. Omdat de breedte van de hele website 720 pixels in beslag neemt en de marges automatisch gelijkgesteld worden, zorgt deze regel voor de eigenlijke centrering van de hele div.
Tenslotte stellen we de tekstuitlijning in op links, omdat onze tekst (en alle andere HTML-elementen) binnen de div wel nog steeds zoals vanouds links uitgelijnd worden. Als jij de gewoonte hebt om je tekst uit te vullen op je website, dan vervang je left uiteraard door justify.
Opgelet
Als je commentaar wilt opnemen in je CSS-code gebruik dan /* hier commentaar */ en niet // hier commentaar.
Het is me onduidelijk waarom, maar anders werkt het centreren niet meer.
|
Ontwerp je site