Jayj.dk

Menu

Skip to content
  • Blog
  • WordPress
  • Themes
  • Plugins
You are here: Home / Tips & Tricks, Web / Mandags tippet: Centrer din hjemmeside
By Jesper Johansen

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

Posted in Tips & Tricks, Web on March 30, 2009

Related Posts

  • Using Grunt to automate theme releases
  • Sådan bruger du CSS3 Pseudo-Classes
  • Colorbox - Det perfekte lightbox plugin?
  • Hurtig løsning på Z-index bug i IE7

Post navigation

← Previous Post
Next Post →

Popular Posts

  • A free HTML5 and CSS3 theme
  • HTML5 Theme Updated to Version 2.0
  • Create a custom “Download” post type using WordPress
  • Cakifo, a Free WordPress theme
  • Japibas – Free Premium WordPress Theme
  • Multiple Select Lists in the Theme Customizer

Categories

  • WordPress
  • Updates
  • News
  • Web
  • Themes
  • Uncategorized

You can also find me on:

Powered by WordPress and Hybrid Core.

  • Twitter
  • Github
  • WordPress.org
  • LinkedIn