Chräcker Heller: Tabellen-Div-Suppe-gefloate

Hallo,

jetzt auch von mir mal eine der "ich will haben"-geliebten Frage.

Also: die Seite besteht aus drei Bereichen:

<img src="http://www.chraecker.de/forum/021004-1.png" border="0" alt="">

Links ist ein durchgängiger Inhaltsbereich (Menü)

In der Mitte kommt der Hauptinhalt der Seite.

Rechts kommen, je nach Inhalt der Mitte, Randbemerkungen, die also sich von der Höhe her am Inhalt der Mitte orientieren müssen. Das war bisher leicht (per Tabelle) lösbar, weil der Inhalt in der mitte entsprechend aufgeteilt wurde. (Es kamen also keine Randbemerkungen zu Wörtern inmitten von Flietext, sondern die Bemerkunegn kamen Absatzweise)

Die Breite des linken und rechten Randes sind fest vorgegeben und die Mitte soll sich entsprechend der Fenstergröße ausdehnen. Die farbigen Balken sollen auch bei "kürzeren" Gesamtinhalten von oben nach unten das Fenster ausfüllen, was ich immerhin in der transitionalen Version hinbekommen habe.

<img src="http://www.chraecker.de/forum/021004-2.png" border="0" alt="">

Würde ich jetzt die Tabellensuppe gegen einen Blockelementsuppe austauschen, dann würde das Konstrukt "sowas" ergeben.

<img src="http://www.chraecker.de/forum/021004-3.png" border="0" alt="">

Es verknotet sich mein gefloatetes Hirn und ich mag einfach kaum aktzeptieren, das in wieviel Jahren jetzt? die technik mir immer nur ein "sowas geht halt nicht" entgegen schmettert ;-)

(Bitte beim obigen Bild beachten: die "Länge" des Inhaltes der Blöcke in der mitte und ihrer Pendants auf dem rotem Bemerkungsstreifen sind natürlich nie gleich lang ;-))

