TOPIC: Centrer verticalement une image dans une rangée

Bonjour à tous

Je découvre "Page Bulder CK"... Très pratique, assez facile à comprendre, mais je reste sur un problème de centrage vertical.
J'ai créé une rangée de 2 colonnes, la première avec une image, la deuxième avec un texte.
J'ai paramétré les 2 colonnes en "Default vertival alignment" de façon à avoir la même hauteur dans mes deux blocs (ils peuvent en effet avoir une couleur de fond et je dois absolument garder cette hauteur identique sur toute la rangée.

Je n'arrive pas à avoir le centrage vertical
- Pour mon image lorsque le texte est assez long (voir exemple ci-joint)
- Et l'inverse, centrer verticalement le texte lorsque l'image est plus haute

J'ai l'impression que le centrage vertical est une "sacrée galère" pour les "non spécialistes" CSS... J'en transpire encore malgré qq heures de recherches.
Y aurait-il une solution assez simple ? Car je dois ensuite former mon client qui n'est pas informaticien pour qu'il s'en sorte seul...

Merci d'avance pour vos idées.
Jean-Marie

Bonjour
J'essaie de trouver une solution par moi-même mais pour l'instant, je n'ai pas trouvé avec "Page Builder CK";

Par contre, avec l'outil de debug de Firefox, en modifiant certaines valeurs CSS, j'y arrive...
Voici une solutions (il y en a peut-être d'autres...).
J'ai utilisé la méthode "flex" en indiquant l'alignement sur l'enfant, donc
- J'ajoute "display:flex;" sur le parent
- J'ajoute "margin:auto;" sur l'enfant
L'image est positionnée dans un "div" qui fait la même hauteur que l'image, et ce "div" est également positionné dans un autre "div" qui fait également la même hauteur. Ce n'est donc pas l'image qu'il faut centrer verticalement, mais le "div" de plus haut niveau qui la contient (c'est en tout cas mes conclusions... elles sont peut-être fausses mais ca fonctionne...).

Voici le codage brut de forme venant de "Page Builder CK" sans aucun CSS personnalisé.
Voici le codage avec les modification manuelles du CSS par l'outil d'inspection (en vert)


J'ai donc modifié 2 lignes :
- Le "div" de classes "inner animate resizable" avec "display:flex" (le "parent")
- le "div" de classes "innercontent uick-sortable" avec "margin:auto"

La mise en place du site de mon client (et éventuellement d'autres sites) me fait poser plusieurs questions :

1. Est-ce la bonne méthode ?
2. Si "NON", quelle méthode est-il préférable d'utiliser pour une compatibilité maximum sur tous les navigateurs ?
3. Comment paramétrer avec Page Builder CK (avec cette méthode ou une autre...) pour...
   1. Avoir une méthodologie simple permettant à mes clients de s'en sortir seul dans la constitution de ses articles (je ne parle pas du template bien entendu) ?
   2. Avoir un cadrage vertical vers le haut, centre ou bas : Pour tout le site (j'image une information dans le template) ?
   3. Avoir un cadrage vertical vers le haut, centre ou bas : Pour certaines rangées complètes de blocs (j'image par Page Bulder CK, donc accessible par mes clients) ?
   4. Avoir un cadrage vertical vers le haut, centre ou bas : Pour un bloc particulier (j'image une information dans le template, donc accessibles par mes clients) ?

[/ol]

J'ai essayé de customiser les CSS par Page Builder CK mais les codes CSS modifiés ne vont pas sur les bonnes classes... d'où ma demande ici dans le forum.

Merci d'avance pour vos retours
Jean-Marie

salut
tu peux utiliser le bouton N°2 ici
www.joomlack.fr/documentation/page-build...n-interface-overview
pour ajouter tes règles CSS perso pour une page donnée
sinon tu peux le faire dans ton template pour l'appliquer à tout le site

pour gérer des classes CSS tu peux utiliser le bouton N°3 pour ajouter une classe à n'importe quel élément
tu pourrais donc définir une classe "foobar" sur un élément et dans ton css perso avoir .foobar { ... }

après pour la partie "rendu", ici c'est spécifique à ton projet, à toi de voir les CSS que tu veux utiliser et ce que tu veux faire

CEd

Merci pour ces informations CEd.
Pour tout avouer, je n'avais pas encore bien compris la signification des icônes en bas à droite... merci pour ces explications.

J'ai testé la mise en place des classes sur l'ensemble des 3 niveaux proposés : row_ID, block_ID et ID...
J'ai indiqué la classe "pajade-flex" pour les "row" et le "block" (contenant uniquement "display: flex;" dans mon template) et une la classe "pajade-centre-vertical" (contenant uniquement "margin: auto;" dans mon template).
Le centrage vertical ne fonctionne pas...


En revenant sur la visualisation du html et du CSS par l'inspecteur de Firefox je me sui aperçu que ce paramétrage intervenait au niveau des lignes suivantes :
- Pour le premier niveau (les "row")
- Il y a ensuite un autre div de niveau inférieur sans paramétrage spécifique
- Pour le deuxième niveau (les block")
- Il y a ensuite 2 niveaux de div de niveau inférieur sans paramétrage spécifique
- Ensuite vient le div de centrage.


Pour obtenir le centrage, je dois ajouter manuellement la classe "pajade-flex" aux 2 niveaux de div au-dessus de l'image (mais inaccessible sous Page Builder CK"
class="innercontent uick-sortable pajade-flex"
class="cktype pajade-flex"

C'est galère... et pour l'instant je n'ai pas trouvé de solution simple pour mon client puisse de lui même paramétrer en haut, centré ou en bas.
Dois-je modifier (surcharger) les classes "innercontent" ou "uick-sortable" et "cktype" dans mon template ? Mais quel est le risque pour les autres développements ?
Là j'avoue être perdu... je ne maitrise pas assez les imbrications CSS et ne connait pas la signification des classes "innercontent" ou "uick-sortable" et "cktype" pour me permettre de surcharger (avec !important) dans une définition CSS.

si tu mets une classe css sur un parent, tu peux accéder à n'importe quel enfant en pointant bien ton sélecteur
donne moi l'url de la page que je puisse jeter un oeil, meme si ce n'est pas vraiment lié à page builder ck ...

Merci Cedric

Voici l'URL de la page qui pose problème : https://pajade.fr/index.php/fr/

Pour avoir l'affichage du problème tu dois te connecter (en haut à droite) avec l'utilisateur "tests" et le mot de passe "tests22678"
Tu tomberas en premier lieu sur le problème d'affichage du menu (autre post en cours avec HikaShop) mais en scrollant vers le bas tu trouveras le problème "INFORMATIONS LIVRAISONS".
La première méthode a été effectuée par un tableau simple dans un article standard sans "Page Builder CK".
Juste après (cadre rouge), tu trouveras l'article avec "Page Builder CK".

Tu as certainement raison sur mon manque de connaissance CSS... Mais je soigne petit à petit, je te promets que je teste, j'essaie différentes possibilités, j'essaie d'avancer et de déranger le moins possible les personnes comme toi sur les forums.
Ce qui est certain c'est que je mettrai ici la solution trouvée en espérant qu'elle servira à d'autres
Désolé pour le dérangement.

ok , alors essaie avec ce code CSS

Bonjour Cedric

Merci pour cette exemple. Ca ne fonctionne pas tel-quel mais si j'ajoute ...L'image est bien centrée verticalement

Le centrage vertical est possible, mais ceci ne fonctionne pour l'instant que pour l'image...
En effet, si je remplace l'image par un autre objet, un simple texte (exemple du bloc de droite) ou un autre objet (onglets, boutons, etc...), ce centrage vertical ne fonctionne pas.
Si j'ai bien compris, le centrage lui-même s'effectue par les lignes...

.pajade-flex div.imageck img {
margin: auto !important;
}

Ligne directement associée à la classe "imageck"...
Si je remplace l'image par du texte (par exemple), cette classe est remplacée par "cktext", donc pas de centrage.

Si je devais mettre en place cette méthodologie de façon globale, et si j'ai bien compris le système, il faudrait ajouter dans le CSS personnalisé dans mon template des lignes spécifiques pour tous les objets disponibles dans la liste de gauche dans Page Bulder CK, donc pour les images, les textes, les boutons, les sliders, les images animées, les onglets horizontaux et verticaux, etc... Oui ? Non ?

Hormis le fait que c'est "un peu galère" pour centrer tous ces objets (bcp de lignes de programmations), il faudrait :
- Créer une classe spécifique pour cadrer en haut
- Créer une classe spécifique pour cadrer en bas
- Et le faire pour toutes les classes des objets qui peuvent être déposés dans les blocs.

J'image que tout ceci doit fonctionner, mais à chaque modification de version de Page Builder CK, nous pouvons rajouter le risque de voir éventuellement d'autres classes apparaître, disparaître, se modifier, etc... Il faudrait donc à chaque mise à jour de Page Builder CK vérifier que le CSS personnalisé fonctionne toujours.

Je me pose donc la question suivantes : N'est-il pas possible de simplifier ?
Première idée
Avoir dans Page Bulder CK (dans une prochaine version) la possibilité d'un centrage vertical à l'intérieur d'un bloc, et ceci quelque soit le contenu du bloc ?
Deuxième idée
Avoir un CSS personnalisé mais plus simple qui permettrait de centrer le bloc complet (et non pas son contenu).
J'imagine (peut-être à tors) gérer la position verticale du bloc de classe "cktype" (en haut, en bas ou au centre) car ce bloc semble être celui qui ne change jamais de nom quelque soit son contenu. Dans ce cas, si vous avez des idées de customisation CSS (haut, bas, centre), je suis preneur.

N'étant pas du tout à la hauteur des spécialistes CSS j'en ai mal à la tête
Un grand merci d'avance.
Jean-Marie

Après quelques "bidouilles" sans forcément tout comprendre mais tout semble fonctionner...
Voici ce que j'ai indiqué au niveau de la customisation CSS du template :
Il semblerait que l'on puisse avoir une certaine liberté de programmation avec Page Builder CK:
- J'ai créé 3 classes : une pour afficher en haut (pajade-haut), une en bas (pajade-bas), une autre pour centrer verticalement (pajade-centre)
- Si j'indique une de ces 3 classes dans la zone "class" de la partie "row_ID", tous les blocs réagissent de la même façon
- Si je désire avoir un cadrage vertical différent sur des blocs d'une même ligne, je laisse vide la zone "class" de la partie "row_ID" et j'indique la classe de cadrage dans la zone "class" de la partie "block_ID".
- Dans tous les cas, la zone "class" de la partie "ID" reste vide.

Tout semble fonctionner mais...

- Le code CSS que j'ai écrit est-il bien optimisé (j'ai dupliqué les 3 premières définitions de classes) ?
- Pensez-vous que ma méthode soit correcte ?
- Dommage qu'on ne puisse pas avoir ce choix de cadrage vertical directement dans Page Builder CK et que l'on soit obligé de passer par des créations de classes, dommage mais pas bloquant

Pouvez-vous me dire ce que vous pensez de ma méthode et de l'écriture du CSS...
Merci
Jean-Marie

je suis content que tu ais réussi à faire ce que tu veux, et oui on a un peu de liberté de création dans Page Builder CK
pour ton code, il n'est pas si mal, à ta place je le garderais comme cela. Merci pour ton retour d'info