Lena Keller: div's oder tabellen, nr. 2 ;)

hallo forum-leser :))

da ich ja immer schoen brav bin (hoehoehoe ;)
hab ich erstmal im archiv zu dieser frage gesucht
und auch glatt was gefunden (http://forum.de.selfhtml.org/archiv/2000_4/t23161.htm)..

allerdings ist dieses posting schon aus dem vierten
quartal des jahres 2000.. in dieser sache eigentlich eine
relativ lange zeit (hachja wie die zeit vergeht *soifz* ;)

deshalb mal meine frage:

was benutzt ihr lieber? (vorteile/nachteile?)
wie ist das mit der ladezeit?
was ist am ehesten mit allen browsern und
bildschirmaufloesungen gleich anzusehen?

danke schonmal fuer antworten!

liebe gruesse :))

lena

  1. Tach auch,

    allerdings ist dieses posting schon aus dem vierten
    quartal des jahres 2000.. in dieser sache eigentlich eine
    relativ lange zeit (hachja wie die zeit vergeht *soifz* ;)

    So weit haettest Du gar nicht gehen brauchen. Fast ganz unten ist im Moment auch noch eine Diskussion zu dem Thema: </?m=33763&t=6061>

    was benutzt ihr lieber? (vorteile/nachteile?)

    Ich steige so langsam aber sich auf tabellenloses Design um. Warum? Weil ich es fuer zukunftssicherer halte. Ich glaube den Leuten vom [http://www.webstandards.org/] Project. Und lese ziemlich viel bei http://www.alistapart.com/

    Wenn man es erst einmal verstanden hat kann man in meinen Augen viele Sachen einfacher und schneller erstellen.

    Nachteil ist das einige Sachen in veralteten Browsern nicht vernuenftig dargestellt werden.

    wie ist das mit der ladezeit?

    Eher schneller, da Du i.d.R. mit weniger Code auskommst.

    was ist am ehesten mit allen browsern und
    bildschirmaufloesungen gleich anzusehen?

    Definiere _alle_ Browser. Definiere wieviel Aufwand Du fuer irgendwelche Tricks aufwenden willst um irgendwelche Steinzeitbrowser zu unterstuetzen. Frage Dich ob Du Standardkonform schreiben willst oder nicht. Eine einfache Antwort auf diese Frage gibt es in meinen Augen nicht.

    Gruss,
    Armin

    1. huhu armin!

      hui, den thread hab ich glatt uebersehen :(

      Definiere _alle_ Browser. Definiere wieviel Aufwand Du fuer irgendwelche Tricks aufwenden willst um irgendwelche Steinzeitbrowser zu unterstuetzen. Frage Dich ob Du Standardkonform schreiben willst oder nicht. Eine einfache Antwort auf diese Frage gibt es in meinen Augen nicht.

      alle browser == alle browser.. (man sollte in linx auch noch einigermassen was lesen koennen ;)

      achja, und xhtml 1.0 strict sollte es am besten auch noch sein *g*

      gruesse,

      lena

      1. Tach auch,

        hui, den thread hab ich glatt uebersehen :(

        Ts, Ts, Ts... Dann aber schnell hin da!

        alle browser == alle browser.. (man sollte in linx auch noch einigermassen was lesen koennen ;)

        achja, und xhtml 1.0 strict sollte es am besten auch noch sein *g*

        Was fuer mich bedeuten wuerde tabellenloses design. Dann kannst Du Deine Inhalte in der richtigen Reihenfolge anordnen, so dass sie in Lynx Sinn machen. Gleichzeitig kannst Du sie mit CSS dann so positionieren dass Dein Layout passt.

        Kannst Du Dir z.B. hier anschauen (Vorsicht, Eigenwerbung): http://www.grewe.co.uk/playlist.shtml. Die schwarzen Kaesten sind sozusagen die Ueberschriften. In einer Tabelle wuerden sie in den Faellen wo sie rechts stehen im Quelltext _nach_ dem "Inhalt" (den weissen Boxen) stehen. Hier stehen sie aber immer vor dem "Inhalt". Falls Du Mozilla hast stelle mal das Stylesheet aus, dann kannst Du es auch sehr gut sehen.

        Gruss,
        Armin

      2. hi

        alle browser == alle browser.. (man sollte in linx auch noch einigermassen was lesen koennen ;)

        gerade Lynx macht bei einem DIV-Layout weniger Probleme als bei Tabellen.
        Wirklich zu ALLEN Browsern, die es je gab wirst du eh nie kompatibel sein.

        Bei DIVs mehr oder weiniger völlig unproblematisch sind
        Opera ab Version 4
        IE ab Version 5
        Mozilla und all seine Ableger
        konqueror ab Version 2
        und die in Kürze fertigwerdenge Version 2 von GNOME's gtkhtml.

        IE4/Windows und Netscape 4 machen dabei kleinere Probleme, vor allem letzterer stellt sich manchmal schlicht dämlich an...

        Opera 3.5/3.6 und Amaya können keine DIV-Positionierung, machen sonst aber keinen Ärger. IE3/Windows ist sogar für externe CSS-Dateien zu doof und IE4/Mac ist zu allem zu doof.

        Nicht CSS-Fähige Browser sieht man praktisch nicht mehr - außer Netscape 3.

  2. Moin!

    deshalb mal meine frage:

    was benutzt ihr lieber? (vorteile/nachteile?)

    Layer! Gründe dafür stehen auch im unteren Thread </?m=33763&t=6061>, aber ich fasse gern nochmal zusammen:

    Vorteile:
    1.) Flexibles Layout: Während man bei Tabellen rechteckige Boxen nur nebeneinander und untereinander platzieren kann, also immer irgendwelche Spalten- und Zeilentrennlinien vorhanden sind, kann man Layer wirklich individuell durcheinanderwürfeln - und einen Layer jederzeit per CSS auch neu positionieren, ohne daß man alle anderen Layer auch anfassen muß. Sowas kann nämlich wirklich richtig nerven.

    Ich hab bei der Erstellung der Tabellenhölle von http://www.gq-magazin.de mitgewirkt, weiß also, von was ich da spreche. Ein kleiner, dummer Grafikerfehler war z.B., daß er den Pfeil (->} nicht mit 3 Pixeln Rand ausgeschnitten hat. Die Kollegen haben deshalb eine 9x9-Zellen-Tabelle um den Pfeil gestrickt, um mit einem Blind-GIF 3 Pixel Abstand zu erreichen. Wahnsinn! Und logischerweise war es für eine Änderung zu spät, als ich das bemerkte.

    Mit Layern wäre das garkein Problem gewesen. Da wäre das Problem vermutlich nicht mal aufgetreten. :)

    2.) Bessere Möglichkeiten bei Nicht-CSS-Browsern. Du kannst, wenn du Layer positionierst, deren Reihenfolge in der HTML-Datei nach deinen Anforderungen ausrichten, also beispielsweise so, daß man auch eine ordentliche Druckansicht der Seite erhält. Oder eben im Lynx. Durch eine Tabelle waren Seiten in Lynx immer ziemlich ungenießbar, weil man zuerst ellenlange Navigationslisten sah, und ganz unten dann den Inhalt. Zum Navigieren mußte man dann wieder die gesamte Liste hochscrollen...

    Als einziger Nachteil fällt mir nur ein:
    1.) Voraussetzung zum erfolgreichen Betrachten ist entweder ein CSS-fähiger Browser (der CSS dann bitteschön mindestens so versteht, wie Netscape 4 - im Thread unten wird der IE 4.01 Mac erwähnt, aber dieser Browser ist nicht viel besser als IE 3 Windows, oder anders ausgedrückt: Eine PEST!), oder ein garnicht CSS-fähiger Browser. Mitteldinger sind nicht erlaubt. Aber mal ehrlich: Solche Browser sterben gottseidank aus.

    Netscape 4 versteht alles das, was für das Medium "Screen" gedacht ist, und ignoriert alle anderen Medien, außerdem alles, was mit @import eingebunden ist. Damit kann man zuverlässig erweiterte Features von CSS wie Print-Stylesheets nutzen, ohne den Browser zu verwirren (IE 4.01 Mac läßt sich so offenbar verwirren, der lädt alle Stylesheets, die er findet, und benutzt sie für die Bildschirmdarstellung - böse!).

    wie ist das mit der ladezeit?

    Layer dürften schneller geladen sein, denn sie enthalten effektiv weniger Code. Ein Bereich ist mit <div id="eineId">Bereich</div> eben viel schneller definiert, als mit <table border="0" cellpadding="0" cellspacing="0"><tr><td>Bereich</td></tr></table> (wobei das bei Tabellen ja meist nicht ausreicht - es muß ja irgendwie ein Layout hergestellt werden, was meist noch Füllzellen etc. mit Blind-GIFs erfordert, also extrem viel mehr Code).

    Außerdem werden Layer dann angezeigt, wenn sie komplett geladen sind. Tabellenzellen hingegen werden erst angezeigt, wenn die umgebende Tabelle (auch die letzte Zelle) geladen ist. Man erhält also einen kontinuerlicheren Seitenaufbau als bei Tabellen.

    was ist am ehesten mit allen browsern und
    bildschirmaufloesungen gleich anzusehen?

    Da dürfte es vom Layout her keinen Unterschied geben. Ok, Tabellen-Layouts sehen auch im Netscape 3 noch gut aus, dafür sehen sie in Lynx richtig doof aus. Das ist also kein Entscheidungskriterium. Layer-Layouts sehen im Netscape 3 zwar nicht designt aus, aber man kann sie trotzdem benutzen, genauso wie in Lynx.

    Inwieweit du die Layer flexibel gestaltest (auch da sind Prozentangaben möglich), bleibt dir überlassen. Ich möchte aber anmerken, daß es durchaus Sinn macht, eine feste Layerbreite, verbunden mit einer definierten Schriftgröße, vorzugeben, auch wenn dann Freiraum auf dem Bildschirm bleibt. Die ideale Zeilenlänge für Text ist nämlich 70 Zeichen. Längere Textzeilen sind schwierig zu lesen. Wer also 80% des Bildschirms benutzen will, und 12 Pixel große Schrift, der produziert ein Problem. Siehe dazu auch http://www.kommdesign.de/texte/aufmerk6.htm

    - Sven Rautenberg

    1. hallo sven!

      hatte den thread den ich doofkopp ueberlesen hatte gleich
      mal durchgelesen nachdem armin mich darauf hingewiesen hatte.

      trotzdem - nochmal vielen herzlichen dank fuer die
      zusammenfassung und die url (hilfreich, danke :)

      ich denke ich nehm jetzt doch layer.. *gg*

      viele liebe gruesse,

      lena

  3. Hi, Lena

    was benutzt ihr lieber? (vorteile/nachteile?)

    Ich arbeite lieber mit DIVs. Die meisten Gründe wurden bereits genannt, folgende sind mir noch eingefallen:

    1.) Der Quelltext ist nicht nur weniger, er ist viel übersichtlicher und einfacher zu erstellen. Gerade bei umfangreichen Tabellen-Layouts benötigt man ja beinahe eine Navigation für den Quelltext ;-)

    2.) Bei Änderungen, die beim Experimentieren mit einem neuen Layout laufend notwendig sind, sind sie viel einfacher in der Handhabung. Hier kommt _der_ Vorteil von CSS voll zu tragen: Trennung von Inhalt und Aussehen. Du kannst mit einem Handstreich einen Layer auf allen Seiten verändern. Das alleine rechtfertigt den Verzicht auf Tabellen, wenn es um die grundlegende Struktur geht. Stell' dir mal vor, du müsstest 50 oder mehr Seiten, die in Tabellen gezwängt wurden umarbeiten. Da könntest du sie gleich neu schreiben...

    Fazit: Tabellen umackern ist Arbeit, Layer verändern macht Spaß.

    wie ist das mit der ladezeit?

    kleiner == schneller == besser ;-)

    LG Orlando,
    position:fixed

  4. meun!

    ja da bin ich ja ziemlich alleine mit meiner "ich find tabellen toll"-meinung.. :-)

    ich hab bis vor einem guten jahr teilweise mit layern gearbeitet.
    und im netscape 4.7 und im ie (damals hatte ich nur die beiden browser, asche auf mein haupt) gabs da immer kleine probleme... ich weiss nicht mehr ganze genau was,... hintergrundfarbe, größe, etc.

    hat sich da nun was geändert? - kann man layer, also divs auch anders definieren, das das überall klappt?

    also ich kann mir wohl vorstellen, das opera, mozilla und der ie die alle toll aussehen lassen, aber der netscape... ich weiss ja nicht.. irgendwie vertrau ich dem alten eisen net mehr...

    obwohl ich auch immer damit teste... und mit meinen tabellen hab ich selten, wenn überhaupt probleme...

    aber ich lass mich ja gerne von gegenteilen überzeugen :-)
    in diesem sinne. gute nacht. CoN

    1. Moin!

      ja da bin ich ja ziemlich alleine mit meiner "ich find tabellen toll"-meinung.. :-)

      ich hab bis vor einem guten jahr teilweise mit layern gearbeitet.
      und im netscape 4.7 und im ie (damals hatte ich nur die beiden browser, asche auf mein haupt) gabs da immer kleine probleme... ich weiss nicht mehr ganze genau was,... hintergrundfarbe, größe, etc.

      hat sich da nun was geändert? - kann man layer, also divs auch anders definieren, das das überall klappt?

      Alle modernen Browser können Layer ziemlich gut.

      Netscape 4 hat aber natürlich so seine Probleme. Er kann nicht gut mit Rahmen umgehen, vor allem in Verbindung mit Hintergrundfarben.

      Sowas wie diesen "Button" zerreißt Netscape ziemlich:
      <div style="padding: 3px 10px; border:1px solid black; background-color:yellow; color:red; width:100px; text-align:center;">Ein Button</div>

      Da kommt ein unschöner weißer Streifen zwischen Hintergrund und Rahmen. Sollte man also nicht unbedingt machen.

      Aber grundsätzlich macht Netscape mit Layern, was auch alle anderen Browser damit machen: Position und Breite werden eingehalten. Wenn man ganzflächig Hintergrundfarbe benötigt, macht man besser zwei Layer: Einen mit einem Leergif und der Farbe, und eines mit dem Textinhalt.

      Trotzdem: Layer sind sowas von supii-einfach zu handlen, da fallen die Probleme mit Netscape 4 eigentlich garnicht mehr ins Gewicht.

      - Sven Rautenberg

      1. Moin!

        Alle modernen Browser können Layer ziemlich gut.

        stimmt wohl. netscape 4.7 is ja auch schon "etwas" älter...

        Trotzdem: Layer sind sowas von supii-einfach zu handlen, da fallen die Probleme mit Netscape 4 eigentlich garnicht mehr ins Gewicht.

        na dann werd ich das mal probieren. danke für die infos.
        in diesem sinne. CoN