[RESOLU] Flux d'une liste

Bonjour,

Ne sachant pas nommé mon problème, il m'est difficile de chercher des informations sur ce que je vais vous décrire:

J'ai une liste d'éléments et j'aimerai l'afficher sur plusieurs colonness dans une fenêtre (div) de grandeur fixe de cette manière:

***************************
* Item1 | Item4 | Item7 | Item10 *
* Item2 | Item5 | Item8 | *
* Item3 | Item6 | Item9 | *
***************************

Pouvez-vous m'indiquer si c'est possible, comment se nomme se problème ou si vous avez un
début de solution à mon problème?

J'aimerai ne pas utiliser un tableau.

Merci d'avance
Modifié par jowo (11 Mar 2010 - 08:55)

Bonjour,

En CSS3 ce sont les propriétés column-* (column-count, column-width, column-gap...). Pas des masses implémenté dans les navigateurs.

Donc ici la solution serait de regrouper manuellement tes groupes d'éléments. Tu peux avoir 4 DIV, les premières contenant trois éléments et la dernière un seul élément. Ça se gère côté serveur (en PHP ou autre langage), en utilisant une fonction modulo (attention, c'est des maths).
Ensuite tu peux afficher tes DIV en colonnes en utilisant float ou display:table-cell par exemple.

Merci pour tes explications.

Mon petit schéma était un exemple. J'ai un nombre inconnu d'élément à afficher (une liste <ul> avec quelques arborescences). La seule donnée que je possède est la largeur de ma fenêtre d'affichage.

Alors on va chercher une autre solution.

Gecko 1.8 For Web Developers: Columns
[http://weblogs.mozillazine.org/roc/archives/2005/03/gecko_18_for_we.html]

Avec un nombre inconnu d'éléments tu peux justement utiliser le langage côté serveur utilisé par le site (probablement PHP, peut-être ASP ou Python ou Ruby...) pour répartir tes éléments dans quatre ensembles. Est-ce que tu bloques sur la partie programmation côté serveur?

Nous avons un autre composant pour afficher l'information. Le problème est résolu.

Merci pour ton aide Florent, la partie programmation côté serveur est mon point fort.
Modifié par jowo (11 Mar 2010 - 08:55)