Comment placer des images côte à côte dans un Site (Créer un compte)

Bonjour,

Pouvez-vous préciser où (sur quelle page) peut-on trouver les images que vous montrez en pj?

On peut effectivement utiliser le CSS. Le premier code (page-id-64…)correspond à la page « vidéos », le deuxième (#post-5759…)  à la page « lithos ».

.page-id-64 .entry-content .entry-content.clearfix{display:inline-flex;
	gap:30px;	
}

#post-5759 .entry-content p{display:inline-flex;
	gap:30px
}

Bonjour,

Dès que vous faites une modification importante (même ajouter une légende) ça perturbe les CSS. Cela se comprend: les CSS ne sont que de la mise en forme d’éléments et si vous modifiez ces éléments les CSS ne sont plus valables. C’est comme si on vous demandait de préparer un maquette pour un catalogue des œuvres de Raphaël Toussaint puis qu’on vous dise « tout compte fait, non, ce sera Manet ».

Par exemple, dans le code précédent,

#post-8640 .entry-content p{
  display: flex;
  flex-flow: row wrap;
	gap:10px;	
}

la disposition en « flex » sera appliquée aux éléments de premier niveau*  dans les paragraphes (p) contenus dans la section ayant pour nom .entry-content, elle même contenue dans l’article ayant pour identité 8640.

* premier niveau: venant immédiatement après.

Auparavant, il n’y avait pas de problème : il n’y avait qu’un paragraphe, les éléments de premier niveau étant les images (je simplifie un peu) et les CSS correspondaient à cette situation.

Maintenant, ce n’est plus le cas pour les images auxquelles vous avez ajouté des légendes.  Elles ne sont plus au premier niveau dans un paragraphe. Elles sont contenues dans des  » figures » (image + légende) et surtout ces figures ne sont plus contenues dans un paragraphe. Vous pouvez d’ailleurs constater que le code précédent s’applique toujours aux images non modifiées mais pas aux autres.

En conclusion: Si vous modifiez les éléments auxquels s’appliquent les CSS, elles ne sont plus valables. Le mieux est d’enlever le code CSS que je vous avais donné et de faire les modifications voulues sur toutes les images, sans vous occuper de la présentation finale. Quand ce sera fait et qu’aucune modification (autre que de forme) des éléments nous verrons ce qu’il est possible de faire en CSS. Si vous pouviez déjà inclure toutes ces figures et les titres (Vidéos de Laurent Guiller -…) dans un paragraphe unique ce serait bien.

Si ce n’est pas clair, n’hésitez pas à demander des explications.

Voici les résultats. En pièce jointe, à gauche, si l’on applique simplement le code précédent. Comme vous le voyez, ce n’est pas du tout satisfaisant. L’ajout de titres perturbe tout et il est impossible de faire mieux simplement. Par contre, il est possible (mais pas simplement), d’obtenir ce qui est à droite dans la pièce jointe et qui me semble correct comme présentation. Cepandant la méthode a des limites et impose, une fois la mise en page faite,  de ne rien changer à votre série d’images: ne pas ajouter d’images et ne pas changer d’images sinon les CSS ne seront plus valables.

Je vois trois possibilités:

• Utiliser la méthode telle qu’elle est actuellement, avec les limitations mentionnées.
• Utiliser cette méthode en l’améliorant, ce qui permettrait de lever les limitations (il serait possible de modifier ou d’ajouter des images). Pour cela il faudrait que vous ajoutiez une classe à chacun des paragraphes titres afin de pouvoir les distinguer en CSS. Par exemple au lieu de <p><span style= »font-size: 20px; color: #ff0000; »>Vidéos de Laurent Guiller -7 avril 2023</span></p> écrire  <p class = »avril« ><span style= »font-size: 20px; color: #ff0000; »>Vidéos de Laurent Guiller -7 avril 2023</span></p>. Pareil pour les autres titres. C’est facile à faire.
• Et pour finir, sans doute le plus simple: pourquoi ne pas utiliser, au lieu d’une longue liste de photos, des galeries (une par série d’images).

Tenez-moi au courant.

De