Sven Rautenberg: Warum Tabellen für Layouts manchmal besser als CSS sind

Beitrag lesen

Moin!

Arbeiten wir mal Details heraus. Und Widersprüche deiner Layout-Forderungen.

Zunächst mal die vertikale Ausdehnung.

Deine Forderung für die Spalten:
Spalte 2: "mindestens so groß wie die Navigation"
Spalten 3 und 5: "Sie sind zusätzlich immer gleich hoch"
Spalte 4: "hat eine feste Höhe", aber dann auch "mindestens so hoch wie der Viewport (minus der Höhe des Footers), wird aber größer, wenn die zweite Spalte von links größer als 100% des Viewports wird."
Daraus folgt für Spalte 1 dann eigentlich: Höhe so hoch, wie Inhalt da ist.

Da frage ich mich ja schon, wie du dieses Höhenchaos mit Tabellen hinkriegen willst, selbst wenn man der Einfachheit halber annimmt, die Breite jeder Spalte soll einfach nur 20% sein. Allein schon die Kombination der Höhe der Spalten 3 bis 5 dürfte extrem schwierig hinzukriegen sein.

Abgesehen davon sind Forderungen wie beispielsweise "feste Höhe" (welche) und "wird größer" natürlich widersprüchlich. Ebenso ist nicht definiert, wie sich denn diese Spalte verhält, wenn sie mehr Inhalt darstellen muß, als alle anderen Spalten.

Dann zu der horizontalen Ausdehnung:
Spalte 1: "nur so breit wie der längste Inhalt"
Spalte 2: "den kompletten restlichen horizontalen Platz" (wobei der Rest als letztes übrigbleibt, wenn alle anderen Spalten ihren Platz haben)
Spalte 3 und 5: "sind immer gleich breit (so breit wie die breitere von beiden). Die Breite hängt wieder ausschließlich vom Inhalt ab."
Spalte 4: "eine vom Inhalt abhängige variable Breite"

Mit diesen Definitionen ist es möglich und legitim, der Spalte 2 genau einen Pixel Breite geben zu lassen, sofern alle anderen Spalten einfach nur ungünstigen Inhalt haben. Ein Pixel wäre ein gültiger "Rest".

Ebenso muß Spalte 5 sinnlos breit gemacht werden, nur weil Spalte 3 inhaltsbedingt sehr breit ist. Für ein vernünftiges Layout sicher nicht sinnvoll.

Spalte 4 kann komplett auf 0 zusammenschrumpfen, wenn sie keinen Inhalt hat.

Die breite von Spalte 1 wird 100% erreichen, sofern ihr Inhalt sehr lang ist. Ein einfacher Textabsatz, der mehr als eine Zeile umfasst, reicht da schon aus. Oder was ist unter "der längste Inhalt" zu verstehen?

Summa summarum stellst du hier ein Sammelsurium von Layoutforderungen auf, die du dir selbst vermutlich noch nie optisch und "mechanisch" vorgestellt hast.

Diese abstruse Konstruktion dann zur Argumentation "pro Tabellenlayout" zu verwenden ist daher mehr als haarsträubend.

Und zur Untermalung meiner Argumentation von "Es kommt auf den Sinnzusammenhang an":

  1. Die dritte und fünfte Spalte von links, beinhalten zusätzliche Informationen. Beide Spalten sind immer gleich breit (so breit wie die breitere von beiden). Die Breite hängt wieder ausschließlich vom Inhalt ab. Sie sind zusätzlich immer gleich hoch.

Zusätzliche Informationen wozu?

Weiß ich nicht. Vielleicht verkauft der Webmaster Villen und möchte ähnliche Angebote aufzeigen.

Die Frage ist, ob diese "Zusatzinformationen" sich konkret auf den Inhalt der Spalte 2 beziehen und deshalb auf Höhe des zugeordneten Textabsatzes erscheinen müssen, oder ob es sich um vollkommen unabhängigen Content handelt, der einfach "irgendwo" in der Spalte erscheinen soll.

