Discussion :

[devyan]

Bonjour,

J'ai des accordéons (pour le média "screen") gérés avec une liste (dl) contenant des titres (dt) suivi du contenu (dd) de taille variable.
J'utilise une définition CSS média "print" pour imprimer ma page et ne parviens pas à faire en sorte que le titre (dt) soit toujours sur la même page que le détail (dd).

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
dt { page-break-before: auto; page-break-inside: avoid; page-break-after: avoid; }
dd { display:block!important; page-break-before: avoid; page-break-inside: auto; page-break-after: auto; }

Merci d'avance

[Skyxia]

Que se passe-t-il si tu met always à la place de auto ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

dt { page-break-before: always; page-break-inside: avoid; page-break-after: avoid; }

[devyan]

Ça met chaque "section" sur une nouvelle page.

Par contre c'est la gestion "après" qui me pose problème, le lien entre 2 balises qui se suivent

Code HTML5 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
...
<dt>Titre de la section 1</dt>
<dd class="accordeon">
<div id="graphe_1_1" class="camembert"></div>
<div id="graphe_1_2" class="camembert"></div>
<div id="graphe_1_3" class="camembert"></div>
<div id="graphe_1_4" class="camembert"></div>
</dd>
<dt>Titre de la section 2</dt>
<dd class="accordeon">
<div id="graphe_2_1" class="camembert"></div>
<div id="graphe_2_2" class="camembert"></div>
</dd>
...
<dt>Titre de la section n</dt>
<dd class="accordeon">
<div id="graphe_n_1" class="camembert"></div>
...
<div id="graphe_n_m" class="camembert"></div>
</dd>
...