✔ Gesamte Seite zentrieren geht nicht

[Broco]

Hallo zusammen, ich würde gerne bei dieser Seite (habe sie mal ein bisschen zusammengekürzt) den gesamten Inhalt horizontal zentrieren:
http://bildungszentrum-westfalen.de/php/home.html

Soweit mein Verständnis von CSS reicht, sollte es reichen, wenn man im body "margin:auto;" setzt und den Inhalt in einen weiteren Container packt.
Das klappt aber nicht, denn das Ergebnis sieht so aus:
http://bildungszentrum-westfalen.de/php/home2.html

Wahrscheinlich liegt der Fehler hier irgendwo, aber ich komme nicht drauf:

        /*Standardabstand auf 0 setzen*/
        *{
        margin:0;
        font-family:Verdana, sans-serif;
        }

/* Angaben für das gesamte Dokument */
    body.interface {
    background-color:#cdcdcd;
    padding:10px 0px 10px 10px;
    text-align:center;
    margin:auto;
    }
    
div.zentrieren {
	margin:0;
}

Ohne den *-Bereich sind die Abstände im Menü vermurkst, aber auch wenn ich dort margin:auto angebe, ist es nicht zentriert.

Kann mir jemand einen Tip geben?
Vielen Dank schon einmal.

 

[hela]

... Soweit mein Verständnis von CSS reicht, sollte es reichen, wenn man im body "margin:auto;" setzt und den Inhalt in einen weiteren Container packt...

Hallo,

da hast du einiges falsch verstanden:

• Dein Dokument wird im Standardmodus angezeigt, das ist schon mal eine wichtige Voraussetzung.
  
• Ein Blockelement mit der CSS-Breiteneigenschaft "auto" nimmt die gesamte Breite des Elternelements ein, folglich gibt es da nichts mehr horizontal zu zentrieren. Das zu zentrierende Element braucht also eine diskrete Breite.
  
• Wenn die Breite des Blockelements kleiner als sein Elternelement ist, dann wird es im Elternelement horizontal zentriert, indem die CSS-Eigenschaften "margin-left" und "margin-right" eben dieses Blockelements (und nicht des Elternelements) auf den Wert "auto" gesetzt werden.

 

[Broco]

Oh danke, das hat mir sehr weitergeholfen und ist auch viel logischer als das, was ich vorher gedacht habe.
Habe nie begriffen, warum man den Seitenabstand des Kindelementes vom Elternelement im Elternelement festlegen sollte. Man merke, dass nicht jedes CSS-Forum die Wahrheit sagt

Nur habe ich jetzt ein anderes Problem und zwar genau diese von dir erwähnte festgelegte Breite des zu zentrierenden Elements.
Und zwar ist es so, dass ich eine dynamische Seite erzeugen muss, in der bestimmte Inhalte in einer Liste ausgegeben werden (eine Inventurliste), bei der man verschiedene Anzeigemöglichkeiten (also das Ausblenden bestimmter Spalten) haben soll.
Das bedeutet, dass der Inhalt der Seite eine dynamische Breite hat, den ich aber natürlich der Optik halber auch zentrieren will.
Muss ich dann im Php-Script die Ausgabe der CSS-Eigenschaft für jeden möglichen Fall anpassen oder kann ich dem umschließenden div-Container auch automatisch die Breite seiner enthaltenen Kindelemente übergeben?
Normalerweise ist ja ein DIV nur so breit wie sein Inhalt, aber mit margin:auto wird es glaub ich auf die gesamte Seitenbreite ausgeweitet.

Sorry, falls das eine blöde Frage ist, aber ich bin Anfänger, bemühe mich aber um eine saubere Lösung

 

[hela]

Wenn ich das richtig verstehe, dann möchtest du rechts neben dem "div.navi-main" weitere Inhaltsspalten unterbringen, wobei deren Anzahl und Breite unbestimmt ist.

Dafür gibt es einen Trick, der nicht ganz "sauber" ist, der aber funktioniert:
Wenn man ein Element floatet, dann sollte man ihm auch eine diskrete Breite mitgeben. Wenn man das nicht macht, dann ist die Browserreaktion zwar nach dem Standard unbestimmt, aber auf wunderbare Weise reagieren alle relevanten Browser einheitlich: Sie richten die Breite des Elements nach der Breite des Inhalts ein ("shrink to fit"). Das kann man nun ausnutzen, indem man um die gefloateten Spaltenblöcke noch ein DIV-Element legt, das selbst gefloatet und außerdem relativ positioniert ist. Bedingt durch das Floating hat dieser DIV-Block die Gesamtbreite der gefloateten Spaltenblöcke und muss zur Zentrierung noch entsprechend verschoben werden.

Ein Beispiel dafür findet sich hier: Mehrere Divs zentrieren
Eine anschauliche Erklärung dazu: Horizontally Centered Menus with no CSS hacks

Vielleicht hilft dir das weiter.

 

[Broco]

Sorry, ich habe die Beispielseite gelöscht und habe gerade auch keine Zeit, sie noch einmal neu zu bearbeiten und hochzuladen, deshalb hier ein Screenshot:
http://www.bilder-space.de/show_img_test.php?img=706e5e-1317834875.png&size=view

Ich will eigentlich nur Inhalt beliebiger Breite in den rot markierten Bereich einfügen, also nur den Inhalt, kein weiteres Menü oder so etwas.
Trotzdem soll die gesamte Seite zentriert dargestellt werden.
Falls das nur mit Javascript gehen sollte, werde ich wohl lieber die Style Eigenschaft mit PHP ausgeben lassen, weil ich dann je nach gewünschter Ein- oder Ausblendung die Breite des DIV-Containers ändern können würde (also wenn eine Tabellenspalte von 80px Breite zusätzlich eingeblendet werden soll, dann rechne ich die 80px zu der Breite des DIV-Containers hinzu, wird sie ausgeblendet, ziehe ich sie wieder ab).
Oder wäre das auch unschön?
P.S.: ich würde auch am liebsten valides HTML und CSS benutzen, was bis jetzt der Fall war.