Für die dynamische Breite gilt ansonsten dasselbe, wie für die Navigation. Abgesehen davon würde mich sehr interessieren, wie du die Forderung nach "gleichbreite dynamische Breite" mit Tabellen realisiert kriegst. :) Ich will nicht behaupten, dass es unmöglich ist - aber ich halte es für den Knackpunkt dieser Idee.

Ich gebe einer Spalte eine Breite von "50%" und der anderen die Breite "*". Das erfordert aber beim Ändern wieder Eingriffe in den Quellcode. Dennoch funktioniert es immerhin.

Hey, News aus der Realität: Eine Breite "*" gibts nicht für Tabellenspalten, und sofern du sie in <colgroup> einsetzen wolltest: Das funktioniert nur im Firefox, und sonst nirgendwo.

Bleibt dir also nur, beide Spalten (3 und 5 - was ist mit 4) wahlweise prozentual oder pixelmäßig in der Breite zu definieren. Dann kriegst du aber keine Veränderung von beiden Spalten, wenn in einer Spalte der Inhalt mal breiter wird. Abgesehen davon war deine Forderung, dass die Spalten nur so breit werden sollen, wie ihr Inhalt.

Ich denke, du hast hier den Zonk gezogen. :)

  1. Innerhalb der Navigation (erste Spalte von links) befinden sich zwei weitere Container. Sie haben eine feste Höhe, aber keine feste Breite (wieder Inhaltsabhängig) und ihr Inhalt (sowohl gefloatete Block-Elemente als auch Inline-Elemente) ist vertikal zentriert.

Was soll das genau sein? Sinn? Inhalt?

Ich habe nur versucht auf die schnelle ein Beispiel zu konstruieren, was die Problematik der verikalen Zentrierung von Blockelementen in CSS aufzeigen sollte.

Mal wieder Realitätscheck: Will man wirklich vertikal zentrieren, wenn die Layoutforderungen so extrem sind. Immerhin soll die Navigationsspalte ja wohl so hoch werden, wie Inhalt in Spalte 2 da ist. Aber welchen Sinn hat es, eine Navigation zu haben, die durch vertikale Zentrierung erst auf der zweiten Bildschirmseite zu sehen ist, weil der Inhalt insgesamt drei Bildschirmseiten lang ist?

Man kann mit CSS auch vertikal zentrieren. Dort, wo es sinnvoll ist. Und man weiß, wie. margin:auto tut es allerdings nicht, da das für width und height unterschiedlich gehandhabt wird (auto für margin-top und -bottom wird immer zu 0, jedoch für margin-left und -right wirkt es zentrierend, sofern die restlichen Breitenangaben dies zulassen).

Die Frage ist aber (siehe meinen Realitätscheck), ob vertikales Zentrieren notwendig ist.

Wenn ja, würde ich tatsächlich eine Tabelle mit einer einzelnen Tabellenzelle verwenden. Meine Praxiserfahrung sagt aber: Sowas wird nie passieren. Allein schon deshalb, weil nie garantiert werden kann, dass eine Webseite eine bestimmte Länge hat und NIE länger werden kann. Oder findest du spontan irgendwo auf einer beliebigen Webseite ein vertikal zentriertes Element - und außerdem noch weiteren sinnvoll angeordneten Content beliebiger Länge?

Ohne jetzt groß einen Gedanken an die Realisation dieses unvollständig beschriebenen Layouts verschwendet zu haben würde ich sagen, dass es mit keinem Mittel realisierbar ist.

Doch, ich denke schon. Nur nicht in vertretbarem Aufwand. :)

Da es extrem unterspezifiziert ist (vgl. meine Anmerkung zu Höhen ganz oben), dürfte es ein Leichtes sein, alle deine Forderungen zu erfüllen (egal ob mit Tabellen oder ohne) - aber es wird kein sinnvolles oder sinnvoll nutzbares Layout dabei herauskommen.

Und insbesondere die Forderung, ein Layout für beliebig unbändigen Content zu erstellen sorgt für die Probleme - sowohl mit Tabellen, als auch mit CSS. Diese Probleme sind im Prinzip nur dadurch zu umgehen, dass man diese kritischen Inhalte passender formuliert.

