Roberto: Div oder Table? Das ist hier die Frage?

Hallo Leute,

habe eine generelle Frage: Ich bin seit je her Fan von Tabellen und notorischer Frame-Hasser. Nun wird allerdings ja (auch bzgl. Barrierefreiheit) angeraten, lieber "div"s zu benutzen. Das ist natürlich ein herber Schlag für mich!

Da ich zum Teil Uni-Seiten machen, d.h. Seiten mit internationalem User-Kreis (auch aus Ländern, wo man nicht davon ausgehen kann, dass sie auf dem neusten Browserstand sind), ist die Frage: Können die alten Browser (leider habe ich gerade keine installiert), d.h. Netscape 4.x oder Navigator Gold [;-)] diese "div"-Seiten überhaupt lesen? Ich meine nur, wenn ich mit CSS nicht nur Schriftbild, sondern auch Layout definiere, dann haben doch die Asbach-Uralt-Browser ernsthafte Probleme, oder?

Also, kurz und knapp: Darf ich weiter mit meinen geliebten tables arbeiten?

Gruss Roberto

  1. Hallo Roberto.

    Nun wird allerdings ja (auch bzgl. Barrierefreiheit) angeraten, lieber "div"s zu benutzen. Das ist natürlich ein herber Schlag für mich!

    Es kommt noch härter: Wer vom Layout mit DIVs spricht, ohne die Wörter "semantisches Markup" in den Mund zu nehmen, hat keine Ahnung.

    Soll heißen: Sinnvolle Auszeichungen, statt der berühmt-berüchtigten Div-Suppe.

    Können die alten Browser (leider habe ich gerade keine installiert), d.h. Netscape 4.x oder Navigator Gold [;-)] diese "div"-Seiten überhaupt lesen?

    Gegenfrage: Warum sollten sie es nicht können?

    Ich meine nur, wenn ich mit CSS nicht nur Schriftbild, sondern auch Layout definiere,

    Wofür es auch gedacht ist...

    dann haben doch die Asbach-Uralt-Browser ernsthafte Probleme, oder?

    Das kommt auf die Menge der komplizierteren Konstrukte an, die verwendet wurden. Grundsätzlich haben die alten Navigatoren kein wirkliches Problem mit Divs.

    Also, kurz und knapp: Darf ich weiter mit meinen geliebten tables arbeiten?

    Wenn sie tabellarische Daten enthalten - immer doch!

    Gruß, Ashura

    --
    Selfcode: sh:( fo:) ch:? rl:( br:^ n4:& ie:{ mo:) va:) de:> zu:) fl:( ss:| ls:[ js:|
    Try it: Become an Opera Lover in 30 days
    1. Hab Dank für das kurze Feedback. Wollte nur wissen, was sich auf diesem Diskussionsfeld so tut, gerade ...

      Gruß Roberto

    2. Hi,

      Soll heißen: Sinnvolle Auszeichungen, statt der berühmt-berüchtigten Div-Suppe.

      wie setze ich denn nun divs sinnvoll ein? Ich höre immer nur div-suppe, tabellen sind nur für tabellarische daten, css ist für´s layout gedacht, blablabla... Halt die ganzen Schlagwörter.
      Wie aber gestalte ich meine Seite richtig? Gibt es gute Beispiele, die mich inspirieren können?

      MfG Hopsel

      --
      "It's amazing I won. I was running against peace, prosperity, and incumbency."
      George W. Bush speaking to Swedish Prime Minister unaware a live television camera was still rolling, June 14, 2001
      1. Hi,

        wie setze ich denn nun divs sinnvoll ein?

        zur Gruppierung anderer, zusammengehörender Elemente.

        Ich höre immer nur div-suppe, tabellen sind nur für tabellarische daten, css ist für´s layout gedacht, blablabla... Halt die ganzen Schlagwörter.

        Schlagwörter ja, blablabla nein. Eher Gebetsmühlen.

        Wie aber gestalte ich meine Seite richtig?

        Faustregel: Wenn Du ein <div> einsetzt, für welches Dir nicht spontan eine knackige, menschenlesbare, leicht verständliche (und _nicht_ nummerierte oder zusammengesetzte) ID einfällt, solltest Du noch mal über das <div> nachdenken.

        Gibt es gute Beispiele, die mich inspirieren können?

        Den CSS Zengarden - der allerdings eine Tendenz zur <div>-Suppe aufweist, um die maximale Flexibilität zu ermöglichen. Betrachte ihn also als absolute Obergrenze, was <div>s und <span>s angeht.

        Cheatah

        --
        X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
        X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
        X-Will-Answer-Email: No
        X-Please-Search-Archive-First: Absolutely Yes
        1. Hi,

          Faustregel: Wenn Du ein <div> einsetzt, für welches Dir nicht spontan eine knackige, menschenlesbare, leicht verständliche (und _nicht_ nummerierte oder zusammengesetzte) ID einfällt, solltest Du noch mal über das <div> nachdenken.

          danke! Aber das ist nicht mein Problem. Beispiel: Ich hab meinetwegen Bilder, die das Layout bestimmen (Rahmen, Logos, etc.).
          Z. B. so:
          --------------------------------------------
          ------                      ----------------
          |Bild|      TextText        |              |
          | 1  |      TextText        |   Bild 2     |
          ------      TextText        |              |
                      TextText        |              |
                                      ----------------
          --------------------------------------------

          Ist es sinnvoll, diese Bilder quasi freischwebend per position: absolute und top-, left-, bottom- oder right-Angaben auf der Seite anzuordnen? Ebenso das Überlappen mehrerer Bilder. Sollte so etwas eingesetzt werden?`

          Ich habe dabei immer das Gefühl eher unsauber zu programmieren, obwohl der Code valid ist.

          MfG Hopsel

          --
          "It's amazing I won. I was running against peace, prosperity, and incumbency."
          George W. Bush speaking to Swedish Prime Minister unaware a live television camera was still rolling, June 14, 2001
          1. Hi,

            Ich hab meinetwegen Bilder, die das Layout bestimmen (Rahmen, Logos, etc.).

            das Logo ist klassischerweise Teil des Headers, also des <div id="header">. Rahmen sind Verzierung, also (derzeit) background-images. CSS/3.0 bietet dafür ganz hervorragende Möglichkeiten, bis dahin muss man sich leider oft "behelfen". Dennoch gilt: Schreibe _erst_ das Markup, _unabhängig_ von der derzeit gewünschten Darstellung, und bemühe Dich nach Kräften, es später beim Schreiben des CSS-Codes um keinen Deut mehr zu verändern.

            Ist es sinnvoll, diese Bilder quasi freischwebend per position: absolute und top-, left-, bottom- oder right-Angaben auf der Seite anzuordnen?

            Eventuell. Von absoluter Positionierung rate ich Dir aber ab, solange Du nicht mit zweifelsfreier Sicherheit von Dir behaupten kannst, sie verstanden zu haben.

            Ebenso das Überlappen mehrerer Bilder.

            Dito.

            Sollte so etwas eingesetzt werden?`

            Ob Bilder (in Form von <img>) eingesetzt werden sollen? Ja, wenn sie Teil des _Inhalts_ sind. Dienen sie der Verzierung, gehören sie nicht in den HTML-Code, sind also auch keine Elemente, die positiniert werden könnten.

            Ich habe dabei immer das Gefühl eher unsauber zu programmieren, obwohl der Code valid ist.

            Oh Schreck: Du programmierst _gar_ nicht. Dein Gefühl spricht aber für Dich, wenn Du bei steigender Menge von nicht statischen Positionierungen ein schlechtes solches bekommst.

            Cheatah

            --
            X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
            X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
            X-Will-Answer-Email: No
            X-Please-Search-Archive-First: Absolutely Yes
            1. Hi,

              Ich hab meinetwegen Bilder, die das Layout bestimmen (Rahmen, Logos, etc.).
              das Logo ist klassischerweise Teil des Headers, also des <div id="header">. Rahmen sind Verzierung, also (derzeit) background-images.

              das ist genau das, was ich derzeit benutze.

              Ist es sinnvoll, diese Bilder quasi freischwebend per position: absolute und top-, left-, bottom- oder right-Angaben auf der Seite anzuordnen?
              Eventuell. Von absoluter Positionierung rate ich Dir aber ab, solange Du nicht mit zweifelsfreier Sicherheit von Dir behaupten kannst, sie verstanden zu haben.

              Da halte ich mich an die Erklärungen von Selfhtml.

              Ich habe dabei immer das Gefühl eher unsauber zu programmieren, obwohl der Code valid ist.
              Oh Schreck: Du programmierst _gar_ nicht.

              Tatsächlich ist HTML keine Programmiersprache. Ich wollte dich aber doch irgendwie provozieren. |scnr|

              Dein Gefühl spricht aber für Dich, wenn Du bei steigender Menge von nicht statischen Positionierungen ein schlechtes solches bekommst.

              Wie erstelle ich dann ein gutes Layout? Ich lege Wert auf extravagante Dinge. Ich habe ein Beispiel vorbereitet. Das Layout gefällt mir, aber der Stil ist nicht gut. Allerdings gibt es keine andere Lösung, oder?

              MfG Hopsel

              --
              "It's amazing I won. I was running against peace, prosperity, and incumbency."
              George W. Bush speaking to Swedish Prime Minister unaware a live television camera was still rolling, June 14, 2001
          2. Hi,

            Ist es sinnvoll, diese Bilder quasi freischwebend per position: absolute und top-, left-, bottom- oder right-Angaben auf der Seite anzuordnen? Ebenso das Überlappen mehrerer Bilder. Sollte so etwas eingesetzt werden?`

            So etwas kann eingesetzt werden, wenn die Auswirkungen übersehen werden. Grundsätzlich gibt es bei absoluter Positionierung zwei Problemquellen: die Schriftgröße und die Fenstergröße. Bei Bildern fällt das erste Problem schonmal weg, sofern dafür gesorgt wird, daß nebenstehender Text nicht in die Quere kommen kann. Teste das Ergebnis mit verschiedenen Schriftgrößen und in verschiedenen Fenstergrößen.
            Oftmals erweist sich allerdings eine Alternative mit float als sinnvoller.

            freundliche Grüße
            Ingo

      2. Hallo,

        Wie aber gestalte ich meine Seite richtig? Gibt es gute Beispiele, die mich inspirieren können?

        http://de.selfhtml.org/css/layouts/index.htm

        http://aktuell.de.selfhtml.org/links/css.htm

        http://www.1ngo.de/web/em.html
        ... auch den rest der Seite ansehen.

        http://www.alistapart.com/

        Das Wichtigste ist aber: Beschäfige Dich intensiv mit http://de.selfhtml.org/html/referenz/elemente.htm, damit Du weißt, für welche Seitenbestandteile es HTML-Elemente gibt. Dann brauchst Du kaum noch DIV und SPAN.

        viele Grüße

        Axel

    3. Hi Ashura,

      Können die alten Browser (leider habe ich gerade keine installiert), d.h. Netscape 4.x oder Navigator Gold [;-)] diese "div"-Seiten überhaupt lesen?
      Gegenfrage: Warum sollten sie es nicht können?

      Das ist eine irreführdende Antowrt.

      Ich meine nur, wenn ich mit CSS nicht nur Schriftbild, sondern auch Layout definiere,
      Wofür es auch gedacht ist...

      Und womit es bei älteren Browsern und bei allen IEs deftigwe Probleme gibt.

      Also, kurz und knapp: Darf ich weiter mit meinen geliebten tables arbeiten?
      Wenn sie tabellarische Daten enthalten - immer doch!

      Sonst verboten? *g*

      Viele Grüße
      Mathias Bigge

      1. Hallo Mathias.

        Gegenfrage: Warum sollten sie es nicht können?
        Das ist eine irreführdende Antowrt.

        Eher eine rhetorische Frage.

        Wofür es auch gedacht ist...
        Und womit es bei älteren Browsern und bei allen IEs deftigwe Probleme gibt.

        Es kommt darauf an, wie kompliziert der Einsatz von CSS ist.
        Mit CSS1 können nahezu alle Browser abgedeckt werden, da sie dies größtenteils unterstützen. (Und jetzt bitte keine Diskussion darüber anfangen -- ich weiß, dass 100% so gut wie unmöglich ist ;) )

        Wenn sie tabellarische Daten enthalten - immer doch!
        Sonst verboten? *g*

        Nicht verboten, aber sinnlos.

        Gruß, Ashura

        --
        Selfcode: sh:( fo:) ch:? rl:( br:^ n4:& ie:{ mo:) va:) de:> zu:) fl:( ss:| ls:[ js:|
        Try it: Become an Opera Lover in 30 days
        1. Hi Ashura,

          Gegenfrage: Warum sollten sie es nicht können?
          Das ist eine irreführdende Antowrt.
          Eher eine rhetorische Frage.

          Da machst Du es DIr etwas zu einfach. Der Ausgangsposter hatte ausdrücklich darauf hingewiesen, dass die Darstellung in älteren Browsern aus konkreten Gründen wichtig ist.

          Wofür es auch gedacht ist...
          Und womit es bei älteren Browsern und bei allen IEs deftigwe Probleme gibt.
          Es kommt darauf an, wie kompliziert der Einsatz von CSS ist.

          Hast Du einen älteren Browser installiert und Dir mal angesehen, wie die meisten CSS-Seiten da aussehen? Es ist alles andere als trivial, ein CSS-Layout browserkompatibel zu coden.

          Mit CSS1 können nahezu alle Browser abgedeckt werden, da sie dies größtenteils unterstützen.

          Kritisch sind die Positionierungsformen, vor allem float, aber auch andere CSS-Elemente. Position fixed geht nur in modernen Browsern. Sogar noch ältere Mozilla-Versionen und natürlich der IE haben Probleme mit einfachen Positionierungen.

          Viele Grüße
          Mathias Bigge

          1. Hallo Mathias.

            Da machst Du es DIr etwas zu einfach. Der Ausgangsposter hatte ausdrücklich darauf hingewiesen, dass die Darstellung in älteren Browsern aus konkreten Gründen wichtig ist.

            Gut, fehlplatzierter Sarkasmus, akzeptiert. ;)

            Hast Du einen älteren Browser installiert und Dir mal angesehen, wie die meisten CSS-Seiten da aussehen?

            Ja, ich habe mir einige Seiten in den Mosaics und im NN 4.7 angeschaut.
            Und zumindest die, die vom Autor absichtlich so ausgelegt wurden, dass ältere Browser kein bis wenig CSS erhalten, waren noch benutzbar.

            Es ist alles andere als trivial, ein CSS-Layout browserkompatibel zu coden.

            Das muss man mir nicht sagen, dessen bin ich mir bewusst.

            Kritisch sind die Positionierungsformen, vor allem float, aber auch andere CSS-Elemente.

            Deswegen sollten diese auch bedarft eingesetzt werden.

            Position fixed geht nur in modernen Browsern.

            Leider...

            Sogar noch ältere Mozilla-Versionen und natürlich der IE haben Probleme mit einfachen Positionierungen.

            Ersteres ist schade, letzteres keines Kommentares wert.

            Gruß, Ashura

            --
            Selfcode: sh:( fo:) ch:? rl:( br:^ n4:& ie:{ mo:) va:) de:> zu:) fl:( ss:| ls:[ js:|
            Try it: Become an Opera Lover in 30 days