impression avec haut et pied de page

impression avec haut et pied de page - HTML/CSS - Programmation

Marsh Posté le 13-05-2009 à 18:49:50    

Bonjour à tous,
 
je vous expose mon problème :
 
je dois pouvoir imprimer une facture sans utiliser le format pdf. Pour cela j'utilise la fonction window.print() . Mon problème est que je voudrais pouvoir mettre un haut de page et bas de page identique sur chacune de mes pages. Pour info, le contenu principale de ma page est un tableau (en gros je voudrai header=>tableau=>footer sur chaque page). J'ai réussi à le faire en utilisant :
<style type=text/css media=print>
#enTetePrint {
  display: block;
  position: fixed;
  top: 0;
  right: 0;
  }
#piedPagePrint {
  display: block;
  position: fixed;
  bottom: 0;
  right: 0;
  }
 
</style>
 
Grâce à ce code, j'affiche le header et le footer sur chacunes des pages. Le problème est que mon tableau chevauche le header et le footer. Je voudrais donc dire à mon tableau tu commences à 3 cm du haut et 3 cm du bas sur chacune des pages afin de laisser de la place au pied et haut de page. Je n'ai pas trouvé de solution, j'ai essayé avec @page{ margin-top:3 cm; margin-bottom:3cm;} mais cela pousse le header, le footer et le table de 3cm. J'ai essayé des combinaisons avec @page et le table sans réussir. J'ai aussi essayé avec des thead, tfoot, tbody mais je n'ai pas été convaincu car premièrement, les navigateurs réagissaient différemment et deuxièmement le footer n'était pas tout en bas de la page mais juste après la fin du tableau pour la dernière page.
 
Je vous demande donc de l'aide pour pouvoir définir des marges mais seulement sur mon tableau. J'espère avoir été à peu prêt claire.
 
PS : j'utilise ce code :
 tr{
page-break-inside:avoid;
}
pour que les tr de mon tableau ne soit pas coupé. Petit problème, la bordure bottom de chaque <tr> de fin de page n'est pas visible sur le bas de la page mais seulement sur le haut de la prochaine page (sur le tr d'après en gros). Ca fait un peu bisar de pas avoir cette bordure, on a l'impression que le tr n'est pas fini.  


---------------
Mon Blog va vous donnez la possibilité de gagnez de l'Argent avec des barres pubs et Astuces. >>> http://argent-en-surfant.blog.mongenie.com/ <<<
Reply

Marsh Posté le 13-05-2009 à 18:49:50   

Reply

Marsh Posté le 14-05-2009 à 10:47:22    

Après réflexion, j'ai opté pour la solution tfoot, thead, tbody. J'ai réglé les problèmes que cela posaient sur les différents navigateurs. Quand j'imprime, j'ai bien mon header, mon contenu, mon footer sur chacune des pages et sans chevauchement. Cependant je suis face à deux problèmes :
 
- Pour passer à la page suivante à chaque TR j'utilisais page-break-inside:avoid;
Cependant, maintenant cela n'est plus pris en compte. J'ai essayé avec page-break-after et before en auto ça ne fonctionne pas. En always ça fonctionne mais (et c'est logique) ça me fait beaucoup de feuilles pour pas beaucoup de contenu.
 
- il faut que le footer soit toujours tout en bas. Or sur la dernière page il est juste à la fin du tableau (logique aussi). Avec un height à 100% ça ne rend pas comme ça (encore moins sous IE). De plus si j'arrive à faire le saut de page quand un TR est coupé, le footer sera plus ou moins bas en fonction de la taille du TR le précédent.
 
Je pense pouvoir régler le problème pour la dernière page afin que le footer soit tout en bas, mais seulement pour la dernière page. Je vais compter le nombre de ligne et s'il n'y a pas assez de ligne pour que le footer soit tout en bas alors j'ajoute des br. (je fais cela en php car j'utilise des requêtes pour afficher le contenu)
 
Si vous comprenez pas ce que je dis, n'hésitez pas à poser des questions.
 
Merci d'avance


Message édité par lanfeust49 le 14-05-2009 à 14:19:07
Reply

Marsh Posté le 14-05-2009 à 11:02:30    

salut,
 
il faudrait que tu joignes du html en plus du css pour qu'on puisse faire des tests...
 

Reply

Marsh Posté le 14-05-2009 à 14:34:36    

pataluc a écrit :

salut,
 
il faudrait que tu joignes du html en plus du css pour qu'on puisse faire des tests...
 


 en html ça donne ça :
 

Code :
  1. <table>
  2.           <thead>
  3.                     <tr>
  4.                           <th>mon header</th>
  5.                      </tr>
  6.           </thead>
  7.           <tfoot>
  8.                    <tr>
  9.                         <th>mon footer</th>
  10.                    </tr>
  11.           </tfoot>
  12.           <tbody>
  13.                     <tr>
  14.                          <td>
  15.                                  <table>
  16.                                    <tr>
  17.                                       <td>
  18.                                      contenu1
  19.                                      </td>
  20.                                      <td>
  21.                                      contenu2
  22.                                      </td>
  23.                                       <td>
  24.                                      contenu3
  25.                                      </td>
  26.                                   </tr>
  27.                               </table>
  28.                                <table id="tableau">
  29.                                    <tr  style="page-break-inside:avoid;">
  30.                                       <td>
  31.                                      contenu1
  32.                                      </td>
  33.                                      <td>
  34.                                      contenu2
  35.                                      </td>
  36.                                       <td>
  37.                                      contenu3
  38.                                      </td>
  39.                                   </tr>
  40.                                   <tr style="page-break-inside:avoid;">
  41.                                    ainsi de suite, le nombre de tr en fonction du nombre de produit dans la facture</tr>
  42.                               </table>
  43. <table>
  44.                                    <tr>
  45.                                       <td>
  46.                                      contenu1
  47.                                      </td>
  48.                                      <td>
  49.                                      contenu2
  50.                                      </td>
  51.                                       <td>
  52.                                      contenu3
  53.                                      </td>
  54.                                   </tr>                               
  55.                               </table>
  56.                            </td>
  57.                        </tr>
  58.                    </tbody>
  59.                   </table>


 
En faite il y a 1 tableau me permettant de répéter le haut de page et bas de page avec les thead et tfoot. Ce tableau est composé de 3 autres tableaux. Le deuxième est celui qui a une taille variable en fonction de la facture que l'on a réalisé. C'est pour cela que je mets les page-break.
 
css :

Code :
  1. <style type=text/css media=all>
  2. #tableau{
  3. padding:0;
  4. margin:0;
  5. }
  6. </style>
  7. <!-- pour l'impression seulement, ce display permet de corriger un bug sous IE -->
  8. <style type=text/css media=print>
  9. thead {
  10. display: table-header-group;
  11. }
  12. tfoot {
  13. display: table-footer-group;
  14. }
  15. </style>


 
J'espère que c'est plus claire et que ça aidera certains


Message édité par lanfeust49 le 14-05-2009 à 14:38:56
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed