Tips&Tricks

til hjemmesiden, computeren og internettet

Tips & Tricks



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.

centrer siden

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">)

centrer siden med tabeller

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.

Kunne du lide tippet? Abonner gratis på mine nyhedsmails og få friske tips hver uge: Tilmelding til Tips og tricks
Lige nu: Få e-bogen "701 Tips og Tricks" gratis (normalpris $11,83) ved tilmelding.


|