# float: under;



## TinniTuss (9. Januar 2010)

Hallo Maik... 
...und all' die anderen.

Um zwei vertikale Reihen gleich breiter <div> untereinander anzuordnen habe ich bisher zwei 'Ober-div' nebeneinandergestellt und diese mit Sub-divs der Reihe nach gefüllt.

Daraus ergaben sich zuletzt zwei Nachteile: 
Durch den Aufbau der ersten Spalte entstand immer ein stufenweiser Aufbau so daß die zweite Spalte zeitweise sekundenlang erstmal leer blieb. Außerdem war der Pflegeaufwand, um die rechte mit der linken Oberspalte gleichmäßig aktuell und in einem optischen Gleichgewicht zu halten zuletzt zunehmend größer. 

Was muß ich machen, um 1 Container (statt zwei2) gleichmaäßig von oben nach unten mit zwei Reihen gleich breiter, aber ungleich hoher Sub-divs zu füllen. 'Float' und 'position' habe ich zwar einigermaßen verstanden, komme aber mit meinen eigenen Experimenten auf keinen grünen Zweig.

Was mir fehlt, ist so eine Art 'float: under', oder eine komplett neue Idee. Kennt evtl jemand (zur Not) eine JavaScript-Routine die so etwas übernimmt? Es fällt mir auch keine passende Bezeichnung für dieses Problem ein, so daß ich mit der Suche nach anderweitigen Problemlösungen nicht weitergekommen bin. Ich nehme mal an, daß dieses Thema schon tausendmal behandelt wurde, aber wo?!.

Wie es nicht aussehen sollte zeigt das Muster an folgender Adresse.
http://www.weezerlinks.de/sub/muster/Muster100109.html

Wär' schon nicht schlecht wenn jemandem etwas dazu einfallen würde.

Viel Gruß
HH


----------



## hela (9. Januar 2010)

TinniTuss hat gesagt.:


> ... Um zwei vertikale Reihen gleich breiter <div> untereinander anzuordnen habe ich bisher zwei 'Ober-div' nebeneinandergestellt und diese mit Sub-divs der Reihe nach gefüllt...


Hallo,
deine Beschreibung ist unverständlich: Wenn du wirklich zwei (und tatsächlich nur zwei) "Ober-DIV" nebeneinander stellst und "_diese mit Sub-divs der Reihe nach_" füllst, dann ergibt sich (bei mir) kein "_stufenweiser Aufbau_".

Benutze doch einfach mal eine Suchmaschine mit dem Suchwort "_2 Spalten-Layout_" und sieh dir bei den Treffer mal die Realisierung an.

Übrigens ist der Link in deinem Post keine HTML-Datei sondern nur ein HTML-Fragment, so dass in manchen Browsern nur der Quelltext dargestllt wird.


----------



## Maik (10. Januar 2010)

> float: under;



Ist ja nur drollig 

Wie wäre es denn zur Abwechslung mit "*Down Under*"? ;-)

Und wie hela es schon richtig umrissen und auf den Punkt gebracht hat, wenn du deine Divs in zwei übergeordnete umfliessende Spaltenblöcke packst, ergeben sich da keine vertikalen Lücken oder Abstände zu den benachbarten DIVs.

mfg Maik


----------



## TinniTuss (10. Januar 2010)

Lesen hela, lesen...!

"...was muß ich machen, um 1 Container (statt zwei2) gleichmaäßig von oben nach unten mit zwei Reihen gleich breiter, aber ungleich hoher Sub-divs zu füllen?"

Stufenweise heißt, die Inhalte im linken Schlauch werden erstmal bis in 800 Meter Tiefe aufgebaut, während sich im sichtbaren obersten bereich sekundenlang nichts tut. Nenn' es von mir aus zögerlich, ruckelig oder sonstwie, wenn Du 'stufenweise' mißverständlich findest.
Ich dachte, alte Hasen würden erkennen, daß es sich bei dem dargestellten "html" (in Anführungszeichen) nur um das grundsätzliche Schema handelt. Für Dich, das selbe noch mal als Bild.

