css-formatierte Listen mit seitlichem Umbruch

[imuehle]

Hallo zusammen,

ich habe da ein etwas kniffliges Problem, zu dem ich mir gerade einen Wolf suche. Wenn einer von euch einen Tipp hat - ich bin für jede Hilfe dankbar.

Und zwar dreht sich die Geschichte um eine "ganz gewöhnliche" Auflistung. Ich habe einen Navigations-Index von A-Z, der sich in einem Layer befindet.

Habe zur Verdeutlichung eine Grafik mit hoch geladen.

Der Layer ist in seiner Höhe beschränkt (z. B. 200px), die Auflistung würde normalerweise weit über den Layer nach unten hinauslaufen (z. B. 600px). Nun möchte ich, dass die Liste nur die zur Verfügung stehende Höhe des Layers nutzt und ggf. "seitlich" umbricht (also bei Überschreitung der 200px), wenn die maximale Höhe ausgeschöpft ist.

Theoretisch könnte ich per float schon ein zufriedenstellendes Ziel erreichen. Dann allerdings stehen A, B, C usw. nicht mehr untereinander sondern nebeneinander. Und das will ich nicht.
Daher 1. Frage wie schaffe ich das?

Ich habe das mal gesehen und auch mal damit gearbeitet. Wenn ich mich recht erinnere, war das ein x-fache Verschachtelung von WasWeissIch. Ich komme einfach nicht mehr drauf.

Meine 2. Frage oder Problemstellung behandelt den Startpunkt der Auflistung. Wie in der Grafik zu sehen ist, soll sich im Layer über der Auflistung ein grafisches Element befinden, dem sich die Auflistung "unterordnet". Trotzdem sollen die umgebrochenen Teile der Auflistung bei top:0 ansetzen.

Irgendwie habe ich den Eindruck, dass sich das ganz einfach floaten lassen müsste. Aber dummerweise falle ich meinem Eindruck da gewissermaßen zum Opfer. So einfach es sein sollte, es funzt nicht.

Ich hoffe dass das jemand verstanden hat ...

Wie gesagt, bin für jeden Lösungsansatz dankbar. Was ich aber überhaupt nicht will, ist js einsetzen. Da habe ich etwas gefunden. Die gesamte Seite soll aber auf css basieren.

Gruß

ingo

[the0bone]

Ich würde im jeden Buchstaben ein div setzen. Also die Aufzählung A in ein div, die Aufzählung B in ein div usw.
Und diese div's floaten dann...

Beispiel: The Floating Boxes CSS Layout

[imuehle]

Korrigiere mich, wenn ich mich täuschen sollte. Aber floaten kann ich doch nur left oder right. D. h., mein Index würde den Verlauf von oben A nach unten Z dem float entsprechend ändern. Dann stünde B nicht mehr unter A sondern daneben. Das machts dann wieder unleserlich. An einen Index stellt man ja schon eine gewisse Erwartung was die Form angeht.

[imuehle]

so, habe mich mal mit dem floating durchgemogelt. Aber gefallen tut mir das überhaupt nicht. Warum, könnt ihr in der anhängenden Grafik sehen. Das Ergebnis schmerzt regelrecht in den Augen.

Es muss doch eine Möglichkeit geben, die korrekte Reihenfolge des Index beizubehalten.

Dummerweise entsteht dieser Index dynamisch. D. h., er bildet die Navigation aus den zur Verfügung stehenden Inhalten bzw. deren Überschriften. Daher kann und will ich die Navi auch nicht statisch bauen.

[mogidala]

hmm das einzige was mir jetzt noch einfallen würde, wäre, per php bei der ausgabe der einzelnen punkte einen zähler mitlaufen zu lassen. die ausgabe würd ich dann in listen verpacken und nach x punkten eine neue <ul> beginnen. die kannst du ja dann einfach nebeneinander floaten lassen.

problem ist hier aber auch, dass zum einen der "versetzte" anfang (ich denk du weißt was ich mein, die ecke oben links...) nicht umzusetzen ist, und außerdem wär das ganze semantisch auch nur halbkorrekt, da das ding dann eben in mehrere listen gesplittet wäre...

hmmmmmmmmmmmm....muss doch irgendwie gehen.....

[imuehle]

... das grausame daran ist, dass ich so etwas schon gesehen habe. Und zwar nicht nur als Ergebnis, sondern auch den entsprechenden Code. Mir fällt nur nicht mehr ein, wo ...

[the0bone]

Schade, dass sowas nicht geht:
http://www2.biochemtech.uni-halle.de/lernwww/tdci.htm

[the0bone]

Echt schwer zu finden sowas...

http://welcome.totheinter.net/columnizer-jquery-plugin/

Beispiele:
http://welcome.totheinter.net/autocolumn/sample1.html
http://welcome.totheinter.net/autocolumn/sample2.html
http://welcome.totheinter.net/autocolumn/sample3.html
http://welcome.totheinter.net/autocolumn/sample4.html
http://welcome.totheinter.net/autocolumn/sample5.html
http://welcome.totheinter.net/autocolumn/sample6.html

[wildmieze]

ich hab mir auch schon die finger wund gegoggelt, aber ich finde nur lösungen mit javascript oder php .. wenn in foren ähnliche fragen gestellt werden ("text in spalten" etc.) kommt als antwort auch immer nur "geht mit reinem css nicht" ..

[imuehle]

Mit dem jquery liebäugelte ich auch schon. Das ist theoretisch, worum es geht und praktisch, was ich brauche.
Wäre es halt nur kein js.
Andererseits überlege ich ob der Biss in den sauren Apfel nicht aus rein wirtschaftlichen Gründen zumutbar sein sollte. Denn so sehr man auch sucht, der Lösungsansatz dreht sich immer um js oder php.