Philipp Grashoff: Alternativen zu Tabellen

Hi!

nachdem ich mich nun satte 3 Stunden mit dem IE 6 und einer Tabelle, die er partout nicht anzeigen wollte (sobald der Inhalt laenger war als das Anzeigefenster hoch, machte er mir die Tabelle 16px breiter als das Anzeigefenster, und dieser Effekt was ununterdrueckbar: keine Breitenangaben durch html oder css bei <col>, <td>, <tr> halfen, auch  table-layout:fixed; nichts - Microsoft schafft es halt einfach nicht, auch nur 1 richtig gutes Programm zu schreiben; die anderen Browser haben es selbst bei den abenteuerlichsten Angaben korrekt angezeigt), ergab sich fuer mich folgende Frage:

Gibt es Sinnvolle alternativen zu Tabellen (sollte sowieso nur 2 Spalten haben)? Zum Beispiel Tabulatoren? oder kommt man einfach nicht um diese "dinger" herum?

MFG

Philipp

  1. hi ebenfalls,

    Gibt es Sinnvolle alternativen zu Tabellen (sollte sowieso nur 2 Spalten haben)? Zum Beispiel Tabulatoren? oder kommt man einfach nicht um diese "dinger" herum?

    Tabultor-Vorgaben sind mir als "sinnvolle" Alternativen nicht bekannt. Was sich letzten Endes bei deiner Vorgabe  -  zwei Spalten  -  als Alternative der Wahl anbieten könnte, wären DIV's. Zwei nebeneinander stehende DIV's, jeweils absolut positioniert ... das könnte es bringen.

    Probiers mal aus ;-)

    Christoph S.

    1. Hi!

      Das mit den 2 divs habe ich mir auch schon ueberlegt. Bei absoluter angeabe zu groeße, schriftart, schriftgroeße muesste es gehen, allerdings ziemlich viel Arbeit.. gibts da nicht etwas einfacheres?

      MFG

      Philipp

      P.s.: Bei All diesen Browserbroplähmehn komme sogar ich als Flash-hasser auf die Idee, die Seite in Flash zu gestalten lol ;)

      1. huhu ;-)

        Das mit den 2 divs habe ich mir auch schon ueberlegt. Bei absoluter angeabe zu groeße, schriftart, schriftgroeße muesste es gehen, allerdings ziemlich viel Arbeit.. gibts da nicht etwas einfacheres?

        tstststs, du willst dich vor der Arbeit drücken ?

        P.s.: Bei All diesen Browserbroplähmehn komme sogar ich als Flash-hasser auf die Idee, die Seite in Flash zu gestalten lol ;)

        Ich rede mindestens zwei Stunden lang nicht mehr mit dir, wenn du das machst

      2. Hi, Philipp

        Das mit den 2 divs habe ich mir auch schon ueberlegt. Bei absoluter angeabe zu groeße, schriftart, schriftgroeße muesste es gehen, allerdings ziemlich viel Arbeit.. gibts da nicht etwas einfacheres?

        Ja, Tabellen :-))

        Gibt's vielleicht eine Adresse, unter der man sich das mal ansehen kann? Vielleicht ist ja die Tabelle selbst nicht ganz korrekt? Was sagt denn er http://validator.w3.org/ dazu?

        P.s.: Bei All diesen Browserbroplähmehn komme sogar ich als Flash-hasser auf die Idee, die Seite in Flash zu gestalten lol ;)

        Na dann, viel Spaß bei Aktualisierungen...

        LG Orlando

  2. Hi, Philipp

    Jaja, der IE :-)

    Gibt es Sinnvolle alternativen zu Tabellen (sollte sowieso nur 2 Spalten haben)? Zum Beispiel Tabulatoren? oder kommt man einfach nicht um diese "dinger" herum?

    Was hältst du von absoluter Positionierung von div's? http://selfhtml.teamone.de/navigation/css.htm#positionierung Das meiste davon packt auch der SubStandard-Browser.

    LG Orlando

  3. Danke erstmal fuer die Antworten...

    Ja, ich habe die Page durch den Validator gejagt, und es kam als Fehlerfrei wieder heraus, genau wie die CSS-Datei, die von dem Dokument importiert wird.
    Ich habe aber in der Zwischenzeit etwas interresantes entdeckt: Wenn man eine Index-Datei in dem Verzeichnis, in dem sich die Datei befindet, anlegt, so macht es der IE korrekt! Und er interpretiert nicht alle CSS-Eigenschaften, was sehr komisch ist: so interpretiert er zwar die fuer den Body angegebenen Hintergrundeistellungen, die fuer den Scrollbalken aber nicht.. Ich werde mal versuchen, an dieser Stelle auf Wuermersuche begeben...

    Wer sichs mal selbst anschauen will, der kann mal auf www.spame.de gehen (muss 1024er Aufloesung sein, 800er Version existiert noch nicht), dort dann Rechts auf "rockin' till death" klicken, dann kommt die Tabelle... Eigentlich existiert die Page noch gar nicht, weswegen noch alles unkommplett und nur Beispielhaft ist, aber.... naja ;) wenn ihr grad zuviel Zeit uebrig habt, koennt ihr gerne am Design rumkritisieren ;)

    Anbei fuer die ganz Fehlersuchwuetigen noch der Sourcecode (sagt man das bei HTML?) der HTML-Datei sowie der der CSS-Datei, die Improtiert wird,

    MFG

    Philipp

    -----HTML-DATEI-----

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">

    <html>

    <head>
    <title>spame - wir ham den Fisch</title>
    <link rel="stylesheet" type="text/css" href="../spame.css">
    </head>

    <body>
    <table cellpadding="10" cellspacing="0">
    <colgroup>
    <col width="90">
    <col width="250">
    </colgroup>
    <tr>
    <td colspan="2">Die Gruppe Rockin'till Death (kurz "RTD") besteht aus zehn Mitgliedern. Fünf Tänzer der Crew kommen aus Offenburg, drei aus Friedrichshafen, einer aus Pforzheim und einer aus Mannheim.
    Die meisten von ihnen tanzen seit 1994-95. Aber die Crew "RTD" wurde erst 1997 gegründet.
    </td>
    </tr>

    <tr>
    <td  valign="top">1998:</td>
    <td>Gewinner beim "Battle of the South" <br>(Süddeutsche Breakdancemeisterschaft)<br>
     Den 3.Platz beim National Battle of the Year belegt (Deutsche Meisterschaft)<br>
     Qualifiziert für das Internationale Battle of the Year (Weltmeisterschaft)
     Auftritte für: Radio Regenbogen; Stadt Offenburg; bei vielen HIP-HOP JAMS und
     Konzerten.; Back to Planetrock in Holland (contest)
     Fernsehauftritt bei MTV.
    </td>
    </tr>
    <tr>
    <td valign="top">1999:</td>
    <td>Professionelle Auftritte im Europa-Park Rust in einem Zeitraum von 2
        Monaten; drei Shows täglich.
        Fernsehauftritt bei RTL2. An einem Wettbewerb in Ungarn den 3. Platz
        belegt. Und selber einen Wettbewerb im Europa-Park Rust organisiert.
        Street Shows in: Spanien, Italien, Österreich und vielen Städten Deutschlands.
    </td>
    </tr>
    <tr>
    <td valign="top">2000:</td>
    <td>Erneut süddeutscher Meister. 3.Platz bei der deutschen Meisterschaft. 5.Platz bei der Weltmeisterschaft auf der EXPO in Hannover (10.000 Zuschauer)
             Zwei Monate lang Shows im Europa-Park Rust, 4 Shows Täglich
             In einem Music Video für MTV mitgetanzt. Interview für Backspin,
             Deutschlands grösstes HIP-HOP Magazin, und vielen Regionalzeitschriften.
             Auftritte für: Sparkasse, City Bank und viele mehr</td>
    </tr>
    <tr>
    <td valign="top">2001:</td><td>
    Auftritte fuer Eastpak in ganz Deutschland. Eine grosse HIP-HOP Veranstaltung
    organisiert "JAM ON THE GROOVE" mit Artisten aus vielen
    Europäischenländern. Verschiedene Workshops gegeben.
    In Paris beim B-Boy World Cup teilgenommen.
    </td>
    </tr>
    </table>

    </body>

    </html>

    -----CSS-DATEI-----

    body {

    padding:20px 20px 20px 20px;

    background-image:url(bilder/hg.jpg);
     background-repeat:repeat;
     background-attachment:fixed;

    scrollbar-base-color:#204269;
        scrollbar-3dlight-color:#204269;
        scrollbar-arrow-color:#ffffff;
        scrollbar-darkshadow-color:#204269;
        scrollbar-face-color:#2A5998;
        scrollbar-highlight-color:#204269;
        scrollbar-shadow-color:#204269;
        scrollbar-track-color:#204269;
        }

    div {

    color:#ffffff;
     font-weight:normal;
     font-family:tahoma,sans-serif;
     background-color:#2A5998;
     font-size:12px;
     padding:10px 10px 16px 10px;
     line-height:16px;
     margin:0px 0px 16px 0px;

    }

    h1  {

    background-color:#2E70B9;
     font-weight:bold;
     color:#ffffff;
     font-family:tahoma,sans-serif;
     font-size:12px;
     height:18px;
     text-align:center;
     padding-top:1px;
     margin:0px;
     }

    table{
     color:#ffffff;
     background-color:#2A5998;
     font-weight:normal;
     font-family:tahoma,sans-serif;
     font-size:12px;
     line-height:16px;
     margin:0px;
     table-layout:fixed;
     }

    img {   margin-right:10px;
     margin-bottom:10px;
     border-width:0px;
     }

    a:link { font-weight:bold; color:#ffffff; text-decoration:none; background-color:#2A5998;}
    a:visited { font-weight:bold; color:#6497DB; text-decoration:none;background-color:#2A5998; }
    a:hover { font-weight:bold; color:#ffffff; text-decoration:none;background-color:#2A5998; }
    a:active { font-weight:bold; color:#ffffff; text-decoration:none;background-color:#2A5998; }
    a:focus { font-weight:bold; color:#3F70B0; text-decoration:none;background-color:#2A5998; }

    1. Wer sichs mal selbst anschauen will, der kann mal auf www.spame.de gehen (muss 1024er Aufloesung sein, 800er Version existiert noch nicht), dort dann Rechts auf "rockin' till death" klicken, dann kommt die Tabelle... Eigentlich existiert die Page noch gar nicht, weswegen noch alles unkommplett und nur Beispielhaft ist, aber.... naja ;) wenn ihr grad zuviel Zeit uebrig habt, koennt ihr gerne am Design rumkritisieren ;)

      Will ich wirklich gern machen, aber ich darf hier kein JavaScript nutzen, was die Navigation auf Deinen Seiten absolut unmöglich macht. Vielleicht solltest Du nochmal überlegen, ob da nicht eine bessere Lösung realisierbar ist.

      1. Will ich wirklich gern machen, aber ich darf hier kein JavaScript nutzen, was die Navigation auf Deinen Seiten absolut unmöglich macht. Vielleicht solltest Du nochmal überlegen, ob da nicht eine bessere Lösung realisierbar ist.

        hmm. ich sehs schon, ich werde mich wohl nochmal 2 Wochen in Buecher vertiefen muessen, PHP lernen und die gesamte Seite neu schreiben ;)

        MFG

        Philipp

  4. JUHUUUUUU!!!!!!
    *vorfreudeandiedeckespringinkreishuepfmonitorkuessfestplattestreichel*

    Irgendwie ist mir gerade die mit abstand duemmste Idee gekommen, die ich in den letzten 2 Wochen hatte: Ich habe die Definition meines Quelltextes (doctype usw.. war strict und validisiert) einfach geloescht, weil ich diese Dinger ueberhaupt nicht mag! Und siehe da, mein dummer kleiner Microsoftbrowser scheint gar nicht so dumm zu sein (oder noch viel duemmer, wie mans betrachtet  - Zitat Obi-van Kenobi: "Es kommt immer auf den Standpunkt an" wegen diesem Satz  ist Star Wars was besonderes - , denn er hat das wohl etwas zu strict genommen und hat mir dann wohl was an meiner CSS-Datei verpfuscht, weil die eben nicht ganz validisiert war - die Angaben zum Scrollbar naemlich sind nicht CSS-konform. Nun ja, nachdem ich diese idiotische Idee realisiert hatte, gings ploetzlich..

    Tut mir leid, dass ich euch immer mit meinen Fragen belaestige, irgendwann werd auch ich HTML kapieren ;)

    MFG

    Philipp

    1. Hallo Philipp!

      Irgendwie ist mir gerade die mit abstand duemmste Idee gekommen, die ich in den letzten 2 Wochen hatte: Ich habe die Definition meines Quelltextes (doctype usw.. war strict und validisiert) einfach geloescht

      Sobald eine DOCTYPE-Definition in der Datei vorhanden ist, schaltet der IE 6 (ich gehe davon aus, dass Du von diesem sprichst) in den sogenannten *Standards Compliant Mode*. Und da ist er wirklich "strict" - in wie fern er was falsch oder richtig macht, mag ich hier nicht beurteilen, jedenfalls sollte man peinlich genau auf korrekte Codierung achten, wenn man eine DOCTYPE definiert.

      Ich habe zum Beispiel mit einer meiner Testseite immer noch nicht herausgefunden, warum mir IE 6 den Wert von document.body.clientHeight immer wieder als gleich 0 angibt, obwohl er sehr wohl document.body.clientWidth herausfindet. Lösche ich die DOCTYPE (<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
           "http://www.w3.org/TR/html4/loose.dtd">) oder ersetze sie durch: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> (also ohne die URL zur loose.dtd), ist alles wieder im Lot (wie auch bei IE 5.5, Mozilla und Opera).

      Auch Thomas Meinickes Beispiel 35 funktioniert ganz anders, wenn man die Deklaration: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
           "http://www.w3.org/TR/html4/loose.dtd"> anstelle der vorhandenen einsetzt.

      Wenn mir dazu jemand was sagen könnte, wäre ich sehr froh drüber, denn auf dieser Seite soll ein DIV automatisch zentriert werden (mittels JavaScript über onLoad, ähnlich wie bei Thomas' Beispiel).

      Grüße,
      Patrick

  5. Elegantes Design, muss man schon sagen. Gefällt mir wirklich gut. Und trotz weiß auf verschiedenen Blautönen gut zu lesen.
    Vielleicht solltest Du noch die Rahmen um die angeklickten Links wegmachen... Einige Textteile / Überschriften könntest Du noch genauer positionieren.
    Vielleicht fehlt auch noch ein Hinweis für den ersten Blick, was der Laden macht.Vielleicht kriegst Du das ja noch irgendwie im Design unter. Man könnte sonst denken, es wäre bloß Werbung für die Gruppen, die ihr betreut.

    Ansonsten: Kompliment
    Mathias Bigge

    PS Das in Flash wäre eine HTML-Beleidigung