anyone: Böse Tabellen mit CSS ersetzen

Hi,

Nachdem inzwischen sogar mein Opa schon davon redet dass Tabellen ja out sind (warum eigentlich?) wollte ich selbige auf meiner Seite durch DIVs und CSS ersetzen.

Da ich jedoch in mein Layout per PHP verschieden lange Inhalte includiere, möchte ich nicht mit festen Positionen und Höhen der Divs arbeiten.

Während bei einer Tabelle die nächste Zeile bei langen Inhalten einfach weiter nach unten wandert, stellt mich dieses bei CSS vor ein unlösbares Problem.

Gehen wir mal von einer vereinfachten Struktur a la

<table><tr><td rowspan=2> Menü bzw Div1</td>

<td>Langer Text ider Div2</td></tr>

<tr><td>Fusszeile mit Copyright + Impressum</td></tr></table>

aus.
Wie kann ich (nach möglichkeit ohne Javascript da dieses bei vielen Besuchern deaktiviert ist) herausfinden, wie hoch (abhängig vom Inhalt. Die Breite von Div1 soll fest sein) div1 ist, um dieses als top Koordinate für Div3 zu verwenden?
Die Höhe von Div1 + Div3 soll dann die Höhe von Div2 sein. Oder kann man Divs auch so stretchen wie Tabellen?

