div-Box zentrieren

[Sam Fisher]

Hallo !

Ich habe eine Frage. Ich würde gerne eine DIV-Box mittig auf meiner Website positionieren. (Nu Horizontal) Ich habe das wie folgend gemacht.

PHP-Code:

<center><div id="website">Text, Text, ...</div></center> 


Wenn ich es so mache wird die DIV-Box zwar mittig dargestellt, aber auch der Inhalt der DIV-Box. Deshalb habe ich noch folgenden Text eingefügt.

PHP-Code:

<center><div style="text-align:left" id="website">Text, Text, ...</div></center> 


So wird jetzt alles richtig dargestellt. Leider habe jetzt beim Prüfen immer folgende Meldung.

Zitat:This page is not Valid HTML 4.01 Strict!

Ich glaube es liegt daran, dass dieses align nicht konform ist.

Deshalb würde ich gerne wissen, wie ich das mit CSS machen kann. Irgendwie habe ich da ein Brett vorm Kopf.


Viele Grüße

Sam

PS: Hier ist der Link: http://web261.login-5.hoststar.at/karate...mplate.php

[S.o.T.]

LOL, das ist doch voll easy.

Code:

#div {
   height: auto;
   left: 50%;
   margin-left: -200px;
   position: absolute;
   width: 400px;
}

Also einfach left: 50% und dann margin-left mit der Hälfte der Breite minus.

[Sam Fisher]

S.o.T. schrieb:LOL, das ist doch voll easy.

Code:

#div {
   height: auto;
   left: 50%;
   margin-left: -200px;
   position: absolute;
   width: 400px;
}

Also einfach left: 50% und dann margin-left mit der Hälfte der Breite minus.

Hallo !

Danke, du bist ein Schatz

Tja, ist jetzt im nachhinein betrachtet echt einfach. Und vor allem logisch. Naja, ich werde es mir Rot hinter die Ohren schreiben und garantiert nicht mehr vergessen.

Vielen Dank

Gruß

Sam

[S.o.T.]

Ging mir auch so. Funktioniert auf die gleiche Art und Weise auch mit der Verticale.

[Blacksoul]

Is aber nich grade schön, wenn ich das mal anmerken darf.

Code:

#div{
width:200px;
margin:0px auto;
}

Ich darf mal die Seite anmerken?: http://znay.de/nagaast/index.php

MfG

[S.o.T.]

[quote]
SELFHTML 8.1.1:

Code:

<pre>

#zentriert {
  position:absolute;
  top:50%;
  left:50%;
  width:30em;
  height:20em;
  margin-left:-15em;
  margin-top:-10em;
}
</pre>

<p>Das Element mit der <img src="../src/dok.gif" width="15" height="10" alt="Seite">&nbsp;<a href="../css/formate/zentrale.htm#individualformate">ID</a> "zentriert" wird zunächst so positioniert, dass dessen linke obere Ecke sich genau in der Mitte befindet (<code>top:50%; left:50%;</code>. Anschließend wird es mittels negativer Außenabstände um dessen halbe Breite nach links (<code>margin-left:-15em;</code> und um dessen halbe Höhe nach oben (<code>margin-top:-10em;</code> verschoben.</p>
[quote]

[Blacksoul]

...und trotzdem ist der Code oben besser

[Sam Fisher]

Okay, und welchen soll ich jetzt nehmen?

Von der darstellung her kommt doch beides auf das gleiche raus.

[Blacksoul]

Kann aber später zu Fehlern kommen mit dem "position: absoulte;" ...

MfG

[White]

Der Code von Blacksoul ist in jedemfall besser als der von S.O.T.
Der von SOT ist irgendwie murks...