Das ist für mich aber keine Lösung. Man sollte schreiben wie man denkt. Wenn man dabei ständig an das Layout usw. denken muss... naja.

Niemand, der sich um das optische Erscheinungsbild seines Schriftwerkes Gedanken macht, schreibt so, wie er denkt.

Auch - oder vielleicht sogar besonders - die Autoren von Druckwerken wie Büchern, Zeitschriften und Zeitungen schreiben zuerst so, wie sie denken, und überarbeiten ihren Text dann mehrfach so, dass er ins Layout paßt. Sowohl in der Länge (wenn der Artikel in drei Spalten passen muß, ist es weder akzeptabel, dass der Artikel zu kurz, noch dass er zu lang ist - er wird solange umgeschrieben, bis er paßt), als auch in der Formulierung (automatische oder manuelle Silbentrennung im Satzprogramm bei extrem langen Worten - wenn insgesamt kein gutes Schriftbild herauskommt, weil der Zeilenumbruch unschön ist, werden auch Satzteile, Sätze oder ganze Absätze umgestellt oder neu formuliert, bis es paßt).

Druckwerke haben zum Glück den Vorteil, dass sie unabhängig vom Anzeigeprogramm überall identisch aussehen. Insofern ist die Darstellung im Browser einerseits ein Fluch (es gibt keinerlei Verläßlichkeit in der Darstellung und keine wirkliche Eingriffsmöglichkeit für Optimierungen), andererseits aber auch ein Segen (es gibt keine künstlichen Längenbeschränkungen oder Formulierungszwänge, solange man ein gewisses Maß an Normalität nicht überschreitet).

- Sven Rautenberg

--
"Love your nation - respect the others."
0 167

Warum Tabellen für Layouts manchmal besser als CSS sind