Danke fürs Reinschaun :)

  1. Hi,

    Nachdem inzwischen sogar mein Opa schon davon redet dass Tabellen ja out sind (warum eigentlich?)

    ich habe keine Ahnung, warum Dein Opa derartigen Unsinn erzählt. In HTML gibt es nicht nur kein besseres Mittel, um tabellarische Daten zu strukturieren, sondern sogar kein _anderes_. Natürlich war es nie "in", Tabellen für etwas andere als tabellarische Daten zu missbrauchen.

    wollte ich selbige auf meiner Seite durch DIVs und CSS ersetzen.

    Schade eigentlich, Du ersetzt Matsch durch Schlamm. Warum nimmst Du nicht statt dessen semantisches Markup und CSS?

    Wie kann ich (nach möglichkeit ohne Javascript da dieses bei vielen Besuchern deaktiviert ist) herausfinden, wie hoch (abhängig vom Inhalt. Die Breite von Div1 soll fest sein) div1 ist, um dieses als top Koordinate für Div3 zu verwenden?

    Mit welchen Positionierungsmodellen von CSS hast Du Dich bereits beschäftigt?

    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,

      Warum nimmst Du nicht statt dessen semantisches Markup und CSS?

      Weil heutzutage Layout mehr zählt als Funktion. Das ist nicht nur bei Sportwagen so ;)

      Mit welchen Positionierungsmodellen von CSS hast Du Dich bereits beschäftigt?

      Damit:

      <html><body>
      <div style="positione:fixed; top:100px; left:100px; width:120px; background-color:#999999;">
      <div style="positione:relative; width:40px; height:120px; background-color:#ff0000;">test test test test test test test test</div>
      <div style="positione:absolute; top:0px; left:40px; width:40px; background-color:#00ff00;">test test test test test test test test</div>
      <div style="positione:static; left:0px; width:80px; background-color:#0000ff;">test test test test test test test test</div>

      test test test test test test test test
      </div></body></html>

      Ich versteh aber nicht warum der gelbe Div unter und nicht neben dem roten div ist und warum der graue so am Rand klebt...

      Gute Nacht

      1. Hi,

        Warum nimmst Du nicht statt dessen semantisches Markup und CSS?
        Weil heutzutage Layout mehr zählt als Funktion. Das ist nicht nur bei Sportwagen so ;)

        das führt uns natürlich zu folgender Frage: Warum nimmst Du nicht statt dessen semantisches Markup und CSS?

        Mit welchen Positionierungsmodellen von CSS hast Du Dich bereits beschäftigt?
        Damit:

        Beschäftige Dich zudem mit Floating. Suche und verstehe auch die als "One True Layout" benannten Beispiellösungen.

        Ich versteh aber nicht warum der gelbe Div unter und nicht neben dem roten div ist und warum der graue so am Rand klebt...

        Dein Monitor ist dejustiert, wenn bei den Farben Grau, Rot, Grün und Blau etwas Gelbes dabei ist.

        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
      2. Mahlzeit anyone,

        Warum nimmst Du nicht statt dessen semantisches Markup und CSS?

        Weil heutzutage Layout mehr zählt als Funktion.

        Nein. Heutzutage zählt Semantik mehr als Layout. Und Funktion wiederum mehr als Semantik.

        Falls Dir bestimmte Begriffe nichts sagen, informiere Dich zuerst darüber, bevor Du Thesen aufstellst, die Allgemeingültigkeit beanspruchen, leider aber überhaupt nicht stimmen.

        Mit welchen Positionierungsmodellen von CSS hast Du Dich bereits beschäftigt?

        Damit:

        Invalide <div>-Suppe? Das ist AFAIK kein allgemein anerkanntes Positionierungsmodell ...

        MfG,
        EKKi

        --
        sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|
      3. Hi,

        Warum nimmst Du nicht statt dessen semantisches Markup und CSS?

        Weil heutzutage Layout mehr zählt als Funktion. Das ist nicht nur bei Sportwagen so ;)

        Also nen Sportwagen mit Brotdosen anstelle von Raedern, Stahlfelgen als Sitze und nem Hamsterrad wo der Motor sein sollte, kenne ich nicht. Auch fuer heutige Sportwagen zaehlt: Dicker Motor als Antrieb, ordentliche Raeder und schnelle Reifen auf der Strasse. Der Rest is Makulatur. Den kannste so bunt machen wie Du willst. Die Art der Felgen, Form und Farbe des Chassis... Wie Du willst.

        Cheatah hat dich lediglich gebeten endlich die Stahlfelgen mit Sitzen zu ersetzen.

        --
        "Die Diebesgilde beklagte sich darueber, dass Mumm in aller Oeffentlichkeit behauptet hatte, hinter den meisten Diebstaehlen steckten Diebe."
              - T. Pratchett
  2. Mahlzeit anyone,

    Nachdem inzwischen sogar mein Opa schon davon redet dass Tabellen ja out sind (warum eigentlich?)

    Tabellen sind allerhöchstens zum Layouten "out" - das waren sie aber schon *IMMER*. Zur Darstellung tabellarischer Daten sind sie alles andere als out.

    Aber das schrieb Cheatah ja bereits ...

    wollte ich selbige auf meiner Seite durch DIVs und CSS ersetzen.

    Beschäftige Dich mit der "<http://de.selfhtml.org/css/layouts/einfuehrung.htm@title=Einführung in CSS-basierte Layouts>". Und nimm davon Abstand, alles und jedes Element in mindestens siebzig verschachtelte, nichtssagende und überflüssige <div>s zu packen!

    MfG,
    EKKi

    --
    sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|
    1. moin,

      Beschäftige Dich mit der "<http://de.selfhtml.org/css/layouts/einfuehrung.htm@title=Einführung in CSS-basierte Layouts>".

      Danke für den Link. Denke <div style="float:left; hilft mir weiter. Und meine Struktur muss ich ebenfalls ändern. Ist aber schon cool was man alles mit class:hover an Stelle von Javascript anstellen kann :)

      A propo: Gibts bei CSS auch sowas wie window.setTimeout in Javascript, um Vorgänge langsam geschehen zu lassen?

      Danke :)

      1. @@anyone:

        nuqneH

        A propo: Gibts bei CSS auch sowas wie window.setTimeout in Javascript, um Vorgänge langsam geschehen zu lassen?

        Ja.

        Qapla'

        --
        Volumen einer Pizza mit Radius z und Dicke a: pi z z a
        1. Hi,

          Ja.

          Klingt interessant aber scheint noch nicht wirklich unterstützt zu werden.
          Na wenigstens kann man mit hover auch andere Elemente verändern wenn man schachtelt:

          h1:hover .pics { width:200px; height:200px; }
          h1:hover { background-color:silver; }
          h1 .pics:hover { width:300px; height:300PX; }

          Es gibt viel neues zu entdecken ;)

  3. Tabellen sind in - für tabellarische Inhalte.

    Tabellen sind ot für alle nicht-tabellarischen Inhalte, vorallem als Layoutkrücke.

    Darum, das war schon immer so, dank DIV udn Co. kann man das nun seit Jahren auch brav befolgen.

    Eine (richtige echte) Tabelle durch Divs zu ersetzen wäre aber genauso dumm wie ein Layout aus Tabellen und Frames.