CSS: Homepage in die Mitte setzen

Ich habe bei Homepages bis jetzt nur Menu, header etc, also die HP an sich, an den linken Bildschirmrand geschoben.
Nunja, dies war immer automatisch so…
Wie schaffe ich es, dass die Homepage immer in der Mitte ist, egal bei welchen Bildschirmformaten? Mit Bildschirmformat meine ich 5:4, 16:9, 16:10, aber auch 1440*900px etc…

Das Problem tritt ja eigentlich nur auf, wenn du irgendwie
die Breite von deinen Elementen explizit festgelegt hast.
Entferne also Angaben zur Breite und das Problem tritt nicht
auf.

Bei einem Menü bietet sich z.B. an, dies mit einer Breite von
vielleicht 10-15em links oder rechts im Anzeigebereich zu
positionieren. Für den Rest gibt man nur auf der entsprechenden
Seite einen margin an, der ähnlich groß ist und läßt ansonsten
die Breite offen, dann paßt die sich automatisch an.

Text und inzeiligen Inhalt kann man relativ zur Breite des
umgebenden Blockelementes mittels text-align:center
horizontal zentrieren.

Blockelemente mit definierter Breite - sofern die sinnvoll sind -
kann man zentrieren, indem man margin:auto verwendet.

Hier, findest du einige CSS Vorlagen -> intensivstation.ch/en/templates/

lg,
codebox

Wäre es nicht einfacherer gewesen, wenn Du ein Gesamtkontainer (z.B 1000x1000) erstellen würdest
und alle deine Kontainer da drin platzierst? Dann bräuchtest du nur noch den Gesamtkontainer
mit margin: 0 auto zu platzieren und voilá; der Gesamtkontainer wäre immer in der Mitte. Alle
Kontainer (content, header, etc.) befinden sich ja in diesem und wären somit automatisch mit mittig. :ps:

Das nennt sich dann wrapper :smiley:

[quote=“Kaname”]Ich habe bei Homepages bis jetzt nur Menu, header etc, also die HP an sich, an den linken Bildschirmrand geschoben.
Nunja, dies war immer automatisch so…
Wie schaffe ich es, dass die Homepage immer in der Mitte ist, egal bei welchen Bildschirmformaten? Mit Bildschirmformat meine ich 5:4, 16:9, 16:10, aber auch 1440*900px etc…[/quote]

Am einfachsten ist es so …füge das in deine Css datei ein =)

  • { padding: 0; margin: 0 auto; }
    html { height: 100%; text-align: center; }

Ich habe ein ähnliches Problem:

Ich habe eine

, die ich gerne zentriert setzen würde. sie will aber nicht :ps:
aurachtaler.de/archiv.php
margin-left: auto und margin-right: auto ist gesetzt.

Da könnte man es mit display:block und einer expliziten Angabe
einer Breite versuchen, etwa min-width:40em.
Ein Problem bei width: 40em könnte aufkommen, wenn der Platz
für den Inhalt nicht ausreicht.
table-layout: fixed zusätzlich könnte auch helfen.
Dann ist man allerdings wirklich allein dafür verantwortlich, daß
der Platz für den Inhalt ausreicht, den man mit width festlegt.
Für den Fall, daß was nicht paßt, kann man wiederum mit der
Eigenschaft overflow ein definiertes Verhalten festlegen.

Und wieso das? Ich dachte, das braucht man nur, um zb bei einem block-element ein inline-verhalten zu erzwingen? table an sich ist ja schon ein blockelement (de.selfhtml.org/html/referenz/el … k_elemente)?

Tabellen sind komplizierter als normale Blockelemente.
Die Breite richtet sich da unter anderem nach dem Inhalt und ist
nicht wie bei anderen Blockelementen die volle verfügbare
Breite. Wie die dargestellt werden, ist auch nirgends genau
festgelegt. Jedenfalls hat CSS extra Werte für display, die eine
Simulation von Tabellen ergeben sollen.
Es steht nirgends, daß das nicht in der brower-Stilvorlage so
drinstehen darf ;o)

Was jetzt relativ zu wem positioniert ist und wie groß ist, erkennt
man ganz gut mit dem testweisen Einsatz von outline oder border.

Gebenenfalls bei weiteren Schwierigkeiten eben auf ein kurzes
Testdokument reduzieren, in dem nur so viel Inhalt und CSS
steht, wie notwendig ist, um das Problem hervorzurufen ;o)