Centrer hjemmesiden (2)
Sat på siden 12-06-2008
Der er flere måder at få indholdet af en hjemmeside til at være centreret på skærmen.
Den ene måde kan udføres af begyndere, men bør ikke bruges af mere erfarne webmastre. Den fungerer nemlig ved hjælp af tabeller. I øvrigt vises løsningen ikke korrekt i visse (måske alle?) versioner af Microsoft Internet Explorer.
I al sin enkelthed består tricket i at indsætte en tabel, som er mindre end selve siden, fx 700 px bred. Herefter finder du tabel-egenskaberne, og vælger centrer. I denne tabel sætter du alt indholdet. (Hvis du bruger Kompozer, og ser i html-koden, ser den således ud: <table style="background-color: rgb(204, 204, 255); width: 700px; text-align: left; margin-left: auto; margin-right: auto;" border="0" cellpadding="2" cellspacing="2">)
Og det bringer os videre til den bedre løsning, fordi hvis du kigger i den kildekode, jeg lige har skrevet, så står der "style" i koden. Style betyder, at der er brugt en stylesheet-kode her. Og stylesheets (css) er bedre til at formatere hjemmesider med end tabeller.
I stedet for at bruge tabeller, kan du bruge udelukkende css. I så fald kan du fx give baggrunden en farve i body-koden, og herefter oprette et ID, som dels skal bestemme bredden på indholdet, dels skal centrere det på siden.
I det følgende går jeg ud fra, at du har lidt kendskab til CSS, hvordan man linker til et eksternt css-ark eller har det med på selve siden osv.
Du centrerer indholdet af siden ved at vælge:
margin-left: auto; og margin-right: auto;
I stylesheetet skal du altså mindst have følgende to koder:
body{ background: #a8adc6; }
#bredde{ width: 600px; margin-left: auto; margin-right: auto; }
I selve html-koden kan du flette dem ind således:
<body>
<div id="bredde">
<h1>Overskrift</h1> osv.
Du kan se det brugt bl.a. på min hjemmeside www.foxladi.com - der er under evig udvikling ;-)
Hvis du vil lære mere om stylesheets, kan jeg varmt og ubeskedent anbefale min e-bog: www.tips-og-tricks.com/css
Tak til Christian for at stille mig dette spørgsmål, og for lige at svare direkte: Jeg tror, at problemet med din side er, at du har brugt første metode, og at du ser siden med MSIE. Den er fint centreret i Safari på Mac.