Jürgen: Tabelle mittig ausrichten

Hi zusammen,

habe in einer XHTML Datei eine Tabelle in einem div mittig mit Hilfe von align="center" ausgerichtet. Im Firefox und IE 7 wird diese auch mittig angezeigt, egal, ob ich jetzt eine feste Größe oder eine relative Größe(%) vergeben habe. Bei Opera 9.24 wird nur bei einer relativen Größe die Tabelle mittig angezeigt, ansonsten linksbündig. Beim IE 6 wird es immer links bündig angezeigt.

Das div hat übrigens folgendes Stylesheet:

#content {
    position:absolute;
    top:130px;
    margin-left:auto;
    margin-right:auto;
}

Wie bekomm ich das jetzt am ehesten hin, dass die Tabelle im IE UND im Opera korrekt angezeigt wird.

Vielen Dank für eure Hilfe
Gruss
Jürgen

  1. Hi Jürgen,

    müsstest du mal etwas mehr Code posten (css der Tabelle und html).

    In diesem div (wenn es nur die Tablle enthält) kannst du eigentlich gar nichs zentrieren, weil es keine Breite hat und eigentlich genauso groß sein sollte wie die Tabelle selbst (offensichtlich ist das realiter aber ja nicht der Fall)...

    #content {
        position:absolute;
        top:130px;
        margin-left:auto;
        margin-right:auto;
    }

    Oder willst du in Wirklichkeit das div horizontal in deiner Seite zentrieren?

    Gruß
    Antipitch

    1. Hi Antipitch,

      danke für deine Antwort. Also eigentlich will ich das div zentrieren, das klappt aber nicht über marig-left, right: auto, auch bei einem vorgegeben Wert für die Breite z.B. 60% nicht und in dem div selbst sollte die Tabelle zentriert sein, diese soll nicht die gesamte Breite des div´s einnehmen.

      Auf der Seite http://www.beezenpower-schweich.de/spielberichte/sb010907.shtml
      kann man den Quelltext einsehen.

      Gruss
      Jürgen

      1. Hi Jürgen,

        deine Probleme entstehen durch die Verwendung absolut positionierter Elemente. Die sind alle für sich aus dem Elementfluss genommen, da helfen auch keine margins...

        Deine Seite enthält zwar schon ziemlich viel Content, aber ich glaube trotzdem, dass du noch relativ einfach auf ein eleganteres CSS basiertes Layout umschalten kannst.

        Guck dir mal das dreispaltige Layout mit Kopf- und Fußzeile von selfhtml an. Nimm einfach die css Angaben deiner 4 Hauptbereiche und tausch sie gegen die css Angaben der entsprechnden Bereiche des selfhtml templates (nur wird dein linkes div keine ul sondern bleibt ein div; deine Navigation legst du in den header; footer lässt du weg.).

        Hört sich jetzt vielleicht nach bißchen übertrieben viel Aufwand an, müsste aber fast ausschließlich über CSS Änderungen gehen und wird dir auf lange Sicht vieles erleichtern.

        Gruß
        Antipitch

        1. Hi Antipitch,

          dankeschön, ich glaub ich muss mich doch noch etwas mehr mit css beschäftigen und werde mir später mal die Layouts genauer anschauen.

          Dir einen schönen Abend.

          Bis denne
          Jürgen