Teil von SELFHTML Forum Teil von SELFHTML Forumsarchiv Teil von 2007 Teil von Dezember

SELFHTML Forumsarchiv
FloatLayout ähnlich "Leseflussdiagramm[??]"

Informationsseite
  1. Seite (CSS) FloatLayout ähnlich "Leseflussdiagramm[??]" von Christian Zill, 30. 12. 2007, 13:27
nach unten

FloatLayout ähnlich "Leseflussdiagramm[??]"

Die folgende Nachricht zum Thema stammt von: Christian Zill, 30. 12. 2007, 13:27

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.



nach obennach unten

FloatLayout ähnlich "Leseflussdiagramm[??]"

Die folgende Nachricht zum Thema stammt von: Christian, 30. 12. 2007, 14:02

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.

nach obennach unten

Lsg.: zweimal 3-Spalten-Layout übereinander

Die folgende Nachricht zum Thema stammt von: Christian Zill, 01. 01. 2008, 14:09

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.
------------------------------------------------------------------

nach obennach unten

FloatLayout ähnlich "Leseflussdiagramm[??]"

Die folgende Nachricht zum Thema stammt von: ChrisB, 30. 12. 2007, 22:28

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

nach obennach unten

FloatLayout "3-Wege-Lesefluss[?!]"

Die folgende Nachricht zum Thema stammt von: Christian Zill, 31. 12. 2007, 03:20

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

nach obennach unten

FloatLayout "3-Wege-Lesefluss[?!]"

Die folgende Nachricht zum Thema stammt von: ChrisB, 31. 12. 2007, 07:46

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

nach oben
Teil von SELFHTML Forum Teil von SELFHTML Forumsarchiv Teil von 2007 Teil von Dezember

© 1998-2006 Seite Impressum, Software: Classic Forum