28172 sujets

CSS et mise en forme, CSS3

Forcer un saut de page entre des <li>, mais entre tous les <l

Bonjour.

Ma page web génère une liste UL, chaque LI contenant plusieurs autres balises (h2, span, table, img).
La hauteur des li peut changer énormément (3 lignes ou 30).
Lorsque j'imprime, je souhaite que le saut de page ne se fasse pas dans un li, mais avant ou après.

J'ai déjà fait bcp de recherches et tests, en vain.
Voici les solutions que j'ai exploré :
- page-break-inside:avoid dans li
- page-break-after et before:avoid pour tous les éléments contenus dans li
- ajout d'un div avec page-break-before:auto entre chaque li
- ajout d'un li de classe "SautDePage" avec page-break-auto entre chaque li qui contient des données
- passage des display en block pour chaque li et son contenu et ajout de bordures sur li, puisqu'à priori les impressions évitent de scinder les éléments ayant ces mentions

Tout ça en vain !

Voici la structure d'un élément li :
<li>	réservation
<h2>	titre + totaux </h2>
<span id=zone_jauge> jauge de conso </span>
<div class=bloc_lignes>
<table> lignes de réservation </table>
</div>
</li>

C'est IE7 et 8 qui sont utilisés.

Je n'arrive donc pas trouver une solution.
orphan et widow ne me semble pas adapter, puisque je ne peux pas préciser un nb.

Je suis preneur de suggestions.
D'avance merci.
Voici un exemple simplifié :
<style>
ul
{
	display:block;
	page-break-inside:auto;
}
li
{
	display:block;
	page-break-inside:avoid;
	page-break-before:auto;
	border:3px dotted black;
	margin-top:10px;
}
li.saut
{
	page-break-before:auto;
}

td
{
	height : 50px;
}

table
{
	page-break-before:avoid;
	page-break-after:avoid;
	border:1px dashed red;
}

tr
{
	page-break-before:avoid;
	page-break-after:avoid;
	border:1px solid gray;
}
</style>


<ul>


<?php
$max	= 10;
for( $i=0; $i<$max;$i++)
{
	echo "<li>";
	echo "<table>";
	
	for ( $j=0;$j<10;$j++)
	{
		echo "<tr>";
		echo "<td>";
		echo $i;
		echo "</td></tr>";
	}
	echo "</table>";
	echo "</li>";
	
	echo "<li class=\"saut\"></li>";
	
}
?>


[code=html]</ul>[code]

Sachant que le max pour $j peut varier entre 1 et 20.
L'objectif est qu'à l'impression, les <li> contenant un tableau ne soient jamais coupés.
Re-bonjour.

Pas de réponse : j'ai mal expliqué mon pb ? j'ai commis une maladresse ?
En tout cas je n'ai toujours pas de solution, je suis donc preneur d'un coup de pouce, merci Smiley cligne .
Salut,

Il te faut prendre un peu patience, les membres du forum sont bénévoles et n'ont pas forcément toujours la disponibilité pour répondre aux problèmes à n'importe quelle moment, notamment en semaine en journée, où tout le monde travaille.
Je ne me suis jamais trop penché sur les feuilles d'impressions, donc je ne pourrais t'apporter de solution.

Cependant, ce que tu cherche à faire va me semble-t-il à l'encontre de certains problèmes économiques et écologiques. Les visiteurs de ton site n'ont peut être pas envie d'utiliser plus de papier pour imprimer un document. Si tu as un de tes blocs plutôt court suivi d'un bloc assez long, il risque de se retrouver avec une feuille imprimée sur quelques lignes, et rien d'autre en dessous, cela peut être multiplié par le nombre d'occurrences de ce cas.
Il est toujours envisageable de juxtaposer deux feuilles de papier entre elles pour lire les informations de façon complète lorsque c'est nécessaire.
Pas de souci !
J'imagine bien qu'il n'y a pas une personne dédiée attendant mes questions Smiley biggrin .
Je m'inquiétais juste, ayant vu d'autres réponses sur d'autres sujets.

Je suis très sensible aux exigences éco et écolos.
Toutefois il y a une population de collaborateurs (c'est un outil à usage interne) qui a besoin d'imprimer, et qui ne veut pas jongler avec plusieurs feuilles. La seule solution viable actuellement est de faire un saut de page après chaque <li>, ce qui gaspille du papier.

Je patienterai, on verra si quelqu'un a une solution ...

Merci et bonne journée.
Sujet clos
Aller à