CSS page-break-inside:avoid mais élément découpé quand même...

Bonjour,

je cherche à faire un style de page un peu spécial pour l'impression via le media="print" de la feuille CSS. Pour ce faire, ma page "normale" comporte un header, un menu et un corps de page (je simplifie), le menu étant en float left et le corps en float right : le tout sur une css media screen.

Sur la CSS print, j'ai tout mis en display none sauf le corps de page que j'ai mis en largeur 100% et sans float ce coup là.

Le hic est que je propose des schémas sous forme de vignettes, celles-ci sont parfois découpés sur l'aperçu d'une page sur l'autre.

Je vous mets l'exemple plus bas.

Les vignettes sont des <dl> un peu personnalisés selon l'article de pompage.net, et toutes les vignettes sont comprises dans un <div class="schemas">.

Je présume que l'erreur vient du fait que le div class="schemas" n'adopte pas la hauteur des vignettes qu'il est censé encadrer ... (sur la capture d'écran "screen", j'ai mis un border:2px dashed #FF0000; à mon div class="schemas" pour illustrer cette phrase)

Je commence par le code :
- HTML produit :

<h3><a id="parois-musculaires"></a>PAROIS MUSCULAIRES</h3>
<p>Ces parois s'appuient sur un cadre osseux.</p>

<div class="schemas">
<dl class="schema_mini" onmouseover="this.className='schema_mini_hover'" onmouseout="this.className='schema_mini'">
		<dt><a href="#" title=""><img src="img/schemas/mini/anat2011_1.gif" width="100" height="100" alt="" /></a></dt>
		<dd><h5>[ Sch&eacute;ma 2 ] Abdomen en coupe frontale</h5><p style="text-align:center;">3 icônes ici</p></dd>

	</dl>
<dl class="schema_mini" onmouseover="this.className='schema_mini_hover'" onmouseout="this.className='schema_mini'">
		<dt><a href="#" title=""><img src="img/schemas/mini/anat2011_2.gif" width="100" height="100" alt="" /></a></dt>
		<dd><h5>[ Sch&eacute;ma 3 ] Abdomen en coupe sagittale</h5><p style="text-align:center;">3 icônes ici</p></dd>
	</dl>
<dl class="schema_mini" onmouseover="this.className='schema_mini_hover'" onmouseout="this.className='schema_mini'">
		<dt><a href="#" title=""><img src="img/schemas/mini/anat2011_3.gif" width="100" height="100" alt="" /></a></dt>

		<dd><h5>[ Sch&eacute;ma 4 ] Abdomen en coupe horizontale</h5><p style="text-align:center;">3 icônes ici</p></dd>
	</dl>
</div>
<div class="fin_schema"></div>

<p>suite du cours ...</p>

(j'ai volontairement vidé les alt, les title, et les href pour plus de clarté)

- Code CSS associé (en media="print")

.schemas /* regroupement de vignettes de schémas */
{
	text-align:center;
	width:auto;
	page-break-inside:avoid;
	page-break-after:auto;
	page-break-before:auto;
}

dl.schema_mini, .schema_mini_hover
{
	border:1px solid #330099;
	background-color:#FEF5D5;/*#FBE9D1;*/
	width:180px;
	text-align:center;
	padding:10px;
	float:left;
	margin-right:1em;
	min-height:170px;
	*height:170px; /* hack IE */
	page-break-inside:avoid;
	page-break-after:avoid;
}

.schema_mini_hover
{
	border:1px dotted #FF0000;
	background-color:#DDDDDD;
}

/*.schema_mini dt { font-weight: bold; } */

#content .schema_mini dt img, .schema_mini_hover dt img
{
	border:0;
	width:100px;
	height:100px;
}


#content .schema_mini_hover dt a:hover
{
	background-color:#DDDDDD;
}

.schema_mini dd, .schema_mini_hover dd
{
	margin: 0;
	padding: 0;
	padding-top:0.5em;
}

Screenshot du résultat HTML :
http://pix.nofrag.com/3d/3d/58d44c525784626c9ac9c2496611t.jpg


Screenshot du résultat d'aperçu avant impression :
http://pix.nofrag.com/54/dc/b77d259c478f6d1a38b3d3ef5039t.jpg

Est-ce que vous voyez d'où peut venir mon problème ?
PS : si dans le media="screen" je fixe une hauteur à monb div, il "encadre" bien mes vignettes, mais en height:auto ou sans height, il est tout raplapla...
Modifié par Malcolm (06 Feb 2007 - 23:30)

si personne n'a d'idée, je ferai mes pages "à la main" en mettant des div pour imposer localement les page break, c'est moins facile comme solution, tant sur la mise en place que sur l'évolutivité, mais ça permettrait de résoudre le problème. N'y voyez pas un "up" en urgence, je peux concevoir que la solution ne soit pas si évidente.