Colonnes de hauteur sensible dans l'article
J'essaie de corriger une erreur de formatage dans un fichier Joomla! Projet que j'ai repris dans mon école.
Actuellement, ils ont utilisé une instruction HTML (pour autant que je ne comprenne pas ceci) dans l'article.
[columns add_margins=true css="z-index:4;"] [column width_sm="4"] [html]
//Content of first Column
[/html] [/column] [column width_sm="4" css="position:relative;"] [html]
//Content of second Column
[/html] [/column] [column width_sm="4"] [html]
//Content of third Column
[/html] [/column] [/columns] [fluid][html ]
[/html][/fluid]
Le problème est que si theire Content (des lignes comme celle-ci: <p style="text-align: center;">M, Bsp, Erste-Hilfe-Beauftragter</p>) a plusieurs rangées de long, les lignes sont perturbées (voir img). J'ai essayé d'utiliser des Flex-Box, ce qui a provoqué un désordre, mais la personne qui gère le contenu souhaite s'en tenir au formulaire actuel.
La vue de l'éditeur ressemble à ceci:
<p>[columns add_margins=true css="z-index:4;"] [column width_sm="4"] [html]</p>
<p> </p>
<h5 style="text-align: center;">Beiglböck Matthias, BEd</h5>
<p style="text-align: center;"><a href="joomplu:52 type=img"><img class="jg_photo" src="index.php?option=com_joomgallery&view=image&format=raw&id=52&type=thumb" alt="joomplu:52" /></a> </p>
<p style="text-align: center;">M, Bsp, Erste-Hilfe-Beauftragter</p>
<hr />
<p>[/html] [/column] [column width_sm="4" css="position:relative;"] [html ]</p>
<p> </p>
<h5 style="text-align: center;">Beiglböck Matthias, BEd</h5>
<p style="text-align: center;"><a href="joomplu:52 type=img"><img class="jg_photo" src="index.php?option=com_joomgallery&view=image&format=raw&id=52&type=thumb" alt="joomplu:52" /></a> </p>
<p style="text-align: center;">M, Bsp, Erste-Hilfe-Beauftragter</p>
<hr />
<p>[/html] [/column] [column width_sm="4"] [html ]</p>
<p> </p>
<h5 style="text-align: center;">Beiglböck Matthias, BEd</h5>
<p style="text-align: center;"><a href="joomplu:52 type=img"><img class="jg_photo" src="index.php?option=com_joomgallery&view=image&format=raw&id=52&type=thumb" alt="joomplu:52" /></a> </p>
<p style="text-align: center;">M, Bsp, Erste-Hilfe-Beauftragter</p>
<p>[/html] [/column] [/columns] [fluid][html ]</p>
<p>[/html][/fluid]</p>
Est-ce que c'est une façon pour moi de m'en tenir à cette méthode sans tout jeter ou est-ce un gâchis total et qu'il faut refaire? Je suis un nouveau venu chez Joomla! Lancer Joomla! 3.8
Merci d'avance!
Il semble qu'il existe un plugin sur votre site qui fournit des codes abrégés, qui peuvent être utilisés dans le contenu pour aider à produire une annotation spécifique sur la sortie.
Dans ce cas spécifique et après avoir inspecté la page Web en direct, il semble que tout le contenu de la page ait été divisé en 3 "colonnes" en utilisant quelque chose comme:
[fluid]
[columns add_margins=true css="z-index:4;"]
[column width_sm="4"]
[html]
<!--THIS IS COLUMN 1-->
<p>Person 1 Name</p>
<p>Person 1 Image</p>
<p>Person 1 Subtext</p>
<hr>
<p>Person 2 Name</p>
<p>Person 2 Image</p>
<p>Person 2 Subtext</p>
<hr>
[/html]
[/column]
[column width_sm="4"]
[html]
<!--THIS IS COLUMN 2-->
<p>Person 3 Name</p>
<p>Person 3 Image</p>
<p>Person 3 Subtext</p>
<hr>
<p>Person 4 Name</p>
<p>Person 4 Image</p>
<p>Person 4 Subtext</p>
<hr>
[/html]
[/column]
[column width_sm="4"]
[html]
<!--THIS IS COLUMN 3-->
<p>Person 5 Name</p>
<p>Person 5 Image</p>
<p>Person 5 Subtext</p>
<hr>
<p>Person 6 Name</p>
<p>Person 6 Image</p>
<p>Person 6 Subtext</p>
<hr>
[/html]
[/column]
[/columns]
[fluid]
Eh bien, cela produit ce que vous voyez réellement sur votre page front-end, qui est un disposition de la grille Bootstrap - qui, au premier niveau, est le squelette de la disposition souhaitée pour cette page.
Cependant, le problème dans votre implémentation est qu’après avoir configuré la première ligne avec ses div de 3 colonnes, tout le contenu a été placé à l’intérieur.
Pour votre situation, ce que vous devez réellement faire pour obtenir une présentation acceptable consiste à utiliser l'un des éléments suivants:
[column]
[html]
<p>Person 1 Name</p>
<p>Person 1 Image</p>
<p>Person 1 Subtext</p>
[/html]
[/column]
pour chaque personne que vous souhaitez afficher sur cette page.
En outre, vous pouvez également insérer toutes les 3 colonnes dans une nouvelle ligne à l'aide de:
[fluid]
[columns add_margins=true css="z-index:4;"]
[/columns]
[fluid]
Donc à la fin, dans votre éditeur, vous obtiendrez quelque chose comme:
<!-- #### First row of persons #### -->
[fluid]
[columns add_margins=true css="z-index:4;"]
[column]
[html]
<!--THIS IS ROW 1 COLUMN 1-->
<p>Person 1 Name</p>
<p>Person 1 Image</p>
<p>Person 1 Subtext</p>
[/html]
[/column]
[column]
[html]
<!--THIS IS ROW 1 COLUMN 2-->
<p>Person 2 Name</p>
<p>Person 2 Image</p>
<p>Person 2 Subtext</p>
[/html]
[/column]
[column]
[html]
<!--THIS IS ROW 1 COLUMN 3-->
<p>Person 3 Name</p>
<p>Person 3 Image</p>
<p>Person 3 Subtext</p>
[/html]
[/column]
[/columns]
[fluid]
<!-- #### Second row of persons #### -->
[fluid]
[columns add_margins=true css="z-index:4;"]
[column]
[html]
<!--THIS IS ROW 2 COLUMN 1-->
<p>Person 4 Name</p>
<p>Person 4 Image</p>
<p>Person 4 Subtext</p>
[/html]
[/column]
[column]
[html]
<!--THIS IS ROW 2 COLUMN 2-->
<p>Person 5 Name</p>
<p>Person 5 Image</p>
<p>Person 5 Subtext</p>
[/html]
[/column]
[column]
[html]
<!--THIS IS ROW 2 COLUMN 3-->
<p>Person 6 Name</p>
<p>Person 6 Image</p>
<p>Person 6 Subtext</p>
[/html]
[/column]
[/columns]
[fluid]
En créant votre mise en page de cette façon, vous obtiendrez le balisage approprié sur lequel elle sera basée Bootstrap grid) - qui gérera presque tout ce qui concerne la mise en page et les alignements. être capable de le manipuler et de le styler dans le front-end en utilisant CSS, si vous en avez besoin.
Votre objectif pour le résultat final devrait être quelque chose comme ci-dessous:
<!-- #### First row of persons #### -->
<div class="row">
<div class="col-sm-4">
<!--THIS IS ROW 1 COLUMN 1-->
<p>Person 1 Name</p>
<p>Person 1 Image</p>
<p>Person 1 Subtext</p>
</div>
<div class="col-sm-4">
<!--THIS IS ROW 1 COLUMN 2-->
<p>Person 2 Name</p>
<p>Person 2 Image</p>
<p>Person 2 Subtext</p>
</div>
<div class="col-sm-4">
<!--THIS IS ROW 1 COLUMN 3-->
<p>Person 3 Name</p>
<p>Person 3 Image</p>
<p>Person 3 Subtext</p>
</div>
</div>
<!-- #### Second row of persons #### -->
<div class="row">
<div class="col-sm-4">
<!--THIS IS ROW 2 COLUMN 1-->
<p>Person 4 Name</p>
<p>Person 4 Image</p>
<p>Person 4 Subtext</p>
</div>
<div class="col-sm-4">
<!--THIS IS ROW 2 COLUMN 2-->
<p>Person 5 Name</p>
<p>Person 5 Image</p>
<p>Person 5 Subtext</p>
</div>
<div class="col-sm-4">
<!--THIS IS ROW 2 COLUMN 3-->
<p>Person 6 Name</p>
<p>Person 6 Image</p>
<p>Person 6 Subtext</p>
</div>
</div>
PS1.
Ne commencez pas à appliquer ce que je vous montre ici directement sur le véritable article de votre page. Je ne suis pas sûr à 100% que les codes abrégés que j'ai utilisés ici sont les bons. Cela dépend du plugin utilisé qui fournit ces codes courts. Consultez donc la documentation du plugin et testez la syntaxe d'un article de test.
PS2.
Je ne suis pas fan de telles approches et plugins en général. Le résultat final étant qu'il n'y a pas de contenu clair pour le site Web et que cela dépend d'un plugin spécifique afin d'afficher le contenu d'une page de manière lisible et lisible. Y a-t-il d'autres approches? - Certes, mais ceci est une autre longue discussion et, en tout cas, cela dépend des exigences propres à chaque projet.