[RÉGLÉ] Impossible d'aligner des images côte à côte !

[IED factory]

Bonjour à tous !

Sur un site en production sous Joomla 3.2, template T3_bs3_blank modifié, JCE dernière version, je n'arrive pas à mettre des images alignées sur une ligne !!
J'ai cru à un bug de mediabox dont je me servais, mais sur une page de test juste avec les images, cela ne fonctionne pas.
Si vous avez une solution ?
le lien de la page : http://www.i-e-d.fr/travaux.html

Merci d'avance.

[PhilJ]

Re : Impossible d'aligner des images côte à côte !

Bonjour,

[...] je n'arrive pas à mettre des images alignées sur une ligne !! J'ai cru à un bug de mediabox dont je me servais, mais sur une page de test juste avec les images, cela ne fonctionne pas.

...Dans les directives CSS associées à ce template, les images insérées dans les articles sont définies par défaut avec

.article-intro img, .article-content img {
  display: block;
  height: auto;
  max-width: 100%;
}

On voit cela aux alentours de la ligne 52 de http://www.i-e-d.fr/t3-assets/dev/te...oomla.less.css. Dans cette déclaration, display défini comme 'block' implique que les images successives sont par défaut des éléments situés dans des 'blocs', c'est-à-dire chacun sur une ligne différente, au même titre, par exemple, que des paragraphes <p>...</p> ou des titres <h1>...</h1>, etc.

Avec une telle définition, il est tout à fait normal que deux images successives se retrouvent l'une sous l'autre plutôt que l'une à côté de l'autre.

Vous pourriez modifier cette définition par défaut — de préférence dans une nouvelle feuille de style faisant office de surcharge par rapport au fichier CSS du template. Ce genre de fichier de surcharge (override) est souvent nommé custom.css par les connaisseurs de Joomla. De cette façon, toutes les images adjacentes de vos articles seraient par défaut alignées l'une à côté de l'autre comme vous le demandez, plutôt que dans des « blocs » comme c'est le cas ici.

Le code à insérer dans ce custom.css serait alors tout simplement :

.article-intro img, .article-content img {
  display: [B]inline[/B];
}

Une autre solution est d'intervenir seulement au cas par cas, en modifiant ponctuellement la valeur de display de telle ou telle image. Donc, dans votre page de test, en agissant seulement sur la première image : <img src="/images/my-template/travaux/ied-factory-site-prodimo.jpg" style="display: inline;">.

Enfin, vous pourriez aussi, toujours en intervenant seulement sur la première image, forcer l'alignement mais cette fois sans modifier la valeur de display, en faisant flotter l'image à gauche : <img src="/images/my-template/travaux/ied-factory-site-prodimo.jpg" style="float: left;">. Toutefois, avec ce code, il faudrait remplacer votre définition 'margin: 3px;' par 'margin: 0 3px;' de façon à ce que le bord supérieur des 2 images soient exactement alignées.



Bonne journée,


PhilJ

[IED factory]

Re : Impossible d'aligner des images côte à côte !

Bonjour et grand merci !

Je me sens un peu comme le gars qui a oublié de mettre de l'essence dans sa voiture et qui va au garage pour la faire réparer ! Tellement obnubilé par les éventuels conflits ou bugd, j'en ai oublié le B.A.BA ! Merci de cette piqure de rappel ! Honte sur moi !

Bonne journée à vous PhilJ