28220 sujets

CSS et mise en forme, CSS3

Bonjour,
Dans une feuille de style externe conçue pour l'impression de mes pages HTML, je voudrais empêcher que certains éléments de mes pages soient coupés en deux (imprimés en partie en bas d'une page et en partie en haut de la page suivante).
Pour ce qui concerne un bloc de paragraphes, j'ai réussi à les rendre solidaires en les mettant dans une <div></div> avec la classe
.noBreak {
display:table;
page-break-inside: avoid;
}
Ca marche dans Firefox 1.0.7 (mais pas dans MSIE 6.0, ce qui m'est égal).

En revanche, impossible d'obtenir le même résultat avec un tableau, ce qui est bien dommage.
Ni
.noBreak { display:table;
page-break-inside: avoid;
}
ni
.noBreak { display:table;
display:table;
page-break-inside: avoid;
}
ne fonctionne: le tableau est toujours coupé en deux (s'il se trouve à arriver en bas d'une page)...
Quelqu'un a une idée?
Merci
jojojr
Bonjour jojojr,
Confronté à ce genre de problème, j'utilise maintenant ce "div" à placer juste avant l'endroit où tu veux un saut de ligne.
<div class="ff"> </div>
avec pour CSS :
.ff {line-height: 0px;page-break-after: always;}
papillon41 a écrit :
Bonjour jojojr,
Confronté à ce genre de problème, j'utilise maintenant ce "div" à placer juste avant l'endroit où tu veux un saut de ligne.
<div class="ff"> </div>
avec pour CSS :
.ff {line-height: 0px;page-break-after: always;}

Merci papillon41
Ta solution permet de forcer un saut de page (pas de ligne Smiley eek ) à un endroit bien précis d'une page HTML. Mais pour ça il faut savoir exactement où le texte aura besoin de sauter à la page suivante!
Il nous manque toujours une implémentation fiable de la commande page-break-inside: avoid; dans les 2 navigateurs les plus courants à l'heure actuelle, MSIE et Firefox. Dommage...
Merci quand même, et j'attends toujours d'autres solutions, mais sans trop y croire.
Joseph Smiley bawling