Div-Elemente wie Desktop-Symbole anordnen

ntpnexus

Grünschnabel
Hallo :)

Ich bin gerad dabei etwas mit CSS rumzuspielen (*g*) und habe nun beliebig viele Div-Elemente. Da ich eine Art "Desktop" nachbaue würde ich gerne die Elemente wie auf einem Windows-Desktop anordnen, sprich von links oben beginnend immer einzelne Spalten füllend bis unten rechts (von oben nach unten, von links nach rechts). Dies entspricht ja dann der automatischen Icon-Anordnung bei Windows. (Ich denke jeder hat dies schonmal beobachten können)

Derzeit bin ich soweit dass ich meine Elemente in Reihen anordnen kann von links nach rechts, von oben nach unten, hätte das ganze aber gerne in Spalten wie oben beschrieben.

Meine Div-Elemente befinden sich alle in einem großen Div-Element. Jedem Einzel-Element habe ich folgende Eigenschaften zugeordnet:

HTML:
div#icons div
 {
   margin: 10px; padding: 6px; border: 1px solid lightgrey; float: left; height: 50; width: 50
}

Ist es möglich was ich vorhabe? Hat jemand vielleicht eine Idee durch welche Eigenschaften ich das gewünschte Verhalten erreiche?

Danke und Gruß
Markus
 
Ich glaube, das ist eine Sache, an der sich schon viele Leute probiert haben...weniger wegen des "Desktops", sondern vielmehr, um Text gleichmässig in Spalten zu verteilen.

Eine Lösung dazu ist mir noch nicht untergekommen....ich hab mal gehört, dass in CSS3 dazu etwas geplant ist, mehr weiss ich allerdings dazu nicht. :(
Ohne Javascript sehe ich da keine Möglichkeit
 
Zuletzt bearbeitet:
Hi,

ich kann dir leider ebenfalls keine gebrauchsfertige Lösung anbieten, aber ich vermute, dass sich dein Vorhaben nur unter dem Einsatz eines Scripts umsetzen lässt, denn die "Icon"-DIVs müssten auf einzelne DIVs verteilt werden, die zunächst mal die Spalten von links nach rechts erzeugen, um darin dann untereinander angeordnet zu werden.

Das Script müsste überprüfen, ob die Spalte vollständig befüllt ist, und wenn ja, alle nachfolgenden Icons in der nächsten Spalte aufnehmen.

Von daher ist deine Anfrage wohl besser im Javascript-Board platziert. ;)
 

Neue Beiträge

Zurück