Oliver Lehmann: Tabelle XHTML 1.0/strict valid zentrieren

Hiho,

hat einer eine Idee wie ich meine <table> zentriert bekome? mit den CSS Atributen alignment bzw. text-align gehts natuerlich nicht (da wird nur der Inhalt zentriert ausgerichtet) align is ja als Attribut nicht mehr erlaubt, und n <p> drum rum darf auch nicht....

Irgendwelche Vorschlaege? *g*

MfG Olli

  1. Hallo Olli,

    Irgendwelche Vorschlaege? *g*

    ja, z.Bsp.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml"><head>
    <title>Tabelle</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <meta http-equiv="content-style-type" content="text/css" />
    <style type="text/css">
    <!--
    TABLE { margin: auto; }
    -->
    </style>
    </head>
    <body>
    <table><tr><td>testtexttesttexttesttexttesttexttesttexttesttext</td></tr></table>
    </body>
    </html>

    allerdings, und da sind wir beim eigentlichen Problem, funktioniert
    es im Opera nicht so ganz, wie es soll.
    Wenn man da das Fenster verkleinert, bleibt die Tabelle weiterhin
    zentriert, der Scrollbalken erscheint und auf der linken Seite wird
    der Inhalt einfach abgeschnitten :(

    Einen Workaround habe ich noch nicht gefunden, vielleicht hilft Dir
    ein Blick in den Thread, der mit <?m=133033&t=25518> beginnt, weiter.

    Wenn Du eine Lösung findest (ohne JS?), wäre ich daran interessiert.

    MfG, Stefan

    1. Grüssi,

      allerdings, und da sind wir beim eigentlichen Problem, funktioniert
      es im Opera nicht so ganz, wie es soll.
      Wenn man da das Fenster verkleinert, bleibt die Tabelle weiterhin
      zentriert, der Scrollbalken erscheint und auf der linken Seite wird
      der Inhalt einfach abgeschnitten :(

      hmmmm, also langsam neigt sich mein Haarausfall einer gefährlichen kritischen Menge zu. Dein Beispiel von oben funktioniert bei mir im Opera 5.11 wunderbar, sogar wenn ich die Seite verkleinere, Scrollbars (wenn vorhanden) sind richtig gesetzt! Dafür zentriert's mir der IE nicht !! Es ist wirklich zum Haareausraufen.

      Einen Workaround habe ich noch nicht gefunden

      Wer weiss, vielleicht liegts ja am neuen Mode-Problem: Falsche Doctype ;-)

      lg bernhard

      1. Hallo Bernhard,

        hmmmm, also langsam neigt sich mein Haarausfall einer gefährlichen kritischen Menge zu. Dein Beispiel von oben funktioniert bei mir im Opera 5.11 wunderbar, sogar wenn ich die Seite verkleinere, Scrollbars (wenn vorhanden) sind richtig gesetzt! Dafür zentriert's mir der IE nicht !! Es ist wirklich zum Haareausraufen.

        ergänze mal
        BODY { text-align: center; }
        dann sollte es auch im MSIE klappen (NC4.x übrigens auch).
        Im Opera habe ich nach wie vor das Problem, dass er mir die Inhalte
        links abschneidet, wenn das Fenster zu klein ist.

        MfG, Stefan
        Opera/5.11 (Windows NT 4.0; U)  [en]

        1. Hi Stefan,

          ergänze mal
          BODY { text-align: center; }
          dann sollte es auch im MSIE klappen (NC4.x übrigens auch).

          hey, das geht :-)

          Im Opera habe ich nach wie vor das Problem, dass er mir die Inhalte
          links abschneidet, wenn das Fenster zu klein ist.

          hmmm, bei mir gehts (mit obigem Beispiel). Dafür bin ich beim herumspielen auf was anderes draufgekommen. Wenn man ein Fenster mit so einer Tabelle drin verkleinert, so dass das Fenster kleiner als die Tabelle wird, dann verschiebt der Opera anscheinend den Linken Rand der Tabelle soweit nach (links) aussen, dass man ihn mit den Scrollbars nicht mehr erreichen kann.

          Mach dein Fenster mal ganz ganz klein:
          http://www.xse.de/
          ... und dann noch etwas kleiner *g*
          http://www.unet.univie.ac.at/~a9827041/table.html

          Es verschwindet der linke Teil der Tabelle und ist scrolltechnisch nicht mehr erreichbar. Im Zuge dessen, oder vielleicht ist es ja der  Grund dafür: Es werden bei meinem Test-Beispiel die "-------------" nicht unterbrochen. Beim IE wird bei einer Grössenänderung des Fensters die gestrichelte Linie unterbrochen, und gleichmässig auf eine zusätzliche Zeile aufgeteilt. Nicht so beim Opera, der tut so als wäre das ganze mit <nowrap> (oder wie das nochmal hiess *g*) eingekerkert. Die Stricherl werden nicht abgeschnitten, sondern aus dem Fenster "rausgeschoben". Genauso wie deine Tabelle :-/

          lg *spooky* bernhard -- der sich langsam fragt ob das überhaupt von Belang ist ;-)

          1. Hallo nochmal,

            Wenn man ein Fenster mit so einer Tabelle drin verkleinert, so dass das Fenster kleiner als die Tabelle wird, dann verschiebt der Opera anscheinend den Linken Rand der Tabelle soweit nach (links) aussen, dass man ihn mit den Scrollbars nicht mehr erreichen kann.

            stimmt, genau dieses Verhalten meinte ich mit abschneiden :)
            Er zentriert die Inhalte wie vorgegeben nur denkt er nicht daran,
            den Scrollbalken auch nach links scrollbar zu machen (wäre ja auch
            eine Idee) oder so zu verfahren wie die anderen Browser.

            Genauso wie deine Tabelle :-/

            nur der Korrektheit halber, ich habe gar keine Tabelle :)

            lg *spooky* bernhard -- der sich langsam fragt ob das überhaupt von Belang ist ;-)

            doch, für mich schon, schließlich wird durch dieses eigenartige Ver-
            halten des Opera meine Absicht untergraben, xse.de für alle Besucher
            nutzbar zu machen ...
            Ich werde jetzt mal Sönke´s Ansatz probieren, wenn es klappt, dann
            bin ich ihm wohl ewig dafür dankbar!

            MfG, Stefan

    2. Hallo Stefan!

      Mir scheint Dir kann doch noch geholfen werden. :-)
      Zunächst einmal bin ich nach langen Tüfteln auf folgendes verfallen.

      <style type="text/css">
        <!--
          table.outer {width:100%; text-align:center;}
          table.inner {margin:auto;}
        -->
        </style>

      <body>
          <table class="outer"><tr><td>
          <table class="inner"><tr><td style="background-color:#CCCCCC">testtexttesttexttesttexttesttexttesttexttesttext</td></tr></table>
          </td></tr></table>
        </body>

      Das funktioniert bei mir ohne das Opera den Inhalt links hinausverschiebt. (Getestet: Opera 5.11 Win98)

      Da Du ja auf Deinen Seiten nur DIV's verwendest habe ich weiterprobiert und siehe da, wenn man beide(!) TABLE's in DIV'S umwandelt geht es auch. Fast! ;-)

      Wie Du an der Hintergrundfarbe erkennen kannst, wenn Du Dir das Beispiel mit DIV'S anschaust, wird diese nämlich einfach munter weiter verkleinert. Ich hoffe Du benutzt keine Hintergrundfarbe?

      Bsp:
       <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
        <html xmlns="http://www.w3.org/1999/xhtml"><head>
        <title>DIV</title>
        <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
        <meta http-equiv="content-style-type" content="text/css" />
        <style type="text/css">
        <!--
          div.outer {width:100%; text-align:center;}
          div.inner {margin:auto;}
        -->
        </style>
        </head>
        <body>
          <div class="outer">
          <div class="inner" style="background-color:#CCCCCC>testtexttesttexttesttexttesttexttesttexttesttext</div>
          </div>
        </body>
        </html>

      Was interessanterweise wiederum nicht funktioniert ist wenn man für 'outer' ein DIV nimmt und für 'inner' eine TABLE. Dann bekommt er immer noch Schluckauf.

      Hoffe das hat geholfen.

      Viele Grüße,
      Sönke

      1. Hallo Sönke,

        <style type="text/css">
          <!--
            table.outer {width:100%; text-align:center;}
            table.inner {margin:auto;}
          -->
          </style>

        danke für den Ansatz, ein Stück weiter komme ich damit schonmal.
        Wenn ich es geringfügig abändere, dann kann ich zumindest erreichen,
        dass der Inhalt nicht mehr verschluckt wird (an der linken Seite),
        allerdings ist der Inhalt dann im Opera und im Mozilla nicht auf
        der Seite zentriert (diese Version ist nicht online, ist leider
        eine Sackgasse).

        Wenn Du noch lustig bist, dann kannst Du ja mal gern versuchen,
        wie man das Verhalten des MSIE und des Mozilla auf der Testseite
        im Opera reproduzieren kann: http://xse.de/test.html

        Das Problem, wie ich festgestellt habe, liegt in dem DIV-Bereich,
        der eine feste Breite von 750 Pixeln hat. Wenn dann noch margin:auto
        dazukommt, dann verschluckt Opera die linke Seite beim Zusammen-
        schieben des Fensters.

        Sehr eigenartige Sache ...

        MfG, Stefan

        PS:Die Lösung sollte unbedingt ohne den Einsatz von JS sein, das
           Stylesheet wird später per @import eingebunden.

        1. Abermals Hallo!

          Das Problem, wie ich festgestellt habe, liegt in dem DIV-Bereich, der eine feste Breite von 750 Pixeln hat. Wenn dann noch margin:auto dazukommt, dann verschluckt Opera die linke Seite beim Zusammenschieben des Fensters.

          Grumel! Wie Naiv von mir anzunehmen das, wenn es mit Prozentangaben funktioniert es dann wohl auch mit Pixelangaben läuft. :-(

          Ne, eine Lösung die Dir gefällt finde ich da beim besten Willen auch nicht mehr. Das wäre jetzt wohl der richtige Zeitpunkt zu sagen: "Vergiss XHTML 1.0 STRICT, mach einfach ein <div align="center"> um Dein 'Hauptdiv' (.notable) und gut is."

          Sehr eigenartige Sache ...

          Setze mal ein <img src="leer.gif" width="10" height="100" align="left"> vor Dein ersten DIV und mach im Opera das Fenster ordentlich Groß. Das sieht noch viel besser aus. ;-)

          PS:Die Lösung sollte unbedingt ohne den Einsatz von JS sein

          Naja, wenigstens _das_ habe ich aber geschafft.

          Gruß,
          Sönke

          1. Hallo nochmal,

            Grumel! Wie Naiv von mir anzunehmen das, wenn es mit Prozentangaben funktioniert es dann wohl auch mit Pixelangaben läuft. :-(

            ich dachte auch, mich tritt ein Pferd, als ich heute abend probiert
            habe, so ein Sch...!

            Ne, eine Lösung die Dir gefällt finde ich da beim besten Willen auch nicht mehr. Das wäre jetzt wohl der richtige Zeitpunkt zu sagen: "Vergiss XHTML 1.0 STRICT, mach einfach ein <div align="center"> um Dein 'Hauptdiv' (.notable) und gut is."

            -XHTML 1.0 Strict
            -klare Trennung der logischen Struktur von Layout
            -keine einzige Tabelle auf der ganzen Seite
            -Verwirklichung meines Wunsch-Layouts
            -keinerlei Workarounds durch den Einsatz von JavaScript
            -Crossbrowserkompatibilität, soweit es nur geht (inkl. Lynx)
            -Nutzbarkeit auch bei Auflösungen von weniger als 750 Pixeln Breite

            Genau in dieser Reihenfolge habe ich für dieses Projekt die versch.
            Prioritäten gesetzt, Du siehst, die Seite wird XHTML 1.0 Strict
            bleiben :)

            Du kannst jetzt mal raten, was ich machen werden ...
            ... nix :)
            Ich bedaure es wirklich, dass so die Opera-User mit kleinen Bild-
            schirmen im Nachteil sind, aber ich sehe wirklich keine Möglichkeit,
            dieses Problem zu lösen, ohne eine höhere Priorität einzuschränken :(

            Setze mal ein <img src="leer.gif" width="10" height="100" align="left"> vor Dein ersten DIV und mach im Opera das Fenster ordentlich Groß. Das sieht noch viel besser aus. ;-)

            ... *grummel*

            Danke für Deine bestimmt nicht kleinen Mühen und Viel Spaß noch
            beim lustigen Webworkeln!

            MfG, Stefan