[HTML/CSS] Content mittig ausrichten?

Hallo :wink:

Ich denke mal das ist eine Standart Frage, jedoch schaffe ich es einfach nicht mein Content mittig zu zentrieren !
Deswegen bitte ich hier einfach mal um hilfe! :slight_smile:

Code(s) meiner Seite

index.php

<?php include('inc/header.php'); ?>

Meine header.php:

[code]

</body>[/code]

Meine main.css:

@charset "utf-8"; /* CSS Document */ body { margin:0 auto; width: 100%; } .content { background:url('../img/head.png') no-repeat ; height:390px; width:100%; } .startda { padding-top:190px; } .logo { padding-left:7%; float:left; }

Meine headnav.css:

[code]@charset „utf-8“;
/* CSS Document */

.navigation {
background: url(‚…/img/navigation.png‘) repeat-x;
width: 100%;
height:51px;
float:left;
text-decoration:none;
color:#FFFFFF;

}
.navigation li {
background: url(‚…/img/menuBg.png‘) no-repeat center bottom;
width: 80px;
height: 15px;
text-align: center;
float:left;
}
.navigation ul {
padding-bottom:20px;
margin-bottom:20px;
}
.navigation ul li {
text-align:center;
list-style:none;
float:left;
font-family:Verdana;
font-size:10px;
color:#999;
text-decoration:none;
padding-left:0px;
}
.navigation ul li a:hover {
color:#FFF;
text-decoration:none;
}
.navigation ul li a {
color:#999;
text-decoration:none;
}[/code]

Soweit so gut, der gesamte Inhalt soll erstmal in die Mitte verschoben werden, damit die Seite auch auf anderen Bildschirm Dimensionen richtig angezeigt wird.
Hier noch einmal ein Screen der HP, wie sie aussehen solle und wie sie momentan aussieht !

http://intensionforum.pytalhost.de/hplol.png

Und so siehts halt mit den obigen Code aus !:

http://intensionforum.pytalhost.de/hplol2.png

Hallo,
du musst dem Body eine absolute Breite, also eine Pixelangabe, zuweisen. Z.B. 900px. Am besten nimmst du aber die Breite der Header-Grafik.

body { margin:0 auto; width: 900px; }

Dann noch absolut positionieren und left: 50%. Dann noch die Hälfte der Breite mit margin von Link subtrahieren:

body { margin:0 auto; width: [B]900px[/B]; left: 50%; margin-left: [B]-450px[/B]; }

Beim letzten Beispiel von momo95 fehlt die CSS-Eigenschaft

position: absolute;

ohne die das nicht funktionieren würde. In dem Fall kannst Du aber auch auf „margin“ verzichten. Also entweder schreibst Du

body {          margin:0 auto;          width: 900px;  }

oder

body { width: 900px; left: 50%; margin-left: -450px; position: absolute; }

Ich würde zu ersterem Raten.

Es geht auch etwas einfacher: Den-Inhalt-einer-HTML-Seite-zentriert-darstellen.
Ich würde es auf jeden Fall wie in dem Beispiel mit einem div machen statt über den body.