Colonnes sans "Div" conteneur... Possible ou pas ?

Salut à tous !

Voilà je cherche à réaliser quelque chose de particulier, mais je ne sais pas si c'est réalisable ou non, en CSS :

Je souhaite créer des colonnes (contenues dans un bloc général), chacune contenant 5 Div alignées verticalement. En gros je veux obtenir quelque chose comme cela à l'affichage :

(colonne 1) | (colonne 2) | (colonne 3) | <-- Cette ligne n'est pas affichée, c'est juste une indication

Div 1 | Div 6 | Div 11 |
Div 2 | Div 7 | Div 12 |
Div 3 | Div 8 | Div 13 |
Div 4 | Div 9 | Div 14 |
Div 5 | Div 10 | Div 15 |

... le hic, c'est que le code XHTML doit impérativement se présenter ainsi :

<div id="conteneur">
<div>Div 1</div>
<div>Div 2</div>
<div>Div 3</div>
<div>Div 4</div>
<div>Div 5</div>
<div>Div 6</div>
<div>Div 7</div>
<div>Div 8</div>
<div>Div 9</div>
<div>Div 10</div>
<div>Div 11</div>
<div>Div 12</div>
<div>Div 13</div>
<div>Div 14</div>
<div>Div 15</div>
</div>

Comme vous l'avez compris, je ne veux pas faire des groupes de 5 div pour séparer les colonnes, je veux que dans mon code toutes les div soient à la suite...

Réalisable ou pas ? J'essaie de trouver des solutions depuis tout à l'heure mais sans grand succès...

Merci d'avance pour votre aide !
@ bientôt

Est-ce que tes données ne serait pas tabulaire ? Dans ce cas-ci, ne faudrait-il pas utiliser une <table> ? Parfois, il est sémentiquement justifié d'utiliser cette balise.

Salut et merci pour ta réponse

Hé non mes données ne sont pas tabulaires, et l'utilisation d'un tableau dans mon cas ne serait pas du tout approprié.
De plus, il se peut que ma dernière colonne ne contienne par exemple que 2 éléments, il n'y en aura pas forcément 5...

@++

Bonjour,

Je suis plutot d'accord avec Antoine Cailliau , il serait ici utilise d'utiliser un tableau.

Sinon pour répondre a ta question tu pourrai faire des class css qui position t'es éléments, c'est l'aborieux et chiant , mais je ne voit pas d'autre solution.

Donc sa te donnerai quelque chose qui resemble a sa :

#conteneur
{
  // dimension du conteneurs via width et height

}

.ligne1
{
   margin-letf:1px;
   padding-top:1px;
}

.ligne2
{
   margin-left:1px;
   padding-top : 11px; // dans le cas ou ta cellule fait 10px de hauteur !
}

..etc

<div id="conteneur">
<div class="ligne1">Div 1</div>
<div class="ligne1">Div 2</div>
<div class="ligne1">Div 3</div>
<div class="ligne2">Div 4</div>
<div class="ligne2">Div 5</div>
<div class="ligne2">Div 6</div>

...etc
</div>

Modifié par FunK (27 Mar 2008 - 15:41)

À priori ça ne peut pas marcher. Il va falloir regrouper les éléments dans des blocs (div ou td) pour les placer ainsi.

FunK: j'ai l'impression que ton début de solution ne mènera nulle part. Mais je peux me tromper, et n'hésite pas à proposer une page de test complète si tu arrives à quelque chose de satisfaisant.

Ou sinon on pourrai créer un class pour chaque ligne afin d'y inserér un tableau de 3 <td> ( on peut aussi résonner en colonne )

J'essayerai de mettre dans en forme des que je rentre chez moi

L'idée de Funk me parait pas mal, en tout cas il m'a mis sur une bonne piste :

