Tweet
Bonjour
je viens de créer une page glossaire sur mon site https://smlcol.ovh/fr/blabla/plus-d-info/glossaire et je voulais mettre tout ça sur deux colonnes avec le code ci-dessous (qui semble me donner un résultat assez proche de ce que je veux via l’inspecteur):
Pour information, j’utilise le plugin « UP - Universal Plugin » pour créer ce glossaire que j’utilise aussi pour faire mes FAQ. J’ai vu qu’il existait d’autres extensions dans le JED mais je voulais quelque chose d’assez homogène… ? (d'autant que je fais face à un "problème" similaire sur les demos de deux autres extensions)
Du coup mon code html ressemble à ça
Et du coup ma question : quand je mets sur deux colonnes et que je clique sur une définition, les définitions sont redistribuées sur les 2 colonnes… Y a-t-il moyen de forcer un saut de page avant le I par exemple ?
J’ai vu « break-before » mais je ne comprends pas bien comment faire – au mieux, j’ai ce bout de code-ci mais dès que je sélectionne un mot, ça part en sucette…
Une idée?
Tiens au fait, pour réduire les réponses quand j'en sélectionne une autre, vous savez comment ça marche?
je viens de créer une page glossaire sur mon site https://smlcol.ovh/fr/blabla/plus-d-info/glossaire et je voulais mettre tout ça sur deux colonnes avec le code ci-dessous (qui semble me donner un résultat assez proche de ce que je veux via l’inspecteur):
Code:
section.colonne {
-webkit-column-count:2; /* Opera, Safari, Google Chrome */
-moz-column-count: 2; /* Firefox */
column-count: 2; /* Internet Explorer */
-webkit-column-gap: 100px;
-moz-column-gap: 100px;
column-gap: 100px;
-webkit-column-rule: 2px dashed #555;
-moz-column-rule: 2px dashed #555;
column-rule: 2px dashed #555;
}
Du coup mon code html ressemble à ça
Code:
[COLOR=#FF0000][B]<section class="colonne">
<h2 id="lien-A" class="lettrine">A</h2>[/B][/COLOR]
<p>{up faq}</p>
<p></p>
<h4>Aberration chromatique</h4>
<p>Il s’agit d’un défaut optique résultant de la décomposition de la lumière blanche en plusieurs bande de couleurs. On observe autour du blanc des contours flous ou une bande de couleur.</p>
<h4>Arrière-plan</h4>
<p>C’est la zone (floue ou nette) en arrière du sujet principal photographié.</p>
<h4>Artefact</h4>
<p>Il s’agit d’un défaut repéré sur une image souvent due à une compression trop forte de celle-ci. Par exemple, une grande ligne blanche ou un point noir sur une forte lumière.</p>
<h4>Autofocus</h4>
<p>Mise au point automatique sur un sujet.</p>
<h4>Avant-plan</h4>
<p>A l’inverse de l’arrière-plan, il s’agit tout simplement de la zone (floue ou nette) située avant votre sujet. On la nomme aussi « premier plan ».</p>
<p>{/up faq}</p>
<h2 id="lien-B" class="lettrine">B</h2>
<p>{up faq}</p>
<p></p>
<h4>Basse lumière</h4>
<ol>
<li>Ce sont les zones d’ombre ou les plus foncées sur une photo.</li>
<li>Conditions de prise de vue comme par exemple lors d’un concert dans une petite salle, au lever ou coucher de soleil où la lumière est (particulièrement) faible.</li>
</ol>
<h4>Balance des blancs</h4>
<p>Une bonne balance des blancs permet d’équilibrer correctement les couleurs d’une photo. On retravaille souvent cette balance des blancs en post-traitement.</p>
...
<p>{/up faq}</p>
[B][COLOR=#FF0000]<h2 id="lien-I" class="lettrine sautcolonne">B</h2>[/COLOR][/B]
...
J’ai vu « break-before » mais je ne comprends pas bien comment faire – au mieux, j’ai ce bout de code-ci mais dès que je sélectionne un mot, ça part en sucette…
Code:
.sautcolonne {page-break-before: always;}
Une idée?
Tiens au fait, pour réduire les réponses quand j'en sélectionne une autre, vous savez comment ça marche?
merci
Commentaire