Positionner des vignettes de droite à gauche verticalement

Bonjour,

J'ai des vignettes automatiques qui s'affichent sur mon site dynamique avec 2 colonnes de 4 vignettes.

J'aimerai qu'elle s'affichent dans l'ordre DROITE GAUCHE

ainsi si on prend un tableau s'il y a 3 vignettes
(0 signifie pas de vignette), l'affichage voulu est:

01
02
03
00

ainsi si on prend un tableau s'il y a 4 vignettes

01
02
03
04

s'il y a 6 vignettes

51
62
03
04

8 vignettes

51
62
73
84


Je n'arrive pas à trouver une solution en CSS pour que mes vignettes s'affichent dans cette ordre là... une idée ?
J'avais pensé au départ faire 2 colonnes mais je n'ai pas la possibilité de contrôler ma requête pour afficher les 4 premières à droite et les 4 suivantes à gauche, j'ai simplement une boucle qui se répète autant de fois qu'il y a de vignettes.

Merci par avance à ceux qui m'aideront !!

Cotp
Modifié par Cotp (14 Jan 2012 - 14:14)

Salut,

Sympathique petit problème !

J’ai deux solutions pour toi, mais un peu expérimentales (à défaut de ne pas pouvoir bosser côté serveur) :

– à l’aide des colonnes CSS : http://jsfiddle.net/htmlzengarden/U3HtZ/ ;
– à l’aide des du sélecteur nth-child : http://jsfiddle.net/htmlzengarden/M6b44/

Direction http://caniuse.com/ pour savoir ce qui sera acceptable ou pas.
Modifié par Vincent Valentin (14 Jan 2012 - 21:56)

Bonjour,

Il est aussi possible d'utiliser un compteur dans la boucle. C'est facile, efficace et intéropérable.

salut...

mmmmh tu dis site dynamique ??? donc remontée php ?

je verrais bien la colonne de droite en float:right;
celle de gauche, devine oui en float:left;

et dans la construction par la boucle

$i=0;
while(patatipatata) // je met un while mais bon for ou foreach aussi [cligne]
{
    if($i<4)
    {
         print "imageX"; // ici on remplit le div en float right
         $i++;
    }else
    {
        print "imagex";  // ici on remplit le div en float left
        $i++;
    }
}

Voici ma suggestion en CSS:

http://jsfiddle.net/vaxilart/NYrVj/17/

Une solution qui passera ie 7 et plus. Mais un peu comme les solutions de Vincent, ce ne sera pas flexible dans le cas où plus ou moins de 8 blocs prévu (pas nécessairement remplis) au total seront disponibles.
Modifié par Vaxilart (15 Jan 2012 - 07:32)

Merci à tous pour toutes vos réponses,

ça fait vraiment plaisir que ce sujet intéresse. J'ai testé chacune des solutions décrites.

J'ai testé la solution php de pchlj qui marche bien mais le problème c'est que j'utilise des boucles dans un système à la SPIP et je n'ai pas vraiment possibilité de compter les résultats (du moins je ne crois pas il faudrait que je vérifie).

Du coup je suis parti sur la solution de Vincent Valentin:

J'ai fait un test sur deux colonnes de 7 vignettes que j'ai mis en ligne ici:
http://cotp.free.fr/alsacreations/testdroitegauche.html
Le css est ici:
http://cotp.free.fr/alsacreations/testdroitegauche.css

Maintenant cela passe bien sur Firefox et Chrome mais je n'arrive pas à le faire marcher sur IE (IE9 sur ma machine). Une idée ? Dois-je faire une feuille de style spéciale pour IE ou un hack?

Est-ce que ta solution Vaxilart est plus compatible du coup ?


Merci par avance pour votre aide en espérant que ça en aidera d'autres

Cotp

Si tu es sur SPIP tu as les balises suivantes :

#COMPTEUR_BOUCLE

et mieux encore [(#COMPTEUR_BOUCLE|modulo{4})]

Aurélien

Aurelien A. a écrit :
Si tu es sur SPIP tu as les balises suivantes :

#COMPTEUR_BOUCLE

et mieux encore [(#COMPTEUR_BOUCLE|modulo{4})]

Aurélien

En fait je ne suis pas sur SPIP mais dans un autre CMS de boutique en ligne avec un langage de boucles. J'appelle une fonction qui utilise plusieurs critères de séléction pour rappatrier des produits et je ne suis pas sûr de pouvoir écrire la boucle que j'arrive à faire marcher en php.

J'ai réussi à l'intégrer avec le système de Vincent Valentin en dynamique alors si quelqu'un a une idée sur comme résoudre le pb d'IE ça m'aiderait vu que ça marche maintenant sous Chrome et Firefox...

Cotp
Modifié par Cotp (16 Jan 2012 - 17:35)

Comme je te disais, si tu vas voir sur http://caniuse.com/multicolumn/embed/ tu verras que ces propriétés CSS ne fonctionnerons pas avec IE<10.

Tu devrais je pense suivre les conseils de tout le monde et trouver le moyen de résoudre ça côté serveur, c’est sans doute possible.

Vincent Valentin a écrit :
Comme je te disais, si tu vas voir sur http://caniuse.com/multicolumn/embed/ tu verras que ces propriétés CSS ne fonctionnerons pas avec IE&lt;10.

Tu devrais je pense suivre les conseils de tout le monde et trouver le moyen de résoudre ça côté serveur, c’est sans doute possible.

Ah oui c'est bien dommage car je l'aimais bien cette solution

Bon du coup je m'en suis sorti en faisant 2 boucles et en suivant la solution de pchlj à savoir float left et float right tout simplement...

Merci à ceux qui m'ont aidés sur ce sujet.