http://www.weezerlinks.de/sub/muster/muster.jpg

Maik:
Ich will ja gerade weg von zwei nebeneinanderliegenden <div>. Ihr empfehlt mir genau das, was ich in meiner ersten Zeile unter 'bisher' beschrieben habe, und was den Zweck nicht erfüllt.

Drück' ich mich wirklich so mißverständlich aus?

HH.


----------



## Maik (10. Januar 2010)

Stellt sich doch eher die Frage, warum du den bewährten Weg verlässt, und dich auf Abwegen begibst, um das Rad neu zu erfinden, was  dich letztlich aber nur ins Stolpern bringt.

"Haste keine Probleme, so machste dir halt welche" 

Die beiden linken Blöcke, die da nach unten rutschen, sind sicherlich mit der clear-Eigenschaft formatiert. So sind da halt die "CSS-Gesetzmäßigkeiten", gegen die auch kein Kraut gewachsen ist.

mfg Maik


----------



## Sven Mintel (10. Januar 2010)

Moin,

das was du vorhast, geht teilweise schon sehr einfach 

Es ist Bestandteil von CSS und nennt sich "Multi-Column-Layout".

Leider wird es momentan nur von Safari+FF unterstützt(deswegen "teilweise").


----------



## TinniTuss (10. Januar 2010)

Hallo Maik

...weil der bisherige Weg nicht der bewährte Weg ist/war. Ich wiederhole es gern ein weiteres Mal:

Der Aufbau der linken Spalte dauert zu lange (ca. 50 sub-divs per 'php-include'), im sichtbaren oberen Bereich (rechte Spalte) tut sich einfach zu lange nix...

HH.


----------



## Maik (10. Januar 2010)

TinniTuss hat gesagt.:


> Der Aufbau der linken Spalte dauert zu lange (ca. 50 sub-divs per 'php-include')


Und du glaubst ernsthaft, dass sich an diesem Umstand etwas ändert, wenn du im Markup auf *einen* Spaltenblock verzichtest? 

Was gibst du hier lieber den Vortritt? Einem verzögerten Seitenaufbau, der bei dieser Anzahl in der Natur der Sache liegt, oder ein versprengeltes Layout?

mfg Maik


----------



## TinniTuss (10. Januar 2010)

Danke Sven...
... das könnte was sein...

Ich habe den Artikel der zu Deinem Link gehört ganz flüchtig überflogen. 
Da werde ich morgen mal ein paar Stunden dran tüfteln. 
Mein Holländisch ist nicht so gut. (*)


Wieso hast Du denn meine Problematik überhaupt verstanden  ? 

Viel Gruß
HH



(*) = Scherz!

Maik,...

... ich verstehe versprenkeltes Layout nicht.


Wenn beim Seitenaufbau die ersten halben Dutzend 'Päckchen' dargestellt sind, zack, zack, links, rechts, links, rechts....
... dann ist ist es mir, und wahrscheinlich dem Besucher auch, gleichgültig ob der Gesamtaufbau 5 Sekunden dauert oder nicht. Was glaubst Du, warum Seiten (wie Bing, wenn ich mich nicht irre...) teilweise sogar erst generiert werden wenn Benutzer nach unten scrollen. Aber für Ajax und Konsorten bin ich leider noch zu 'klein'...

HH.


----------



## Maik (10. Januar 2010)

Entschuldigung, aber du bist doch hier vorstellig geworden, um von diesen versetzten Blöcken erlöst zu werden:




Und in meinen Augen stellen sie ein versprengeltes Layout dar ;-)

mfg Maik


----------



## Maik (10. Januar 2010)

