[Résolu] Galerie avec display:inline-block et marges entre éléments

Bonjour à tous

Je travaille sur une galerie d'éléments insérés dynamiquement dans la page (via SPIP).
Après plusieurs essais, j'ai préféré utiliser la propriété "display:inline-block" afin de gérer le positionnement des éléments, plutôt qu'un "float" qui aurait été un peu moche (détourné de son utilisation normale).

Mon problème maintenant, est que je désire que pour chaque ligne d'éléments, seuls l'élément du milieu possède des marges latérales, afin que les contenus soient collés sur les bords gauche et droite du conteneur.

Je ne trouve pas de solution à mon problème et suis même en train de me demander si cela est possible avec display:inline-block



Mon dernier essai: utiliser le selecteur '+' pour donner une margin-left uniquement aux éléments qui suivent le premier élément.
Mais du coup, évidement, ça ne fonctionne que s'il n'y a qu'une ligne de contenus...

Merci d'avance si vous avez une petite idée pour résoudre ce soucis. Parce que moi, je sèche.
Modifié par Optarion (17 Feb 2012 - 17:57)

Bonjour,

Que tu travailles avec display:inline-block ou avec float, le même problème se pose en fait.
Si tu veux appliquer des marges uniquement à l'élément du milieu, il faut utiliser un sélecteur CSS3 qui va bien: la pseudo-classe :nth-child(). Quelque chose comme :nth-child(3n+1) ou :nth-child(3n+2).

Petit souci avec :nth-child(): pas compatible IE 7-8. Du coup tu voudras peut-être passer par des classes sur tes éléments. Autre solution possible: ruser un peu avec les marges. Deux exemples possibles:

/* Ménager un espace à droite */
#conteneur {
  margin-right: -10px;
  }
#conteneur > * {
  margin-right: 10px;
  }

/* Ménager un espace de chaque côté */
#conteneur {
  margin: 0 -5px;
  }
#conteneur > * {
  margin: 0 5px;
}

J'avais pensé à une technique avec marges négatives mais je trouvais pas ça très beau.

Du coup, visiblement, il n'y a pas le choix. Dommage que :nth-child() ne soit pas géré par IE 8...

Donc j'ai suivis ton conseil est réessayé avec des margin-right.

Étrangement, je me retrouve dans l'impossibilité de mettre une margin-right de plus de 4px sans quoi le 3ème élément de chaque ligne est chassé à la ligne suivante.
Sachant que mon conteneur est en width:100% (soit 974px), que chaque élément a une width:318px, chaque marge entre les blocs devraient être de (974-(3*318))/2=10px...

En plus, il y a le problème de marge automatique de -.25em avec les éléments inline-block si je ne m'abuse...

Et mon conteneur n'a ni padding ni margin autre que j'essaye d'utiliser

J'ai finalement trouvé comme un grand...

Il fallait bien évidement agrandir le conteneur du nombre de px de la marge. Pour prendre en compte les 3 éléments de la ligne ainsi que 3 marges, et non 2. Tout en prenant aussi en compte le .25em de marge auto des inline-block. Donc c'est un code tout pas beau mais ça fonctionne.

Je suis néanmoins preneur si quelqu'un a une superbe idée pour faire la même chose sans passer par des marges négatives. Parce que ça va m'obliger à ajouter pas mal de marges dans tous les éléments contenus dans le conteneur...

Merci pour toute votre aide!

Bisoux
Modifié par Optarion (17 Feb 2012 - 15:02)

Je pense à quelque chose.
Si :nth-child() ne fonctionne pas, peut être pourrais-je utiliser les propriétés counter?

Mais j'ai un peu regardé et je ne capte pas bien le concept du coup, peut être l'un d'entre vous pourrait-il me dire si ça peut servir avant que je ne me lance dans une machine à gaz... :s

Optarion a écrit :
Tout en prenant aussi en compte le .25em de marge auto des inline-block.

J'ai envie de dire qu'avec float plutôt que display:inline-block tu n'aurais pas ce problème.
Sinon dans les techniques possibles pour supprimer le caractère espace entre deux éléments en display:inline-block (caractère qui ne fait pas nécessairement pile .25em), on peut:
- ne pas avoir d'espaces ou retour à la ligne entre les balises dans le code;
- définir une taille de texte à zéro sur le parent, et rétablir la bonne taille de texte sur le contenu.
Aucune des deux solutions n'est idéale à mon sens. C'est la principale limite à l'utilisation de display:inline-block.

Optarion a écrit :
Parce que ça va m'obliger à ajouter pas mal de marges dans tous les éléments contenus dans le conteneur...

Tu n'as pas un conteneur rien que pour ta liste? Genre un DIV ou un UL? Rien ne t'oblige à définir les marges négatives sur un conteneur global qui regroupe tout un tas d'éléments, bien entendu.

Optarion a écrit :
Si :nth-child() ne fonctionne pas, peut être pourrais-je utiliser les propriétés counter?

Fausse piste.

Merci pour toutes ces bonnes idées.