Dr.Colossos: Listen mit "Umbruch"

Hi,

ich hätte gerne ein Liste, die am Container-Ende wieder umbricht, d.h. ...

<div style="hoehen_beschraenkung">
 <ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
 </ul>
<div>

... soll in etwa so aussehen ...

1  4  7
2  5  8
3  6  9

Ja, richtig, sieht schon sehr tabellarisch aus. Es ist aber (semantisch) keine Tabelle, sondern es soll der Versuch werden, einen Datei-Auswahl-Dialog zu simulieren (drückt mal STRG-O und ihr wisst was ich meine [nicht in Lynx getestet!]).

Das ist ja eine Liste, und es wäre mir lieber wenn es eine Liste bleiben könnte, und ich diese je nach User-Einstellung als Endlos-Liste (ohne wrap) oder eben mit wrap (tabellarisch, siehe oben) darstellen könnte.

Eine Links-Rechts-Sortierung ist kein Problem, das geht mit float:left an den <li>'s, der Form ...

1  2  3
4  5  6
7  8  9

Ist halt leider etwas ungewohnt.

Auftrennen der einen Liste in mehrere eigenständige (d.h. jede Spalte eine Liste) ist Unfug, da der Container in der Größe dynamisch änderbar sein soll, d.h. ich müsste die Listeneinräge durch-jonglieren.

Geht das irgendwie einfach(er)?