Übrigens dürfte dir Svens gutgemeinter Vorschlag auch nicht sonderlich weiterhelfen, da die Blöcke ja nach deiner eigenen Aussage unterschiedliche Höhen besitzen, und sich somit auch hier das gleiche Problem ergibt, dass neben den längeren (höheren) DIVs zwischen den kürzeren ein Abstand entsteht.

mfg Maik


----------



## TinniTuss (10. Januar 2010)

Ach Maik...

...Ich habe ein Layout, das funktioniert, aber im sichtbaren Bereich zu lange braucht.

Dieses versprenkelte Layout ist das, was entsteht, wenn ich den langsamen Weg der Tugend verlasse und mit einem einzigen Container und floats und positions experimentiere ohne auf einen grünen Zweig zu kommen. OK?

Ich brauche keine 'Erlösung', sondern eine Alternative zu dem versprenkelten Layout und meinem funktionierenden, erprobten, aber zu langsamen Aufbau. 


Gute Nacht

HH.


PS. Ich kann den Artikel, Svens Empfehlung folgend, noch nicht beurteilen. Ich bin nicht so schnell und offensichtlich eh zu doof!


----------



## hela (10. Januar 2010)

TinniTuss hat gesagt.:


> Lesen hela, lesen...!


Hallo TinniTuss,
danke für deine freundliche Leseaufforderung und dass du dein Problem noch mal näher beschrieben hast. Falls ich dir mit der Bemerkung, dass deine erste Problembeschreibung für mich unverständlich ist, zu nahe getreten sein sollte, dann bitte ich um Entschuldigung. Das wird sicherlich nicht mehr passieren.


----------



## TinniTuss (10. Januar 2010)

Hallo Sven 

Wenn man davon absieht, dass das CSS3 Multi-Column Layout bisher erst in einigen Browsern, mit Browserspezifischen Selektoren (z.B. moz-column-width: 200px) funktioniert, so stellt es immerhin eine enorme Erleichterung und beinahe perfekte Umsetzung eines Mehrspaltigen Layouts dar. Sogar begonnene Texte der Spalte-1 werden oben in Spalte-2 fortgesetzt. Sehr schön. Allerdings liegt die Betonung immer noch auf mehrspaltig.

Die gleichmäßige Anordnung gleich-breiter aber unterschiedlich hoher sub-divs, ohne unterschiedlich große Vertikale Zwischenräume, in_ einem einzigen_ _ober-div_, ist damit ebenso nicht möglich.

Zur Veranschaulichung wie es idealerweise aussehen sollte:
http://www.weezerlinks.de/sub/muster/ziel.jpg

Mit freundlichen Grüßen
HH.


----------



## Maik (10. Januar 2010)

Hi,

dafür müssten die  DIV-Blöcke eine Art "Slalom-Technik" in engen Radien beherrschen, und im gesteckten Kurs auch  mal einen Haken nach oben schlagen zu können.

Ich lehn mich ungern aus dem Fenster, aber hier denk ich nicht mehr an "Down Under", sondern eher an "Mission Impossible".

Mit bekannten (fixen) Höhen liessen sie sich in der Mutterbox zumindest absolut positionieren, aber im Umfluß nach oben rutschen lassen ..., ich wüsste nicht wie.

mfg Maik


----------



## TinniTuss (10. Januar 2010)

Hallo Maik

Ich könnte mir denken, dass es da etwas im JavaScript-Bereich gibt. Ich bin selber einigermaßen fit in CSS, aber es gibt immer noch ganz raffinierte Sachen die einen doch hin und wieder in Erstaunen versetzen. 

Solche Lösungen zu suchen (und zu finden) ist nahezu aussichtslos (zumindest für mich). Der Vorteil des Forums ist die breite Streuung. Auch gute Leute wissen nicht immer alles... 

Aber das Thema ist noch nicht vom Tisch für mich.

Danke

HH.



PS. Gibt es in JavaScript evtl. eine Funktion die die Koordinaten einer Box 'erkennt'?
Oder man könnte vieleicht die float-Richtung (rechts oder links) berechnen lassen...


