[RÉGLÉ] Mise en page

[gagnonjeanfrancois]

Bonjour à tous,

J'ai un petit problème avec la mise en page sur J3. Et je me demandais si quelqu'un avait déjà eu quelque chose de similaire.

Lorsque je met une image en ligne et que je tente de la centrer cette dernière ce remet toujours à gauche lorsque que je load la page. J'ai bien réglé JCE et j'ai même tenté de modifier le code HTML, rien à faire...

Si je load la page par le front end je remarque que l'image est centrée une fraction de seconde et se déplace à gauche.

Qu'est-ce qui bogue, template, plugin, ma configuration de Joomla?

Merci d'avance pour vos pistes de solution.

Sent from my Nexus 4 using Forum Joomla.fr mobile app

[PieceOfCake]

Re : Mise en page

Bonjour,

une image lorsqu'elle est centrée, l'est dans son conteneur. Celui-ci doit être type box et non pas de type inline (en terme de CSS).
Il est tout à fait possible de positionner une image de manière centrée, à condition dans JCE de sélectionner le conteneur (cela se fait naturellement via le fil d'ariane qui apparaît en bas de la zone de saisie ou alors en passant par le code HTML natif).

Si tu nous donnais un exemple de code natif qui te pose problème ou une url avec un emplacement précis à centrer, ce serait plus facile que de donner en quelques mots un cours CSS

Cordialement

[gagnonjeanfrancois]

Re : Mise en page

Merci PieceOfCake

Voici mes info :

J'utilise ce template qui est gratuit sur http://www.icetheme.com/themes/ice-future

La page de mon site que j'ai des problèmes est : http://atlcvm.com/qui-sommes-nous

Un énorme merci pour ton aide!

Sent from my Nexus 4 using Forum Joomla.fr mobile app

[PieceOfCake]

Re : Mise en page

En l'occurrence c'est assez simple, un examen sous fireBug, démontre que l'image (550px de large) est contenue dans une balise <DIV> dimensionnée explicitement à la même taille (550px). C'est cette div qui est soit mal taillée (la passer à width:100%, règle problème), la positionner par rapport à son conteneur, le réglerait aussi (supprimer float:none et ajouter margin-left:auto; margin-right:auto) et replacerait l'image au centre.

La seule chose qui me chagrine, c'est que le code visible et modifiable sous firebug, ne ressemble pas à celui que l'on voit en affichant le source de la page.

via firebug on voit ceci :

<div class="img_caption none" style="float: none; width: 550px;">
<img class="caption" style="line-height: normal; display: block; margin: 10px auto; vertical-align: bottom;" 
title="Thierry Giroux, Annick Rocheleau, Yves Chabot, Pascale Laurin-Lavallée, Guy Fortin et Jean-François Gagnon" 
src="/images/Qui_somme-nous/IMG_4121.JPG" alt="Ancien C.A. 2012 - Thierry Giroux, Annick Rocheleau, Yves Chabot, Pascale Laurin-Lavallée, Guy Fortin et Jean-François Gagnon">
<p class="img_caption">Thierry Giroux, Annick Rocheleau, Yves Chabot, Pascale Laurin-Lavallée, Guy Fortin et Jean-François Gagnon</p>
</div>

EN affichant le source de la page on voit ceci :

<p>
<img class="caption" style="line-height: normal; display: block; margin: 10px auto; vertical-align: bottom;" title="Thierry Giroux, Annick Rocheleau, Yves Chabot, Pascale Laurin-Lavallée, Guy Fortin et Jean-François Gagnon" src="/images/Qui_somme-nous/IMG_4121.JPG" alt="Ancien C.A. 2012 - Thierry Giroux, Annick Rocheleau, Yves Chabot, Pascale Laurin-Lavallée, Guy Fortin et Jean-François Gagnon" /></p>
<p style="margin-top: 0.25cm; margin-bottom: 0cm;" align="JUSTIFY">
<span style="background: none repeat scroll 0% 0% transparent;">Le conseil d'administration (CA) qui représente les diplômé(e)s de Techniques d'intervention en loisir du Cégep du Vieux Montréal a été élu par les membres de l'ATLCVM. De plus, les représentants du comité des étudiants de Techniques d'intervention en loisir CÉTIL ainsi que du département de Techniques d'intervention en loisir sont aussi invités à avoir une voix sur le conseil administratif.</span>
</p>

Il y a donc entre les deux un composant (ou le template, mais plutôt sans doute un composant) qui génère de la mise en forme sur laquelle il va être difficile de prendre la main

[lefabdu51]

Re : Mise en page

le truc c est la div qui englobes ton image.
JCE doit la mettre par defaut
Ce qu il faudrais enlever, c est sa largeur de 550px.
Avec firebug, en supprimant cette largeur l image se centre automatiquement.

<div class="img_caption none" style="float: none; width: 550px;">

vu le code, je dirais que c est dans l editeur que se trouve la solution(styles inline). Est ce que tu as entré une valeur pour la largeur de l image dans l editeur?

[gagnonjeanfrancois]

Re : Mise en page

Finalement... c'est résolu

J'ai vérifier JCE tout était beau, j'ai activté et désarctivé des composants et toujours le même problème, pour finalement tester la page avec le template Protostar et bingo, c'est le template Ice Future le problème...

J'ai réactivé Ice Future, j'ai retourné voir ma page et j'ai testé le template responsive en rapetissant mon navigateur. L'image de groupe restait à 550px tandis que les autres images se modifiaient. Je comprennais plus rien si c'est le template pourquoi ce ne sont pas tous les images qui bug... J'ai comparé les images et dans JCE il avait d'activer un style:caption. Un coup enlevé tout c'est résolu.

Merci encore pour votre aide.