Christian Zill: FloatLayout ähnlich "Leseflussdiagramm[??]"

Schöner Gruß aus Kaiserslautern!

Eine Bitte! Könnte sich jd. das kleine Bildchen, 855 Bytes, mal ankucken?

Leseflussdiagramm

Soll darstellen mein geplantes Sitelayout, was ich mit CSS und einigen
verfloateten DIVs realisieren will, also: Eine ziemliche Knobelei, dachte ich
zuerst, mittlerweile eher eine verdammte Pest. Der Sinn des Layouts liegt darin,
dass ich 3 Leseflüsse parallel laufen lassen kann, d.h.:

Buttons=BLAU, und die Restfarben:

GELB   -  ROT     -   BLAU
 ---------------------------
 These - Antithese - Synthese
 Problem - Analyse - Lösung

Das Bild stellt 2 screens, getrennt durch den weissen Querbalken, übereinander
dar. Man soll beim Scrollen / Lesen nicht aus diesen 3 Spalten rauskommen.

Ich hoffe ich hab das Problem jetzt definiert. Ich suche eine möglichst einfache
Lösung. Unwichtig sind erstmal die schwarzen Streifen.

Was ich bis jetzt habe führt vielleicht eher in die Irre, trotzdem könnte ich
meinen Versuch noch abliefern.

  1. Wie üblich was vergessen:

    Ich suche eine möglichst einfache Lösung.

    Nicht gemeint ist komplett. Was ich suche isterstmal nur ein vielleicht neuer Ansatzpunkt. Also eine für mich neue Idee.

    So ca: ROT mittig zentrieren, komplette Seite in GELB, BLAU( Button ) absolut positioniert. Es soll keine Zumutung sein hier. OK wäre auch ein guter Link zu einer Darstellung von Floats und Clearing.

    P.S.: Oben im letzten Posting hab ich BLAU und GRUEN verwechselt in der kl.Tabelle.

    1. Hi,

      Ich suche eine möglichst einfache Lösung.

      Heureka. Oder etwa keine Idee?! :
      ------------------------------------------------------------------
      3-Spalten Layout, ergänzt ENTWEDER UM

      Möglichkeit 1:
           einen vertikal und horizontal  zentrierten "Querbalken", ODER UM

      Möglichkeit 2:
           ein weiteres 3-Spalten-Layout unterhalb vom ersten. D.h. zwei 3-Spalten-Layouts übereinander.
      ------------------------------------------------------------------

  2. Hi,

    Leseflussdiagramm

    Der Sinn des Layouts liegt darin, dass ich 3 Leseflüsse parallel laufen lassen kann

    Hm, wenn der Text dann auch noch in diesen Formen fliessen soll, wird's schwierig.

    Fangen wir mal oben an, Blau koennte ja links floaten, Gelb und Rot legen sich dann daneben.

    Aber schon damit, dann auch Gelb wieder "nach unten" fliessen zu lassen, bekommst du Probleme. Das ginge m.E. hoechstens, wenn du Gelb aus zwei Elementen zusammensetzt.
    Rot erfordert dann auch wieder zwei Elemente, um den unteren Bereich hinzubekommen, der wieder nur links ausgerichtet sein soll, etc.

    Mit variablem Text kannst du das m.E. vergessen.
    Es ginge hoechstens(!) bei sehr starrem Text mit fixer Groesse.
    Wobei ich mir dann doch ueberlegen wuerde, ob massiv eingesetzte absolute Positionierung hier ausnahmsweise nicht mal angebrachter waere - als sich bei sowas mit Floating, Clearing und deren unterschiedlicher Interpretation in Browsern herumzuschlagen.

    Also ich wuerde sagen, in (derzeitigem) HTML & CSS bist du falsch, wenn du sowas umsetzen willst. Da waere PDF vielleicht doch mal die bessere Alternative.

    MfG ChrisB

    1. Hi,

      Hm, wenn der Text dann auch noch in diesen Formen fliessen soll, wird's schwierig.

      Muss er nicht komplett von oben nach unten in irgendeiner Farbe durchgängig. Aber das wollte ich in der Komplexität nicht so detailiert darstellen. Werd ich aber noch hier tun. In den Farb-Leselinien sind noch Boxen drin, und nur innerhalb von denen muss Fliesstext sein.

      Fangen wir mal oben an, Blau koennte ja links floaten, Gelb und Rot legen sich dann
      daneben. Aber schon damit, dann auch Gelb wieder "nach unten" fliessen zu lassen,
      bekommst du Probleme. Das ginge m.E. hoechstens, wenn du Gelb aus zwei Elementen
      zusammensetzt. Rot erfordert dann auch wieder zwei Elemente, um den unteren Bereich
      hinzubekommen, der wieder nur links ausgerichtet sein soll, etc.

      Wie gesagt, wirklich die Pest, und so hab ich ja auch mal angefangen:

      BLAU -> Linksfloat,

      danach eine rechtsfloatende Box, die wiederum folgende 2 Boxen enthält:
       GELB -> Rechtsfloat, und dann noch
       ROT  -> in verschiedensten Varianten rumprobiert ...

      und nochmal ein Bild gemacht:
      Leseflussdiagramm 2teVersion
      FLIESSENDER TEXT NUR INNERHALB DER KÄSTEN, nicht über die jeweilige Rechteckgrenze
      hinaus, was ja wirklich supertoll wäre, aber muss nicht, und vor allem nicht sofort.

      ----------------------------------------------------------------------------------

      Es ginge hoechstens(!) bei sehr starrem Text mit fixer Groesse.

      Das wäre OK, z.B. das Ganze eingeboxed in 1280x1024, 1024x768, 800x600, also 4:3
      ----------------------------------------------------------------------------------

      Wobei ich mir dann doch ueberlegen wuerde, ob massiv eingesetzte absolute Positionierung
      hier ausnahmsweise nicht mal angebrachter waere - als sich bei sowas mit Floating,
      Clearing und deren unterschiedlicher Interpretation in Browsern herumzuschlagen.

      In dem Zusammenhang: Können absolut positionierte Boxen den sie umgebenden Inhalt
      verdrängen? Aber das wäre wohl ein eiger Thread für sich & offtopic.
      Eigerthread? Nordwand.
      ----------------------------------------------------------------------------------

      Also ich wuerde sagen, in (derzeitigem) HTML & CSS bist du falsch, wenn du
      sowas umsetzen willst. Da waere PDF vielleicht doch mal die bessere Alternative.

      Etwas lieber als PDF wäre mir immerhin wenigsten Tabellenlayout. Aber es näge an mir.
      Ich probier's morgen weiter, und, v.a., Dank!

      MfG ChrisZ

      1. Hi,

        und nochmal ein Bild gemacht:
        Leseflussdiagramm 2teVersion

        Na ja, das koennte irgendwie machbar sein ...

        Blaue Box links floaten, und dann eine weitere rechts, wie du schon sagtest. Darin unter Gelb-Header eine rote nach links gefloatet, mit margin oben und rechts eine zweite gelbe auf Abstand halten.

        Darunter zwei Boxen, rot und gruen.
        Darunter nochmal rot links gefloatet, und einen weiteren Container, in dem dann unter Gruen-Header noch mal eine gelbe rechts floatet, wiederum margins fuer den Abstand zur weiteren gruenen ...

        Koennte allerdings etwas problematisch werden mit dem teilweise unterschiedlichen Verstaendnis der Browser davon, wo zu clearen ist.

        Zuerst mal sollte man sich wohl ueberlegen, ob man die Masze in Pixeln oder em angeben will.

        MfG ChrisB