FloatLayout ähnlich "Leseflussdiagramm[??]"
Christian Zill
- css
Schöner Gruß aus Kaiserslautern!
Eine Bitte! Könnte sich jd. das kleine Bildchen, 855 Bytes, mal ankucken?
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.
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.
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.
------------------------------------------------------------------
Hi,
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
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.
und nochmal ein Bild gemacht:
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
Hi,
und nochmal ein Bild gemacht:
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