Mandags tippet: Centrer din hjemmeside

Please note: This is an old post. The information is probably not accurate and up-to-date anymore.

I dag starter en ny “serie” her på Jayj.dk. Nemlig Mandags tippet. Hver mandag vil der komme et tip af mulige slags.

Dagens tip er til hvordan man får centreret sin hjemmeside. Det er en ganske simpel metode der bruges.

Lad os starte med en simpel side

<!DOCTYPE html>
<html>
<head>
<title>Min hjemmeside</title>
</head>
<body>
<h1>Min overskrift</h1>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</body>
</html>

Hvor vi så har dette i vores css:

body {
	background: #ccc;
}

For at kunne få hjemmesiden centreret, skal vi have “rammet den ind”, som gøres ved at vi opretter en div rundt om indholdet.

Nu ser vores HTML sådan her ud:

<div id="ramme">
<h1>Min overskrift</h1>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. </p>
</div>

Det vi har gjort, er at vi har lavet en div, hvor side indholdet er. Den behøver selvfølgelig ikke at hedde ramme, men hvis du skifter ID navnet, skal du også huske at rette navnet i css’en.

Men siden er ikke centreret endnu. Det gør vi ved at tilføje følgende til vores css style

#ramme {
        width: 800px;
        margin: 0 auto;
}

Den første linje er det vi har kaldt vores ramme div. Width er bredden på siden, det skal du selvfølgelig rette til efter hvor bred din side skal være.
Margin: 0 auto; betyder at den er 0 px fra toppen og bunden og auto px fra venstre og højre.

I stedet kunne vi også bruge denne kode, men den første er mere simpel

#ramme {
	width: 800px;
        margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}

Så skulle din side gerne være centreret. Hvis du har spørgsmål eller kommentarer, er du mere end velkommen til at skrive en kommentar. Du er også velkommen til at skrive idéer til andre tips!

Det var altså mandags tippet for denne gang. Hvis du kunne lide tippet, og vil have flere så husk at Abonner på mit RSS Feed, hvor du også har mulighed for at få tippet leveret via mail

Leave a Reply Cancel reply