Zweispaltiger Text mit zu umfließenden Objekt am unteren Ende mittels Javascript und CSS

19. April 2008 um 01:22 von donvanone | Kommentar abgeben | Trackback

Fluffi meinte, dass ich mir mit dem kleinen Bild in diesem Entwurf keinen Gefallen tun würde. Und da sollte er Recht behalten, denn mit CSS einen Text um ein Objekt floaten zu lassen, dass an diesem Textblock unten ausgerichtet ist, ist einfach unmöglich (lasse mich gerne vom Gegenteil überzeugen).

Aber ich hab mich ja nicht auf reines CSS festgelegt und so hab ich mal munter mit Javascript gespielt. Und Tada:

Float at Bottom

Das ganze kann man sich hier in live angucken.
Funktioniert so, dass das rote Kästchen absolut an die richtige Stelle positioniert wird (mittig ans untere Ende des divs, welches die beiden Textspalten umgibt). Und jetzt wird per Javascript in jede Spalte ein weiteres Kästchen gepackt, um das der Text floatet. Dummerweise kann man da nur den oberen Punkt irgendwo im Text platzieren, so dass man die richtige Position finden muss, dass das floatende Kästchen (ist übrigens blau) ganz nach unten geht.
Also packe ich dieses div erstmal ganz an den Anfang von Text, es wird also ganz oben gefloatet. Totaler Quatsch. Dann schiebe ich das floatende div immer ein Wort weiter nach hinten, bis die Position des blauen divs unterhalb (oder gleichhoch) des roten divs ist.
Nicht kapiert, oder? Egal, einfach mal den Quellcode angucken.

Nachdem die linke Spalte so angepasst wurde, kommt die rechte Spalte dran. Dann ist es aber nicht fertig, denn wie man im aktuellen Fall sieht, ist die rechte Spalte länger als die linke. Darum schiebt sich durch das Einfügen des float-Blockes das Ende der rechten Textspalte weiter nach unten und verschiebt somit auch das rote Viereck. Darum muss die linke Spalte nochmal angepasst werden. (Hab das in der Live-Version mal mit Alerts angezeigt)

Und wenn Javascript deaktiviert ist, wird das rote Kästchen momentan gar nicht angezeigt. Kann man sich ja überlegen, wo und wie man es statt dessen anzeigen will.
Wohoo! Ich komme meinem Entwurf immer näher!

Und jetzt könnt ihr mir sagen, wie ihr es gemacht hättet…

PS: Ne bessere Überschrift ist mir nicht eingefallen, sorry…
PPS: Blindtexte von  hier.

Update: Hab mir heute Nacht überlegt, dass das mit meiner Realisierung ja auch mit beliebigen Positionen zwischen den Spalten gehen muss und nicht nur unten fixiert. Darum  hier jetzt eine Version, in der man das rote Kästchen mit drag&drop verschieben kann und sich das Floating dann anpasst. Macht nur Sinn, wenn sich das rote Kästchen zwischen den beiden Spalten befindet.

 
Thommy:

wuhu… echt hübsch. daumen hoch!
das nächste wäre jetzt ein skript, das das Bild automatisch so nach links/rechts verschiebt, dass beide Seiten des Textes gleich lang sind ^^
Aber das wär dann noch viel komplizierter….

antwortenReply to this comment
 
 
DonsTag » Mein neues Blog:

[...] dem zweispaltigen Artikel ein Bild unten mittig zu floaten. Das das theoretisch geht, hatte ich ja schonmal gezeigt. In der Blogpraxis ging es dann aber doch nicht so easy, da sich mein Skript durch margins, [...]