C'est sur que ca va être un peu laborieux, mais pour chaque div je vais appliquer un "position:relative" et modifier le "top" et "left".
De toutes façons je génère mon code XHTML en PHP... Donc c'est possible d'automatiser tout cela sans trop de prise de tête (j'espère)

En espérant que ca fonctionne !
Merci à tous pour vos réponses.

Bonjour,

S'ils ont une hauteur fixe (sinon une couche de CSS en plus et ça roule) :
Un div contenant qui contient les 5 premiers, avec un "height" fixe, et ces 5 là qui sont en float: left.

Et voilà

Voir par exemple sur cette galerie photo.

SiDi a écrit :
Bonjour,

S'ils ont une hauteur fixe (sinon une couche de CSS en plus et ça roule) :
Un div contenant qui contient les 5 premiers, avec un "height" fixe, et ces 5 là qui sont en float: left.

Et voilà

Voir par exemple sur cette galerie photo.

Et non car sur ton exemple, les vignettes sont affichées de gauche à droite, puis de haut en bas.
Mais moi je veux les afficher D'ABORD de haut en bas, PUIS de gauche à droite...

Concrètement, tu veux représenter quoi comme donnée ?

Dans ce cas, c'est bien sur la dernière colonne (et non ligne) qu'il peut y avoir moins de 5 éléments?

mrprout a écrit :
C'est sur que ca va être un peu laborieux, mais pour chaque div je vais appliquer un "position:relative" et modifier le "top" et "left".

Hmm... non seulement c'est laborieux, mais en plus c'est une bêtise. À oublier.

mrprout a écrit :
De toutes façons je génère mon code XHTML en PHP... Donc c'est possible d'automatiser tout cela sans trop de prise de tête (j'espère)

Alors tu devrais pouvoir générer sans peine un tableau de trois cellules ou trois div, avec les bons contenus dans chaque. Une petite boucle et un peu de modulo, et c'est dans la poche.

Bricoler une solution CSS peu fiable quand ça peut être aussi simple, c'est vraiment chercher les ennuis.

SiDi a écrit :
Dans ce cas, c'est bien sur la dernière colonne (et non ligne) qu'il peut y avoir moins de 5 éléments?

Exact, c'est ce que je dis dans ma réponse de 15h35... J'ai dis le contraire ailleurs ?

Antoine Cailliau a écrit :
Concrètement, tu veux représenter quoi comme donnée ?

C'est pour afficher le contenu d'un panier, mais l'affichage est particulier car il est traité avec des effets script.aculo.us, et on ne doit pouvoir qu'une colonne à la fois. En cliquant sur un bouton, on déplace la div conteneur de gauche à droite (ou inverse) pour afficher les autres produits. C'est pour cela qu'il fallait respecter une logique d'affichage (les un en dessous des autres, dans l'ordre avec lequel ils ont été ajoutés au panier).

Florent V. a écrit :

Hmm... non seulement c'est laborieux, mais en plus c'est une bêtise. À oublier.


Alors tu devrais pouvoir générer sans peine un tableau de trois cellules ou trois div, avec les bons contenus dans chaque. Une petite boucle et un peu de modulo, et c'est dans la poche.

Bricoler une solution CSS peu fiable quand ça peut être aussi simple, c'est vraiment chercher les ennuis.

Oui pour générer un affichage lors du chargement de la page, il aurait été effectivement aisé de faire un tableau HTML généré en PHP.
Mais ce que je n'ai pas dit, c'est que certaines div contenues dans les colonnes peuvent être ajoutées ou supprimées avec Javascript (donc sans rechargement de la page).
C'est pour cela qu'il est largement plus simple de se passer de tableaux dans ce cas, sinon ce serait un vrai merdier à gérer.
Modifié par mrprout (27 Mar 2008 - 16:30)

Salut, est-ce que tu connais la largeur de tes div. Sinon, tu peux les faire flotter et imposer une largeur à ton parent. Elles passeront à la ligne quand la largeur est atteinte.

Antoine Cailliau a écrit :
Salut, est-ce que tu connais la largeur de tes div. Sinon, tu peux les faire flotter et imposer une largeur à ton parent. Elles passeront à la ligne quand la largeur est atteinte.

Oui, je connais la largeur de mes div. Mais comme je disais, le nombre de ces div est variable, et du coup la largeur du parent est elle aussi variable...

De plus, comme je disais également, je veux D'ABORD afficher les div de haut en bas PUIS de gauche à droite. Or, ta proposition en rapport avec "float" me les afficherait ligne par ligne... Mais je veux bel et bien les afficher par colonnes... Je suis chiant hein ?
Modifié par mrprout (27 Mar 2008 - 16:54)

Calcule le nombre d'éléments (donc nombre par colonne), puis par PHP c'est simplissime.

Un contenant de width "GlobalWidth/5", avec des blocs qui se placeront les uns après les autres dedans, puis un autre contenant, etc, etc.

Tous les contenants en float:left.

mrprout a écrit :

Je suis chiant hein ?

Oui Le problème est que cet ordre est contraire à un flux normal d'affichage.

Bonne chance quand même

Tant que les données sont en ordre dans le flux de la page, je considère que ça n'a rien de "contraire". C'est peu ergonomique, par contre

Bon même s'il n'y a pas de réelle solution - en tout cas de solution officielle - pour mon problème, je remercie tout le monde d'avoir participé à ce topic

@ bientôt !
Modifié par mrprout (27 Mar 2008 - 18:21)