28112 sujets

CSS et mise en forme, CSS3

Appliquer la mise en forme site prod vers site en dev

Bonjour
J'ai migré un site joomla 3 vers joomla 4 avec un nouveau thème
Logiquement, je perds un certain nombre de mise en page. J'ai réussi à en dupliquer quelques unes, mais je me demande comment faire pour aligner des images qui apparaissent de manière verticale
https://preprod2.altius.fr/fr/accompagner/conception-pilotage-solutions-travail-en-hauteur.html
par rapport au site actuel
https://www.altius.fr/fr/accompagner/conception-pilotage-solutions-travail-en-hauteur.html
J'ai essayé plusieurs choses en partant de l'image (je vois avec l'inspecteur que cela change l'aspect en décochant : )
mais si je mets
.bloc2colonnes img, .bloc3colonnes img {
    max-width: 100%;
    height: auto;
    border: 5px solid #eee;
}

cela n'a aucun impact

et en plus je devrais faire une même mise en page avec un alignement horizontal !
Modérateur
Salut, 


..bloc3colonnes, .bloc2colonnes{
display:flex;
}


<table> ?
Modifié par niuxe (01 Aug 2023 - 13:53)
Bonjour
Merci cela a fonctionné sauf pour la ligne en dessous
https://preprod2.altius.fr/fr/accompagner/conception-pilotage-solutions-travail-en-hauteur.html
J'ai essayé d'ajouter un p. C'est peut-être un cas unique, mais on ne sait jamais et je trouve plus simple de gérer le plus de cas possible

.bloc3colonnes, .bloc2colonnes , .bloc2colonnes p img , .bloc3colonnes p img  {/* pages comme accompagner/conception-pilotage-solutions-travail-en-hauteur.html*/
display:flex;
}

mais cela ne solutionne rien
une idée ?
@+
Modifié par HDcms (03 Aug 2023 - 17:02)
Salut,

Je vois qu'en cette période estivale personne ne répond alors je te laisse un mot :

J'avoue que javais jeté un œil sur ton code mais n'avait pas répondu. En effet, il y a beaucoup de style, lié à des classes, il faudrait avant tout supprimer tout ce code inutile :
<div class="row-fluid bloc3colonnes">
<div class="row-fluid">
<p class="col-sm-4 padding5"><img src="/images/portique1.jpg" alt="portique1" style="letter-spacing: 0.7px;"></p>
</div>
<div class="col-sm-4 padding5">
<div class="row-fluid bloc2colonnes">
<div class="col-sm-6 padding5"><img src="/images/Potence_rotative.jpg" alt="Potence rotative" width="955" height="762"></div>
</div>
</div>
</div>

... pour ne garder que le minimum nécessaire (c'est un exemple, je ne sais pas si la classe est la bonne) :
<div class="bloc2colonnes">
  <img src="/images/portique1.jpg" alt="portique1" style="letter-spacing: 0.7px;">
  <img src="/images/Potence_rotative.jpg" alt="Potence rotative" width="955" height="762">
</div>

Ce serait déjà un bon début.
Modifié par Olivier C (04 Aug 2023 - 11:29)
Bonjour
Merci pour ta suggestion. Néanmoins, je ne vais pas pouvoir le faire, car je ne fais "que" la migration d'un vieux site joomla 3 vers joomla 4 Smiley smile
Il y a des centaines de pages qui ont leur histoire, ce sera aux personnes éditrices de faire des modifications, au fur et à mesure de leur maitrise du gestionnaire de contenu des articles de joomla 4.

Après je comprends pour cette période estivale, ce n'est pas urgent, mais si toi ou quelqu'un d'autres, dans un mois, souhaite me répondre, je serai toujours preneur Smiley smile pour m'approcher le plus possible de l'ancien site
Prévenir un modérateur
Répondre au sujet
Aller à