Danke sehr!

  1. Lieber Dr.Colossos,

    das, was Du vorhast, widerspricht der Dynamik, die die Anzeige von Webseiten nuneinmal hat. Webseiten können beliebig lang werden, jedoch nicht beliebig breit, da das Anzeigefenster sich nur sinnvoll(!) nach unten erweitern lässt. Als Benutzer ist man es gewöhnt, längere Seiten nach oben zu scrollen, um an das Ende zu gelangen. Zu diesem Zeck wird vom Browser alles so angeordnet, um zuerst in der Breite alles auszufüllen, und erst dann bei Bedarf auch in die Länge zu gehen. Das entspricht sehr unseren Lesegewohnheiten. Wir schreiben so auch auf Papier!

    Eine senkrecht sortierte Liste entspricht auch unserer Lesegewohnheit, da wir spaltenweise angeordnete Inhalte besser überschauen können. Das ist mit der Grund, warum bei Tabellen die Überschriften in der Rgel in der ersten Zeile stehen.

    Du willst nun diese zwei Dinge kombinieren, die nur dann kombinierbar sind, wenn eine Dimension fest vorgegeben ist. Also entweder legst Du die Breite der Liste fest und notierst im Prinzip bis zu drei Listen, oder Du legst die Höhe fest und definierst entsprechend davon abhängig beliebig viele Spalten.

    Sowohl Höhe als auch Breite variabel zu haben, ist mit den reinen CSS-Mitteln nach meinem Wissen nicht möglich. Hier müsste ich zu JavaScript greifen, um so dynamisch die verfügbare Höhe zu ermitteln und darauf basierend dann die Anzahl der Spalten zu generieren.

    Vielleicht konnte ich Dir von der Idee her weiterhelfen?

    Liebe Grüße,

    Felix Riesterer.

    --
    ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)
    1. Hi & Danke.

      Ja, wie ich oben schon erwähnt habe, und du auch meintest, könnte ich das natürlich alles via JavaScript machen, aber der Preis des Kodier-Aufwandes, und obendrein die Vermutung dass das sehr unperformant werden könnte, lassen mich bei dem geringem Nutzen von dieser Lösung Abstand nehmen.

      Wenn es mit CSS nicht möglich ist, was ich schwer vermute, dann lass ich es.

      Danke dir und jedem anderen der sich hier noch einbringen will.

      1. Lieber Dr.Colossos,

        könnte ich das natürlich alles via JavaScript machen, aber der Preis des Kodier-Aufwandes, und obendrein die Vermutung dass das sehr unperformant werden könnte, lassen mich bei dem geringem Nutzen von dieser Lösung Abstand nehmen.

        wieso? Es gibt hier im SELFRAUM - glaube ich - auch einen Artikel über das Sortieren von Tabellen. Das wird sicherlich mindestens ebenso (un-?)performant sein, wie das, was Du vorhast. Meine Idee wäre, dass Du das jetzt einfach probierst! Zumindest die Ansätze sollten doch recht schnell geschaffen sein:

        * _eine_ Liste (ul oder ol) und
        * ein JavaScript, dass sich alle ihre <li>-Elemente in einem Array (oder von mir aus in einer HTMLCollection) speichert und
        * ein Eventhandler, der window.onresize belauscht, um dann in Aktion zu treten

        Solltest Du dann nicht weiter kommen, dann lesen wir uns hier wieder, OK?

        Liebe Grüße,

        Felix Riesterer.

        --
        ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)
        1. Hi,

          Solltest Du dann nicht weiter kommen, dann lesen wir uns hier wieder, OK?

          Nur in Sachen CSS hätte ich Hilfe gebraucht, ob es rein damit geht - was wohl negativ beantwortet werden muss.

          Ich versuche Standard-(GUI)-Dialoge mittels DOM + JavaScript + AJAX zu codieren, und anstatt mich mit solchen Details rumzuschlagen, wie eine Liste dynamisch in mehrere zu teilen mach ich mich lieber an produktivere Arbeit als ein kleines popeliges Feature zubearbeiten dass am Ende ohnehin nicht meinen Ansprüchen genügt - ich will das scripting soweit es geht zu minimieren.

          Aber danke für deine Hilfe!

          @suit: Verdammt, ich habe keine Ahnung ... die Suche funktioniert gerade nicht ... ich hatte den Gedanken schon vorher, ja ...

          ... Bin ich schon so verwirrt dass ich mich nicht mehr daran erinnere? Noch schlimmer, ich bin wohl so verwirrt dass ich dir eher glaube als mir! Sorry wenn's wirklich ein Doppelpost war - ich schiebe es auf meinen Geisteszustand, der entschuldigt sich dann evtl. später auch nochmal, wenn er sich normalisiert hat ...

    2. Hallo Felix,

      [...] um zuerst in der Breite alles auszufüllen, und erst dann bei Bedarf auch in die Länge zu gehen. Das entspricht sehr unseren Lesegewohnheiten. Wir schreiben so auch auf Papier!

      bei Fließtext, ja. Was Dr.Colossos beschreibt, ist aber ein klassisches Mehrspalten-Layout mit automatischem Spaltenfluss, wie es eigentlich jedes Textverarbeitungssystem kennt - und jeder von uns aus Zeitungen und Zeitschriften. Nur dass er hier nicht Fließtext in den Spalten unterbringen will, sondern eine Aufzählung.

      Eine senkrecht sortierte Liste entspricht auch unserer Lesegewohnheit, da wir spaltenweise angeordnete Inhalte besser überschauen können. Das ist mit der Grund, warum bei Tabellen die Überschriften in der Rgel in der ersten Zeile stehen.

      Jetzt widersprichst du deiner eigenen Einleitung. Im ersten Absatz hast du noch betont, dass von links nach rechts, also "zuerst in der Breite", die bevorzugte Leserichtung wäre (was bei Fließtext ja auch stimmt). Jetzt sagst du, dass spaltenweise angeordnete Elemente eher der Gewohnheit entsprechen (und da stimme ich dir bei Listenelementen auch zu).

      Du willst nun diese zwei Dinge kombinieren, die nur dann kombinierbar sind, wenn eine Dimension fest vorgegeben ist. Also entweder legst Du die Breite der Liste fest und notierst im Prinzip bis zu drei Listen, oder Du legst die Höhe fest und definierst entsprechend davon abhängig beliebig viele Spalten.

      Genau. Und bei spaltenweise sortierten Einträgen ist keiner der beiden Ansätze mit reinem HTML&CSS zu machen, wenn die Menge an Information (die Anzahl der Listenelemente) variabel bleiben muss - oder irre ich mich?

      Sowohl Höhe als auch Breite variabel zu haben, ist mit den reinen CSS-Mitteln nach meinem Wissen nicht möglich. Hier müsste ich zu JavaScript greifen, um so dynamisch die verfügbare Höhe zu ermitteln und darauf basierend dann die Anzahl der Spalten zu generieren.

      Genau.
      Ich konnte nur deiner Argumentation nicht folgen - du fängst mit Lesegewohnheiten an, kommst dann auf die technischen Möglichkeiten, und stellst fest, dass die Aufgabe so nicht lösbar ist.

      So long,
       Martin

      --
      In Ägypten haben früher 150000 Leute 35 Jahre lang an einer Pyramide gearbeitet. Aber bei uns arbeiten doppelt so viele Leute doppelt so lange allein an der Baugenehmigung.
        (Dieter Nuhr, deutscher Kabarettist)
  2. <div style="hoehen_beschraenkung">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
    </ul>
    <div>

    ... soll in etwa so aussehen ...

    1  4  7
    2  5  8
    3  6  9

    kommt mir bekannt vor? hatte da gunnar nicht letzten gesagt, du sollst das ding in mehrere listen aufteilen?

  3. Hallo,

    1  4  7
    2  5  8
    3  6  9

    Wenn Du schon weisst, wie sich Deine Listenpunkte verteilen sollen, könnte es vielleicht mit „bösen“ Präsentationsklassen gehen, wie in diesem Artikel in Methode 4 aufgezeigt.

    Solltest Du eventuell das Glück haben, aus irgendeinen Grund nur sehr moderne Browser voraussetzen zu dürfen, dann könntest Du schon einen im Sinne von CSS 3 richtigen Weg beschreiten: CSS 3 Multi-column layouts. Derzeit werden diese noch mit Hersteller-Präfixen versehen in Safari 3 und in Firefox 3 unterstützt.

    (drückt mal STRG-O und ihr wisst was ich meine [..]

    Ergibt einen Zeilenumbruch im Textfeld hier. ;)

    Tim

    1. Hi Tim,

      feiner Link. Ich hab ihn mal "ge-bookmarked".

      Ob es eine (akzeptable) Lösung ist, wage ich zu bezweifeln, da ja der Container in dem meine Dateiliste ist in der Größe veränderbar sein soll.

      Ergo müsste ich die Positionen wieder alle neu berechnen, was ich mir angesichts des Nutzens vom Arbeitsaufwand her nicht antun will.

      Aber danke sehr für deine Hilfe ... wenn mir mal langweilig is probier ich's evtl. mal ...

      CSS3 könnte ich voraussetzen, gäb's da nicht noch den IE ...