Die_Antwort
  • design/layout
  1. 0
    Kai345
    1. 0
      Die_Antwort
      1. 0
        Stefan Einspender
      2. 0
        Kai345
        1. 0
          Die_Antwort
          1. 0
            ChrisB
  2. 0
    Stefan Einspender
    1. 0
      Stefan Einspender
    2. 0
      Engin
    3. 0
      Die_Antwort
      1. 0
        molily
        1. 0
          Die_Antwort
          1. 0
            molily
            1. 0
              Die_Antwort
              1. 0
                molily
          2. 0
            Gunther
      2. 0
        Stefan Einspender
        1. 0
          Die_Antwort
          1. 0
            Gunther
            1. 0
              Klawischnigg
              1. 0
                Daniel unreg
                1. 0
                  Klawischnigg
                  1. 0
                    Kai345
                    1. 0
                      Klawischnigg
                      1. 0
                        Daniel unreg
                  2. 0
                    Stefan Einspender
                    1. 0
                      ChrisB
                      1. 0
                        molily
                        1. 0
                          ChrisB
                          1. 0
                            Gunther
                            1. 0
                              ChrisB
                          2. 0
                            molily
                    2. 0
                      Klawischnigg
                      1. 0
                        Timo "God's Boss" Reitz
                        1. 0
                          Klawischnigg
                          1. 0
                            Timo "God's Boss" Reitz
              2. 0
                Timo "God's Boss" Reitz
            2. 0
              ChrisB
      3. 0
        Sven Rautenberg
        1. 0
          Die_Antwort
          1. 3
            Sven Rautenberg
            1. 0
              Daniel unreg
            2. 0
              Die_Antwort
              1. 0
                ChrisB
                1. 0
                  Die_Antwort
                  1. 0
                    ChrisB
                  2. 0
                    molily
              2. 0
                Sven Rautenberg
  3. 0
    Heinz
    1. 0
      Daniel unreg
    2. 0
      ChrisB
      1. 0
        Daniel unreg
  4. 0

    Warum Tabellen für Layouts einfach nicht geeignet sind

    Daniel unreg
    1. 0
      Die_Antwort
      1. 0
        Daniel unreg
        1. 0
          Die_Antwort
          1. 0
            Daniel unreg
            1. 0
              Die_Antwort
              1. 0
                Daniel unreg
                1. 0
                  Die_Antwort
                  1. 0
                    Detlef G.
                  2. 0
                    Daniel unreg
                  3. 0
                    ChrisB
                    1. 0
                      Die_Antwort
                      1. 0
                        ChrisB
                        1. 0
                          Die_Antwort
                          1. 0
                            ChrisB
                            1. 0
                              Die_Antwort
                              1. 0
                                ChrisB
                                1. 0
                                  Die_Antwort
                                  1. 0
                                    ChrisB
                      2. 1
                        Detlef G.
                        1. 0
                          Die_Antwort
                          1. 0
                            ChrisB
                            1. 0
                              Die_Antwort
                          2. 0
                            Detlef G.
                            1. 0
                              Die_Antwort
                              1. 0
                                Struppi
              2. 0
                ChrisB
                1. 0
                  Die_Antwort
                  1. 0
                    ChrisB
                    1. 0
                      Die_Antwort
                      1. 0
                        ChrisB
                        1. 0
                          Die_Antwort
                          1. 0
                            Sven Rautenberg
                            1. 0
                              Die_Antwort
                          2. 0
                            Daniel unreg
      2. 0
        ChrisB
  5. 1
    stareagle
    1. 0
      Daniel unreg
  6. 2
    Struppi
  7. 0
    Gunther
    1. 0
      ChrisB
  8. 3

    Warum Tabellen für Layouts häufig besser als <div> sind

    Gonzo
    1. 0
      molily
      1. 0
        Gunther
      2. 0
        Gonzo
        1. 0
          Sven Rautenberg
          1. 0
            Gonzo
            1. 1
              molily
            2. 0
              molily
        2. 4
          molily
    2. 0
      Die_Antwort
      1. 0
        Gonzo
        1. 0
          Daniel unreg
        2. 0
          Die_Antwort
          1. 0
            Detlef G.
          2. 0
            ChrisB
            1. 0
              Die_Antwort
              1. 0
                ChrisB
                1. 0
                  Die_Antwort
                  1. 0
                    ChrisB
                    1. 0
                      Die_Antwort
                      1. 0
                        ChrisB
                        1. 0
                          Die_Antwort
                          1. 0
                            ChrisB
                            1. 0
                              Die_Antwort
                              1. 0
                                ChrisB
                                1. 0
                                  Die_Antwort
              2. 1
                Sven Rautenberg
                1. 0
                  Die_Antwort
      2. 0
        ChrisB
    3. 0
      Klawischnigg
      1. 0
        Gonzo
        1. 0
          Klawischnigg
  9. 0
    molily
    1. 0
      Die_Antwort
  10. -1
    Klawischnigg
    1. 0
      molily
      1. 0
        Klawischnigg
        1. 0
          molily
          1. 0
            Klawischnigg
            1. 0
              molily
              1. 0
                Klawischnigg
            2. 0
              Struppi
              1. 0
                Klawischnigg
  11. 0

    Was HTML nicht ist

    Robert Bienert
    1. 0
      Die_Antwort
      1. 0
        Stefan Einspender
        1. 0
          Die_Antwort
          1. 0
            Struppi
      2. 0
        Detlef G.
      3. 0
        Robert Bienert
  12. 0

    Überlauf verhindern und stattdessen das Element vergrößern (2)

    Christian Seiler
    • css
    1. 0
      Gunther
  13. 0

    MAL EIN BEISPIEL

    Johann
    1. 0
      Die_Antwort
      1. 0
        ChrisB
        1. 0
          Die_Antwort
          1. 0
            ChrisB
            1. 0
              Die_Antwort
              1. 0
                ChrisB
              2. 0
                Stefan Einspender
          2. 0
            Sven Rautenberg
            1. 0
              Die_Antwort
              1. 0
                ChrisB
              2. 0
                Sven Rautenberg
    2. 0

      MAL KEIN BEISPIEL

      Detlef G.
      1. 0

        Beispiele verlinken nicht erlaubt?

        Johann
        1. 0
          Steel
  14. 2

    Don't feed ...

    Gunther
    • meinung
    1. 0
      Die_Antwort
      1. 0
        ChrisB
        1. 0
          Die_Antwort
    2. 0
      Heinz
  15. 3
    Jeena Paradies