Seitenzentrierung

padalton · 28.01.2009

AW: Seitenzentrierung

ich habe dieses Problem bereits bei etlichen homepages gelöst siehe
Bäderstudio - E Z O R ...

also man gibt die "Seite" (den Inhalt) einfach in ein DIV !
Dieser DIV dann einfach irgendeine ID zb.: #zentriert
und dann den stylesheet so:

Code:

#zentriert {
   position: absolute;
   top: 50%;
   left: 50%;
   height: 600px; /* Beispielwert */
   width: 1000px; /* Beispielwert */
   margin-top: -300px; /* hälfte von height */
   margin-left: -500px; /* hälfte von width */
}

wenn die seite nach unten fließend ist dann zentriert man einfach nur horizontal:

Code:

#zentriert {
   position: absolute;
   left: 50%;
   width: 1000px; /* Beispielwert */
   margin-left: -500px; /* hälfte von width */
}

Ich hab es bei einigen Projekten verwendet und es Funktioniert !

tombeat · 28.01.2009

AW: Seitenzentrierung

Also ich finde es einfacher wenn man wie auch bei padalton den gesamten Inhalt des Body's in ein div tag packt und eine ID gibt, zB. #zentriert!
Dann einfach so:

Code:

#zentriert {
width: 800px /*Oder eben so breit wie deine Seite halt ist*/
margin-left: auto
margin-right: auto }

Das wars dann auch schon... In der html sieht das dann so aus:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1 /DTD/xhtml1-transitional.dtd">
<html xmls="http://www.w3.org/1999/xhtml">
<head>

</head>
<body>

<div id="zentriert">

[I]Der Inhalt deiner HP[/I]

</div>

</body>
</html>

EDIT:
Nur in der Höhe zentrieren muss man so wie bei padaltons lösung... ansonsten umgehe ich lieber Lösungen mit negativen margin Werten wenn möglich.