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

Marsh Posté le 27-05-2025 à 11:33:46    

Je déterre ce sujet, car je viens d'avoir la même problématique d'impression de courrier depuis un site web en générant logo en entête et pied de page.  
 
L'impression d'un seul page ne posse bien sur pas de problème : les balises <header> et <footer> suffissent.  
 
Cela ce complique dès que le courrier passe sur 2 pages. Pour le header, je n'avais pas de problème, car je le voulais que sur la première. un simple "position:absolute;" suffit à cela.  
Pour le footer, là, gros problème : il se superposait au texte de mon courrier.  
 
Dans mon cas, je ne pouvais pas utilisé la solution ci-dessus du thead/tfoot qui fonctionne bien, car mon courrier contenait déjà un table avec son propre entête / pied géré de cette manière.  
 
La réponse classique trouvée sur la toile est de mettre un "margin-bottom" sur le contenu de mon courrier pour réserver la place au <footer>. Dans les faits, cela ne fonctionne que pour la dernière page !
Mettre un "margin-bottom" sur @page est une meilleur idée ; sauf qu'il que la balise <footer> ne peut pas apparaitre dans cette zone libérée !
 
La solution est pourtant presque là : @bottom-center { content: "coucou"; } fonctionne lui !  
L'astuce final, c'est de remplacer ce texte par un fichier svg, soit :  
 

Code :
  1. <style>
  2. @page  {
  3.     margin-bottom: 110px;
  4.     @bottom-left {
  5.         content: url("pied.svg" );
  6.     }
  7. }
  8. </style>


avec pied.svg :
 

Code :
  1. <svg height="90" width="700" xmlns="http://www.w3.org/2000/svg">
  2. <text style="fill:darkgray; font-weight:lighter; font-family:sans-serif; font-size:13px;">
  3.         <tspan x="0" y="13">Siège social</tspan>
  4.         <tspan x="0" y="28">SOCIETE</tspan>
  5.         <tspan x="0" y="43">Adresse de ma société</tspan>
  6. <tspan x="0" y="80" style="font-size:8px;" textLength="700" lengthAdjust="spacing">SAS au capital de .... Euros - SIREN ..... - RCS .... - N° TVA intracom. : FR .... - SIRET : ....</tspan>
  7.     </text>
  8. </svg>


Message édité par patrick72 le 27-05-2025 à 11:38:13
Reply

Sujets relatifs:

Leave a Replay

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