Chräcker

  1. Vielleicht suchst Du so etwas?

    http://bluerobot.com/web/layouts/layout3.html

    MfG
    Mark

    1. Hallo,

      http://bluerobot.com/web/layouts/layout3.html

      Danke. Soweit war ich schon. Aber da geht der rechte Teil "durch". Ich möchte aber, das die Mitte und der rechte Teil aus jeweils  "untereinanderliegenden" Paar-Blockelement-Bereichen bestehen die paarweise jeweils auf der gleichen Höhe beginnen und, auch das noch, gleich hoch sind. (Weil die Farben schwarz und rot durchgehen sollen damits wie das erste Bild aussieht). (Eben wie bei einer Tabelle ;-)))... da komme ich irgendwie nicht hingefloatet...

      Etwas was per Tabelle leicht geht, aber ich mag es einfach nicht verstehen, warum das nicht auch ohne gehen kann ;-)

      Chräcker

      1. Hallo.

        Ich möchte aber, das die Mitte und der rechte Teil aus jeweils  "untereinanderliegenden" Paar-Blockelement-Bereichen bestehen die paarweise jeweils auf der gleichen Höhe beginnen und, auch das noch, gleich hoch sind.

        Dann fasse deinen einzelnen nebeneinander liegenden Absätze doch zusammen.
        MfG, at

        1. Hallo,

          Dann fasse deinen einzelnen nebeneinander liegenden Absätze doch
          zusammen.

          und dabei verknotete sich gestern mein Hirn ;-) Heute morgen gehts wieder etwas frischer mit Euren Anschupsern weiter....

          Chräcker

  2. Hi,

    Würde ich jetzt die Tabellensuppe gegen einen Blockelementsuppe austauschen, dann würde das Konstrukt "sowas" ergeben.

    Wieso Tabellensuppe?
    Es reicht doch eine einzige Tabelle für mittleren + rechten Bereich.
    Und nach Deiner Beschreibung (Text plus Bemerkung) halte ich hier eine Tabelle für nicht falsch.
    Die Zellen einer Spalte enthalten gleichartige Daten (entweder nur Textabschnitte oder nur Bemerkungen) und die Zellen einer Zeile haben einen logischen Bezug zueinander (da sich ja die Bemerkungen auf den Textabschnitt derselben Zeile beziehen).
    Es handelt sich also NICHT um eine böse Layout-Tabelle.
    ==> Tabelle benutzen.

    Ersatzweise: den Textabschnitt links floaten (die für float notwendige Breitenangabe ist ja nach Deiner Beschreibung kein Problem) und außerdem mit clear dafür sorgen, daß unterhalb der Bemerkung weitergemacht wird.
    Problematisch ist hier höchstens noch die linke "Spalte", da die ja von clear nicht betroffen sein soll - da sie aber links oben beginnen soll und fixe Breite hat, kann hier mit absoluter Positionierung gearbeitet werden.

    cu,
    Andreas

    --
    MudGuard? Siehe http://www.Mud-Guard.de/
    Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
    1. Hallo,

      Wieso Tabellensuppe?

      ja, Tabellensuppe wat etwas falscher Begriff - es ist eine uralte Schmuddelseite, die ich endlich ausfegen will und in der in dieser Rahmentabelle noch weitere Schmuddeltabellen liegen. "Selbst ich" blicke da durch manche Verschachtelungen nicht mehr durch.

      Irgendwie hatte es sich mir in den Kopf gesetzt, das ein so klares optisches Konzept (in meinen Augen) auch einfach und klar umsetzen lassen muß. Und Du kennst mich ja sicherlich als jemanden, der vor Tabellen nicht fies ist und die auch zu Layoutzwecken einsetzt, das sogar manchmal verteidigt ,-)) aber im stillen Kämmerlein sehe ich es hier doch so, das es sich hier nicht wirklich um Tabelarischen Inhalt handelt. Die "Werte" werden ja nicht verglichen oder haben einen "punktgenauen" Bezug etc. Es handelt sich eben nur um einen "Bemerkungsrand" auf dem ein oder anderer Bezug zu einen oder anderen Punkt innerhalb des Haupttextes steht. Wenn man so will eine Fußnotenzeile die neben dem Text steht anstelle drunter (weil das im Web ja auch unsinnig ist, auch wenn es mal bei Postings Mode war ,-))

      Eine "Verankerungstechnik" von fliessenden Blockelementenwürde ich mir wünschen. Es erstaunt mich in den letzten Monaten immer mehr, wie vorsinnflutlich diese html/css-Technik doch noch ist und wie zäh sich das alles entwickelt.

      Aber ich werde wohl weiter eine Tabelle nehmen und nach diesem reinigem Thread und Deinen klaren Worten mit einem besserem Gefühl ;-)

      Chräcker

      1. Hallo Chräcker,

        Aber ich werde wohl weiter eine Tabelle nehmen und nach diesem reinigem Thread und Deinen klaren Worten mit einem besserem Gefühl ;-

        Hast du wirklich ernsthaft vor, bei Tabellen zu bleiben? Ich frage deshalb, weil ich dann möglichweise eine ganze Menge Arbeit sparen kann. Ich habe einen ähnlichen Fall und hatte ebenfalls vor, nach einer Lösung mit Blockelementen zu suchen. Bei mir geht es allerdings um eine Offline-Anwendung, mit der ausschliesslich in einem Autorensystem generierte Seiten ausgedruckt werden. Ich hoffte eigentlich, so bessere Gestaltungsmöglichkeiten zu bekommen. Für die Textformatierung setzt du aber doch sicher CSS ein?

        Besten Dank und schöne Grüsse

        Richard

        1. Hallo,

          Für die Textformatierung setzt du aber doch sicher CSS ein?

          aber natürlich. Auch das macht Tabellenkosntrukte ja wenigstens um einiges schlanker, braucht man längst nicht mehr in jede Zelle einen font-Tag reinknallen. Ich versuche CSS wo es nur geht einzusetzen.

          Das Problem das ich noch bei den bisherigen uns zur Verfügung stehenden Werkzeugen (html/css) sehe ist eine fehlende gute (oder überhaubt eine) gegenseitige "Verankerung" von Inhaltselementen. Es ist nicht wirklich möglich, ein Bild an ein Wort des Fliestextes zu hängen, auf das das Bild dann bei sich änderem Umbruch mitfliest. Oder eben, so wie ich es haben möchte, Inhaltsbereiche "rechts" neben einem Fliestextgefüllten anderen Inhaltsbereich zu setzen und per "Verankerung" diese bei sich änderenden Umrüchen mitwandern zu lassen. Etwas was jede Textverarbeitung kann.

          Es scheint nur zwei Möglichkeiten zu geben: man nutzt also weiter Tabellen, und erreicht so das optische und menschenlesbare Ergebnis, was man haben möchte und was meiner bescheidenen Meinung wirklich nicht exorbitant exotisch ist, oder man verzichtet einer besseren Maschinenlesbarkeit (was natürlich auch wieder Menschen zugute kommt, ich will das nicht so despektierlich verstanden wissen) auf Tabellen als Layouthilfsmittel und verabschiedet sich von seinen "Basisansprüchen" (wie ich es empfinde) und reduziert somit seine Layoutmöglichkeiten. Bei Neukonzeptionen von Internetseite reduziere ich "ja" auch inzwischen soweit meine Ansprüche und stutze das Nötige auf das Mögliche zurück, um so mit den wenigen klarzukommen und dabei saubere html-css Konstrukte her zu stellen.

          Hier bei meinem Fall, wo die Seite so weiter bestehen soll, werde ich mich dann "eben" für Tabellen entscheiden, denn die, wenn überhaubt vorhandene, "Div-Alternative" ist auch eher eine Krücke und kaum im Sinne des Erfinders.

          Chräcker

          1. Hallo.
            Vielleicht interessiert dich ja http://www.mediaevent.de/article.php/20040926103515715.
            MfG, at

            1. Hallo at,

              Vielleicht interessiert dich ja http://www.mediaevent.de/article.php/20040926103515715.

              vielen Dank, dass du mich an diese site erinnert hast.

              Beste Grüssse

              Richard

          2. Hallo Chräcker,

            Hier bei meinem Fall, wo die Seite so weiter bestehen soll, werde ich mich dann "eben" für Tabellen entscheiden, denn die, wenn überhaubt vorhandene, "Div-Alternative" ist auch eher eine Krücke und kaum im Sinne des Erfinders.

            vielen Dank für die ausführliche und sehr aufschlussreiche Antwort. Ich erhoffte mir eigentlich von so einer "Div-Alternative" einfachere und differenziertere Gestaltungsmöglichkeiten. Bei meiner recht ungewöhnlichen Anwendung gelten die üblichen Einwände gegen Tabellen nicht, es werden ausschliesslich zum Ausdrucken bestimmte Seiten im Offlinebetrieb erstellt. Dazu werden die Code-Teile aus einer Datenbank in ein Autorensystem übernommen und mit Texten und Grafiken verbunden. Das eigentliche Kunststück ist, die richtige Auswahl an Möglichkeiten zu treffen. Das sind nicht einfach Templates, da kann richtig mit gearbeitet werden.

            Für die Gestaltung von Internetseiten stimme ich dir vollkommen zu,  dass es nur den Weg gibt, das Nötige auf das Mögliche zu reduzieren. Aber das ist ja auch schon eine ganze Menge. Allerdings ist es für mich eher ein Randgebiet.

            Beste Grüsse und nochmals vielen Dank

            Richard

  3. Hallo Chräcker,

    so sollte es doch funktionieren (die "clears" habe ich der übersicht halber weggelassen):

    <img src="http://www.adepto.de/dateien/divsuppe.png" border="0" alt="">

    Den optischen Spalten-Effekt bekommst du hin, indem du dem Umschliessenden Div ein Hintergrund-Bild in der Breite der rechten Spalte mit repeat-y und Position right top zuweist, sowie der linken Spalte ebenfalls ein Hintergrund-Bild oder -Farbe.
    MfG, Mülli

    --
    Viva Colonia!
    1. Hallo,

      wow, so viel Mühe, Danke!

      Nachdem ich das jetzt in html nachgemalt habe, habe ich nur mein altes Problem, das die mittlere Spalte sich nicht zu gänze des verfügbaren Raumes ausdehnt. Eine 100% Breite gibts ja nicht, denn dann nimmt er ja sinnigerwiese bei Transitional die fensterbreite als Maßstab.

      Hm, ich könnte ja, wie ich es schon mal bei anderen tests hatte, die rechten Divs mit position "rechts" auf die Koordinate 0-vom-rechten-Rand setzen....

      Aber Deine Mühe hat mir gezeigt, das da wirklich eine irre Menge Divs rauskommen, die eine klare Tabellstruktur kaum das Wasser reichen kann. (Zumindest optisch beim Codebetrachten und von der menge an getippe ;-))

      Trotzdem oder gerade Danke!!!

      Chräcker