Box-Positionierung

[UzumakiNaruto]

Hi,

ich möchte gerne eine normale liste in schönen kleinen Boxen (wenn möglich sogar mit Pfeilen) darstellen.

Man kann sich das als "Kunden werben Kunden" oder "die Baumstruktur von einem Forum" vorstellen.

Wie ich die Box an sich gestalte ist mir klar, aber wie soll ich jetzt dynamisch die Positionen darstellen?

Einfach alles von links nach rechts ist blöd, da man ja irgendwann scrollen müsste.

Habt ihr da irgendwelche Ideen wie man das schön darstellen könnte ohne das es 100.00 Pixel weiter rechts endet?

normale Liste

user1
-user2
--user3
---user4
user5
-user6
--user7
user8
-user9
-user10
-user11
--user12
--user13

[AmicaNoctis]

Hallo,

aus deiner Frage geht leider nicht genau genug hervor, wie diese Boxen aussehen sollen und was für Pfeile du meinst. kannst du vielleicht ein kleines Bildchen scribblen und anhängen, auf dem man sieht, wie du es meinst?

Gruß,

Anja

[UzumakiNaruto]

wie die box an sich aussehen soll ich ja bei dem problem egal .. und wie meine pfeile aussehen sollen

ich möchte einfach nur den usernamen in einer kleinen "box" haben (display:block; border:1px #000 solid und dann die zusammengehörigen boxen verbinden, damit der beobachter sieht welcher user zu welchem user gehört

[AmicaNoctis]

Es ist insofern nicht egal, dass niemand außer dir weiß, was du haben willst. Boxen kann man in vielerlei Art darstellen. Was aber immer noch niemand weiß, ist, was die Pfeile dann machen sollen und wie die einzelnen Boxen zueinander in Verbindung stehen. Soll es aussehen wie ein Mengendiagramm, also dass die Boxen verschachtelt sind oder ist das mit den Pfeilen so zu verstehen, dass jeder seine alleinstehende Box hat und die Zuordnung mit Pfeilen erfolgt, wie z. B. bei einem UML Klassendiagramm oder bei einem ERD?

Wenn du hier schon Hilfe haben willst, solltest du vielleicht auch auf Rückfragen eingehen und nicht mit so einem hingerotzten "ist doch egal" antworten, nur weil wir leider nicht hellsehen können.

Daher vermutlich auch meine offensichtlich abwegige und verblödete Idee, das vielleicht einfach als Skizze zu veranschaulichen. Aber das wäre ja viel zu einfach, da wüsste ja jeder sofort, wie du es meinst.

[UzumakiNaruto]

das ist es ja gerade.

es soll so aussehen das es übersichtlich bleibt
das ist immer von fall zu fall unterschiedlich

hat ein user 10 leute geworben soll es anders aussehen als wenn einer nur einen geworben hat.

diese beiden personen brauchen ja auch einen ganz anderen platz um ihre beziehungen darzustellen.

ein matrix-diagram kommt da auf keinen fall in frage

auch wollte ich dir nicht trotzig erscheinen .. nur ich ging davon aus das du das reihne aussehen einer box wissen wolltest und nicht die anordnung der boxen.

ich frage zum einen ja nach der anordnung und der "programmierung" in html um es so gut wie möglich und so einfach wie möglich abzubilden.

[wahsaga]

hat ein user 10 leute geworben soll es anders aussehen als wenn einer nur einen geworben hat.

Und wie ...?
Dazu kommt von dir immer noch nichts brauchbares!


Dann mach doch jetzt mal eine Skizze; zum Beispiel für die beiden Fälle, die du gerade genannt hast - ein Nutzer der 10 Leute geworben hat vs. einen, der nur eine Person geworben hat.

[AmicaNoctis]

OK, ein Matrix-Diagramm macht wirklich keinen Sinn, das ist klar, aber leider weiß ich immer noch nicht, was es dann sein soll. Ich mach mal zwei Vorschläge, vielleicht verstehst du dann, dass ich im Moment noch gar keine Vorstellung von dem hab, was dir im Kopf rumschwirrt:

a) verschachtelt, also eine Art Datei:Tree Map.png ? Wikipedia
b) assoziiert, also eine Art Datei:Organigramm.png ? Wikipedia oder Datei:Er-diagramm.svg ? Wikipedia

Welches trifft eher zu?

[AmicaNoctis]

Nur schonmal vorab, unabhängig von der Art des Diagramms (dass es eine Art Diagramm werden soll, nehme ich inzwischen einfach mal an):

Einen Diagrammgenerator in HTML (und CSS) zu bauen ist alles andere als trivial und HTML ist dafür eigentlich auch nicht geeignet. Das heißt nicht, dass es unmöglich ist, aber eventuell ist SVG oder eine servergenerierte Grafik da der bessere Ansatz.

Jedenfalls wäre das ein Projekt, was man nicht mal so in 2-3 Stunden abhandelt.

[UzumakiNaruto]

wenn ich mir das so überlege und nachdem ich mir die bilder da angeguckt habe .. da finde ich ist ein stammbaum am besten
da könnte man auch am besten die chronologische reihenfolge abbilden.

im moment hole ich mit php die daten aus der mysql db.

und das dies nicht nur 2-3 h dauert war mir vorher schon klar .. aber ich will ja auch was lernen, also alle tipps her die ihr habt ;-)

[AmicaNoctis]

Hallo,

ich hatte gerade angefangen, hier reinzuschreiben, wie man einen solchen Stammbaum automatisch layouten kann, also eine Art Algorithmus. Der Text wurde immer länger, obwohl ich ihn mit den Worten "einfacher und effektiver Ansatz" beschrieben hatte (was eigentlich auch stimmt).

Irgendwann kam ich zu dem Punkt, wo ich mehrere Variablen deklarieren musste und erläutern wollte, wie sie sich wann verändern. Das wäre sicher bald in eine Art Pseudocode übergegangen. Da wurde mir klar, dass ich es schneller programmiert als erklärt hätte. Du wolltest ja aber nur Ideen sammeln und ich will aber auch keinen Code verschenken, der dann möglicherweise gewinnbringend verkauft wird. Daher halte ich mich diesbezüglich erstmal zurück, bis konkrete Fragen auftauchen.

Eine Idee hätte ich aber noch: Aus Gründen der Barrierefreiheit würde ich im HTML-Code erstmal nur auf verschachtelte Listen zurückgreifen und diese beim Laden durch einen JavaScript-generierten Stammbaum ersetzen.

Wo soll denn eigentlich die Wurzel sein (oben, links, unten)? Ich würde links empfehlen, wenn es um Namen von Personen geht, sonst wird das ganze zu sehr in die Breite gespreizt und wer scrollt schon gerne horizontal?

Gruß,

Anja

[UzumakiNaruto]

es ist nur eine übung für mich ... da wird nichts von verkauft

mich interessiert nur die art des designs. ich dachte dabei an das style-tag ... da man dort am einfachsten eine box nach links/rechts verschieben kann.

sollten konkretere fragen auftauchen werde ich schon schreien .. erstmal danke für eure unterstützung