Hoe je browsers zover krijgt dat ze luisteren.

Er zullen zich waarschijnlijk al reeds veel webmasters en stylers afgevraagd hebben, hoe je nu juist (en op de correcte manier) een ontwerp met achtergrond gecentreerd krijgt op de pagina zonder dat de tekst ook zelf gecentreerd zich gaat verhouden.
Dit is natuurlijk niet zo eenvoudig zelf te vinden zonder enige kennis van CSS, daarom hier deze korte uitleg over hoe je moet te werk gaan in 3 eenvoudige stappen.

Voorbeeld van een gecentreerd layout

  1. Eerst en vooral moet je je Xhtml voorzien van een allesomvattende div met een id die we container zouden kunnen noemen.
    <html>
    <head
    <title>Wij maken een blog</title>
    </head>
    <body>
    <div id="container">
    ...uw volledige website staat hier...
    </div>
    </body>
    </html>
  2. De tweede stap is natuurlijk de Css zijn bepalingen geven zodat de inhoud ook daadwerkelijk in het midden komt te staan.
    body {
    text-align: center;
    }
    #container {
    margin: 0 auto;
    width: 720px;
    }
    Met de body te de eigenschap text-align: center te geven, zeggen we eigenlijk dat alle tekst die zich in de body bevindt, moet worden gecentreerd (dit is niet echt noodzakelijk, maar wel nodig voor correcte weergave in Internet Explorer). Met de bepaling margin: 0 auto gebeurd eignelijk de centratie van alle onderdelen in HTML, deze zegt 0 pixel boven en onder en automatische marge van links en rechts, dus centreren is het gevolg.
  3. De laatste stap bestaat erin de vorige regel voor Internet Explorer save te zijn text-align: center weer te overtreffen met een andere regel, omdat de tekst anders ook gecentreerd zou staan, en dat is nu juist niet zo geweldig om aan te zien.
    #container {
    margin: 0 auto;
    width: 720px;
    text-align: left;
    }
    Met deze bepaling zal alle tekst, die zich in container bevindt, links worden uitgelijnd, zoals elke normale lezer het wel gewoond is (behalve je bent een Arabier ofzo).