[RÉGLÉ] Centrer loadposition

[nano]

Bonjour,

Je me tourne vers vous car je viens de passer un temps fou afin d'essayer de centrer des loadposition, mais en vain....

Je souhaite centrer deux modules qui sont appelés pour un autre module avec la fonction {loadposition position}.
Le but de cette manipulation est d'avoir mes deux modules côte à côte dans la même position, et qu'ils soit centrer à ma page tout en restant côte à côte.

Voici comment j'ai procédé :

- Premier module (on va l'appeler module gauche) avec une position "position-gauche" qui n'existe pas dans mon template.
- Deuxième module (on va l'appeler module droit) avec une position "position-droite" qui n'existe pas dans mon template.
- Création d'un module "contenu personnalisé" afin d'appeler mes deux modules cité plus haut, avec ma position souhaitée.
Dans ce module j'ai mis ça :

<div style="margin: 0 auto; width: 100%; display: block;">
<div class="span6" style="margin: 0 auto; width: 65%px;">{loadposition position-gauche}</div>
<div class="span6" style="margin: 0 auto; width: 35%px;">{loadposition position-droite}</div>
</div>

J'ai essayé beaucoup de chose, je n'arrive pas à les centrer. La seule chose où je suis arrivé à les décoller de la gauche est de mettre une position: relative; left: ..px, mais ce n'est pas propre, car en fonction de la taille de l'écran nous n'avons pas le même aperçu.

J'utilise ce template (position content-top) : https://demo.joomlashine.com/joomla-...103&Itemid=435
Difficile de laisser un lien vers mon site, car il est en construction et donc en hors-ligne.

Merci pour vos lumières .......

[woluweb]

Bonjour,

Avec un lien vers *votre* site, ce sera plus concret pour vous aider.

A priori, j'utiliserais CSS Grid, donc pour le div conteneur :

.conteneur {
display: grid;
align-items: center;
justify-items: center;
}

[nano]

Bonsoir woluweb et merci de votre aide.

J'ai essayé ce que vous m'avez dit, mais en effectuant cela les deux modules ne sont plus côte à côte.

Je mets le site en ligne (je suis au début de la construction du site, donc il y a rien de très intéressant) afin que vous puissiez m'aider correctement.
C'est ici

Il s'agit des deux modules en dessous du mainmenu.

[wabaw]

Vous avez deux soucis.
Le premier est que votre déclaration "width" est à la fois en pourcentage et en pixels :

width: 65%px

donc il faut que ce soit ou 65% ou 65px, mais pas les deux.

Les classe span* devraient vous permettre de réaliser ce que vous désirez :

<div class="row-fluid">
<div class="span8">{loadposition position-gauche}</div>
<div class="span4">{loadposition position-droite}</div>
</div>

Un code qui fonctionne sans l'aide css de votre template :

<div>
<div style="margin: 0 auto; width: 65%;float:left;">{loadposition position-gauche}</div>
<div style="margin: 0 auto; width: 35%;float:left;">{loadposition position-droite}</div>
</div>

[nano]

Bonjour wabaw et merci pour ton aide.

J'ai finalement résolu le problème en créant deux nouvelles positions dans mon template (c'est plus propre pour un affichage sur téléphone).

Effectivement j'avais dû picoler au moment où j'ai ouvert le sujet, car width en % et px, c'est pas mal du tout, j'ai fais fort là (>