Seitenelemente mittig mit CSS positionieren

    Hallo liebe CSS-Profis,

    ich bin blutige CSS-Anfängerin und versuche mich an einer Seite, die mittig zentriert angezeigt werden soll. Hier zeige ich Euch mal ein Bild, wie ich mir die Seite vorgestellt habe, nur, dass alle Elemente mittig zentriert angezeigt werden sollten und nicht links:

    Sollzustand, nur mittig statt links:

    [Blockierte Grafik: http://grafikstadt.de/test/sollzustand.jpg]

    Die aktuelle Baustelle ist hier zu finden:
    http://grafikstadt.de/test/index.html

    Lösungsansätze:
    Natürlich habe ich viel ausprobiert, um der Lösung näher zu kommen. Beispielsweise habe versucht, alle Elemente statt mit "absolute" mit "fixed" zu positionieren, mit dem Ergebnis, dass sich alles auf der Seite verschiebt, wenn eine zu große oder zu kleine Auflösung gewählt wird.
    Weiterhin habe ich versucht, alle Inhalte in einen Wrapper zu stecken (diese Lösung stammt aus einem Buch, das ich mir gekauft hatte), der mittig zentriert ist.
    Das führte dazu, dass die Buttons ebenfalls mittig ausgerichtet wurden und der Text nicht mehr in den dafür vorgesehenen Flächen liegt.
    Dann wollte ich mit unsichtbaren gif-Bildchen einen festen Abstand zwischen den Elementen erzwingen; sieht leider auch furchtbar aus bei manchen Auflösungen :(

    Insgesamt arbeite ich nun seit 6 Wochen an dem Problem und weiß mir keine Hilfe mehr, außer Eurem Forum. Alle Zwischenergebnisse meiner Bemühungen habe ich noch und kann sie Euch gerne posten, falls das etwas hilft. Der aktuelle Zustand sieht noch am "besten" aus, da zumindest alles korrekt angezeigt wird, leider eben nur nicht zentriert.

    Den Quellcode habe ich stark vereinfacht und ein bisschen kommentiert, damit er leichter zu lesen ist.
    Ich wäre Euch für jeden Tipp sehr dankbar, bin wirklich verzweifelt :?

    Vielen herzlichen Dank und liebe Grüße,
    Lori

    Hallo,

    das geht am einfachsten, wenn du deine Seite in ein <div>-Element setzt, das dann mittig positionert wird.

    html:
    <div id="seite">
    ....
    </div>

    css:
    #seite { position: relative; padding: 0; margin: 10px auto 0 auto;
    }


    Das Hauptmenü würd ich nicht in einzelne <div>s packen, sondern als
    <ul id="hauptnavi">
    <li><a href="...">1.Menüpunkt</a></li>
    ....
    </ul>


    Das Interface-Bild würd ich dieser Liste als Hintergrund unterlegen:
    css:
    padding:...px ...px 0 ...px; background:transparent url(../images/interface.jpg) no-repeat; background-position: ...px ...px;
    Mit Padding (innenpolster und background-position kannst du es dann ganz elegant anpassen.

    LG Matthias Scharwies

    Zitat von resteverwerter

    das geht am einfachsten, wenn du deine Seite in ein <div>-Element setzt, das dann mittig positionert wird.

    Das ist gar nicht nötig.
    Das oberste Element einer Seite ist das Element html. Die Seite befindet sich im Element body.
    Also kann man auch das body-Element zentrieren und die gesamte Seite sitzt mittig.
    Man hat sogar noch noch das html-Element zur Verfügung um den entstehenden Rahmen links und rechts einen anderen Hintergrund zu geben, für visuelle Effekte.

    Hallo Ihr Lieben,

    vielen herzlichen Dank schon einmal für Eure Lösungsansätze! Ich werde mich gleich mal an die Umsetzung machen.
    Wenn ich alles mittig zentriere, sind aber doch meine Buttons auch mittig ausgerichtet, stimmt das?
    Die sollen ja aber in die für die vorgesehenen Felder der Interface-Grafik (nicht mittig).
    Wie kann ich das verhindern?

    Vielen Dank und Gruß,
    Lori

    kein Problem,
    die css-Formatierung

    margin: 0px auto;

    gilt nur für das betroffene Element.

    Alle anderen fangen wieder links oben an, außer du formatierst sie anders.


    LG Matthias Scharwies

    Ich habe es einmal ausprobiert den body selbst zu zentrieren, und dann lieferte die Web-Developer-Toolbar nur noch Schrott beim Lineal, so dass ich wieder ein <div id=seite> eingefügt habe.
    Warum das so ist, weiß ich aber auch nicht. In google hab ich auch nichts dazu gefunden.
    LG Matthias Scharwies

    Jeder der will, kann seinen Body direkt zentrieren. Kein Problem.
    Aber durch die Zentrierung des Body schränkt man sich im puncto Design etwas ein, weil die Seitenbereiche (l/r vom Body) nicht mehr nutzbar sind.