28218 sujets

CSS et mise en forme, CSS3

Bonjour,

J'ai créer une page qui doit être possible d'imprimer. En mode ecran tous les blocs se suivent, mais pour l'impression, elle doit se structurer en plusieurs page.
Pour résumer son architecture elle se compose de cette façon:

while () {
    <div id='bloc'>...</div>
}


avec dans mon fichier .css :

#bloc {
    page-break-inside: avoid;
}


Donc normalement j'obtiens plusieurs pages avec à l'intérieur, une succession de 'blocs'.
Le problème étant que si un 'bloc' est situé en fin de page, il est coupé en deux avec une partie sur la 1ère page et la fin sur la suivante.
En mettant "page-break-inside" à "avoid", je pensais que cela n'arriverait pas.

J'ai ce problème sous FireFox et IE, donc j'ai bien peur que le problème ne vienne de moi. Pourtant les sauts de page que j'ai instaurés d'aure part sur le site avec "page-break-after: always" fonctionne tres bien.

Ai-je mal compris le systeme page-break-inside? Ou y a t-il une "subtilité" en plus à prendre en compte.
Heu Smiley confus
J'ai dis une connerie, on comprend rien à mes explications ou vous avez quelquechose contre les posteurs qui on un pseudo commençant par Biba ?
Biba a écrit :
Heu Smiley confus
J'ai dis une connerie, on comprend rien à mes explications ou vous avez quelquechose contre les posteurs qui on un pseudo commençant par Biba ?


Non, non, il n'y a pas d'austracisme anti-Biba Smiley cligne Question de temps, simplement, ou de compétences...

Je ne me suis jamais beaucoup amusé avec les sauts de page. Mais d'après ce que tu écris, il me semble voir une source possible de ton problème.

Si je suis bien, tu fais une boucle, et dans ton fichier HTML, tu as plusieurs <div id="bloc"> qui se suivent? Il ne faut pas chercher plus loin, je crois. Un idenditifiant doit être unique dans une page. Si tu l'utilises plusieurs fois, je crois me rappeler que la CSS ne s'applique qu'au dernier rencontré.
Donc si ta page comporte plusieurs <div id="bloc">, il y a de fortes chances que seul le dernier ne soit pas coupé à l'impression.

Essaie donc de remplacer <div id="bloc"> par <div class="bloc"> et dans ta CSS, #bloc par .bloc.
Modifié par Gilles (16 Jun 2005 - 09:59)
Ah c'est tres intéressant comme réponse, merci beaucoup.

Je vais essayer ça tout de suite, en tout cas j'ai compris que mon architecture n'est pas au point avec ces ID . Smiley sweatdrop
En fait étant parti de bloc unique j'ai commencé avec les ID et par pragmatisme j'ai continué ainsi pour mes blocs...

Finalement ça ne change rien Smiley bawling pour ces fichus sauts de page, mais mon code est plus aux normes, donc Gilles 1/2 Merci Smiley lol .

Je vais essayer de concocter quelquechose avec "orphans" et "widows", les blocs contiennent du texte, donc il y a peut être un coup à jouer, mais je ne suis sûr de rien Smiley ohwell
Modifié par Biba (16 Jun 2005 - 10:55)