----------



## Sven Mintel (10. Januar 2010)

Mmmh, ich habe jetzt schon mehrmals von dieser langsamen, aber optisch zufridenstellenden Lösung gelesen?

Wie wäre es, wenn du diese offenbarst, und wie einen Weg ersinnen, um ihr auf die Sprünge zu Helfen?

Es ist halt mehr als kompliziert, das ganze mittels 1 Container so hinzubekommen, wie du es möchtest.


----------



## TinniTuss (10. Januar 2010)

Meinetwegen...
...aber auf eigene Gefahr!

---(Der Link an dieser Stelle wurde wieder entfernt)---


Viel Spaß
HH.


In der Kritik aber bitte auf das ursprüngliche Thema beschränken, Ich bin immer so leicht eingeschnappt ?!  :-(


----------



## Sven Mintel (10. Januar 2010)

TinniTuss hat gesagt.:


> In der Kritik aber bitte auf das ursprüngliche Thema beschränken, Ich bin immer so leicht eingeschnappt ?!  :-(



Da ist doch alles in Butter, ich kann nichts Störendes erkennen.


----------



## TinniTuss (10. Januar 2010)

...du hast wahrscheinlich einen schnellen Rechner und/oder einen schnellen Zugang, sonst müßtest Du auf den Aufbau der rechten Spalte ein paar Sekündchen warten. 

Wie lange jemand mit einer Asbach-uralten lahmen Kiste wartet, kann ich nur ahnen/befürchten, dazu habe ich noch kein Feedback...

HH.


----------



## Sven Mintel (10. Januar 2010)

Mein PC ist 6 Jahre alt und meine Verbindung für heutige Verhältnisse eher unterm Durchschnitt.

Du hast dort halt einen Haufen Zeug, das lädt auch nicht schneller bei einem einzelnen <div>

Bevor du dir weiter den Kopf zerbrichst über die aktuelle Thematik, mache dir besser Gedanken, wie du das "Zeugs" reduzierst.
Der Server dort wird pro Seitenaufruf mit über 100 Requests bombardiert...entlaste ihn ein wenig, dann antwortet er auch bereitwilliger.
Reduziere die Datenmenge, bspw. dieses Bild: http://www.weezerlinks.de/includes/includes_bilder/seite2.png , das sollte auch auf 1/10 der Dateigrösse komprimiert noch ordentlich aussehen......die 1. Seite lädt insgesamt über 2MB, das ist natürlich entschieden zu Viel.

Installiere dir am Besten mal YSlow, das gibt dir viele hilfreiche Tips zur Optimierung 

Übrigens: Nicht eingeschnappt sein, aber mir gefällt die Sache eigentlich sehr. 
Ich hab selten etwas in diesem "Genre" gesehen, was so kurzweilig aufgebaut ist und zum Stöbern einlädt, ist ganz schön was los bei euch


----------



## Maik (10. Januar 2010)

Hi,

die Blöcke erscheinen auch bei mir ohne sonderliche Verzögerungen.

mfg Maik


----------



## TinniTuss (10. Januar 2010)

Danke Sven...
...Balsam!

Solche Kleinigkeiten wie der 80kb-Wegweiser-png werden laufend optimiert sobald sie an der Reihe sind. Alle Inhalte rotieren ständig, werden angepasst und optimiert. Zur Zeit wird jede 'Parzelle' verschlagwortet, und in einem zukünftigen Schritt wahrscheinlich komplett in ein php-Array übertragen (MySQL). Durch die Verschlagwortung bin ich (in Zukunft) in der Lage, Inhalte nach Kategorien beliebig zusammenzustellen, wenn ich dann eine passende Benutzerführung damit kombiniere, kann ich evtl. auf die unflexieblen Mega-Bandwürmer verzichten.

Ein Problem, dass ich bisher noch nicht in den Griff bekommen habe, ist das WegScrollen des Hauptmenüs unter IE6 (und einige häßliche png-Transparenz-Macken), aber Möglicherweise geh' ich da auch nicht mehr dran. 

Die Veränderung der Spalten-Struktur, von zwei auf eins, sollte die erste am Grundgerüst seit langem sein.
Es stört mich beispielsweise gewaltig, wenn der Terminkalender ein paar Events mehr als üblich in der laufenden Woche hat und die linke Spalte unten deshalb einen halben Meter hinausragt. Besonders, wenn ich den Neujahrs-Wunsch oben rechts herausnehme, (heute oder morgen) muß ich einige Inhalte erst wieder von der linken in die rechte Spalte verschieben um die Balance zu wahren. Dieses Sekundenlange Warten auf das erste Erscheinen der rechten Spalten-Inhalte im sichtbaren Bereich ist somit nicht der einzige Grund für eine Änderung/Anpassung, laufend kommt irgendwo etwas hinzu oder wird weggenommen, und immer wieder der Abgleich mit der Gegenseite...

Eine Idee war auch schon, oben, am Kopfende zuerst zwei kurze Spalten mit ohnehin stationären 'Parzellen' zu plazieren...
... und je mehr ich darüber nachdenke...

Hhm...

HH.


----------



## Maik (10. Januar 2010)

TinniTuss hat gesagt.:


> Ein Problem, dass ich bisher noch nicht in den Griff bekommen habe, ist das WegScrollen des Hauptmenüs unter IE6 (und einige häßliche png-Transparenz-Macken), aber Möglicherweise geh' ich da auch nicht mehr dran.


Falls doch,  implementiere einfach http://code.google.com/p/ie7-js/ in der Seite, womit die meisten bekannten IE6-Bugs gefixt werden  


http://ie7-js.googlecode.com/svn/test/fixed.html
http://ie7-js.googlecode.com/svn/test/png-background.html (PNG-Dateien erhalten am Ende des Dateinamens den Zusatz "**-trans*.png")

mfg Maik


----------



## TinniTuss (10. Januar 2010)

Interessant, Maik...

...davon habe ich (bisher) noch nie etwas gehört.


HH.


----------



## Maik (10. Januar 2010)

Feine Sache, gell? 

mfg Maik


----------



## TinniTuss (11. Januar 2010)

Hallo Maik

...die Idee war gut, aber leider...


Ich habe testweise diese Google-jScript eingebunden.
Die teilweise transparenten-png waren immer noch nicht transparent, dafür war der 'Doubled Float Margin Bug' wieder da. Vielleicht geh' ich da später noch mal dran und versuche das Verhalten zu ergründen, im Moment liegen die Prioritäten woanders, so daß ich Dir kurzfristig noch keine Erfolgsmeldung geben kann/werde.

Trotzdem Danke!

HH.


----------



## Maik (11. Januar 2010)

TinniTuss hat gesagt.:


> Ich habe testweise diese Google-jScript eingebunden.
> Die teilweise transparenten-png waren immer noch nicht transparent


Hast du hierbei auch beachtet, dass die Namen der PNG-Dateien den Zusatz "*-trans*" erhalten müssen?



Maik hat gesagt.:


> http://ie7-js.googlecode.com/svn/test/png-background.html (PNG-Dateien erhalten am Ende des Dateinamens den Zusatz "**-trans*.png")



Um den "Doubled-Float-Margin-Bug" zu fixen, findet sich auf der Projekt-Seite im Absatz "Other Bug Fixes" ein Hinweis:



> *These fixes are not in the standard IE7 library. They are included in a separate module ie7-squish.js.


Link zum dazugehörigen Beispiel:

http://ie7-js.googlecode.com/svn/test/doubled-margin.html

mfg Maik


----------



## TinniTuss (11. Januar 2010)

Danke Maik...

...nachdem ich alles wieder rückgängig gemacht habe, war der Bug auch wieder wech. 
Ich geh' da später nochmal dran.

Danke

HH.


----------

