Imposer une taille de page pour impression

Imposer une taille de page pour impression - HTML/CSS - Programmation

Marsh Posté le 06-06-2006 à 13:06:18    

Bonjour,
 
Je voudrais imprimer un formulaire. Celui-ci est contenu dans tableau. Lorsque je veux imprimer ce tabeau, il dépasse de ma page. J'ai beau réduire (ex: width="70%" ) ou définir un format de page et des marges d'impression par une CSS, rien n'y fait. J'ai même essayé d'imbriquer le tableau dans un autre tableau dont j'aurais contrôlé la dimension. J'ai aussi essayé d'imbriquer mon tableau dans un bloc (DIV) dont je réglais aussi la taille, mais rien ne se passe, mon tableau déborde toujours à l'aperçu avant impression. Ca le fait pour IE6 et Firefox 1.5.
 
Y aurait pas un moyen d'imposer la taille de ma page à imprimer par un zoom ou un autre truc dans le genre?
 
Merci

Reply

Marsh Posté le 06-06-2006 à 13:06:18   

Reply

Marsh Posté le 06-06-2006 à 13:22:13    

Hello,
 
On peut avoir un aperçu de ta feuille de style pour l'impression (media="print" ) ? ;)

Message cité 1 fois

---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 06-06-2006 à 13:29:30    

sibelius a écrit :

Hello,
 
On peut avoir un aperçu de ta feuille de style pour l'impression (media="print" ) ? ;)


 
 
Salut, merci de ta réponse.
 
Voici ma feuille de style (elle est pas finie, hein...):
 

Code :
  1. @page {
  2. size:29.7cm 21cm;
  3. margin:1cm;
  4. }
  5. body {
  6. background-color:transparent;
  7. margin:0px 0px 0px 0px;
  8. width: 90%; /* Marche pas*/
  9. }
  10. /*Différents niveaux hiérarchiques*/
  12. h1 {
  13. font-family:verdana, sans-serif;
  14. font-size:80%;
  15. color:black;
  16. background-color:transparent;
  17. text-align:left;
  18. }
  19. h2 {
  20. font-family:verdana, sans-serif;
  21. font-size:80%;
  22. color:black;
  23. background-color:transparent;
  24. text-align:left;
  25. }
  26. h3 {
  27. font-family:verdana, sans-serif;
  28. font-size:80%;
  29. color:black;
  30. background-color:transparent;
  31. text-align:left;
  32. }
  33. p {
  34. font-family:verdana, sans-serif;
  35. font-size:80%;
  36. color:black;
  37. background-color:transparent;
  38. text-align:left;
  39. margin-left:0px;
  40. margin-right:0px;
  41. }
  42. li {
  43. font-family:verdana, sans-serif;
  44. font-size:80%;
  45. color:black;
  46. background-color:transparent;
  47. text-align:left;
  48. margin-left:0px;
  49. margin-right:0px;
  50. }
  51. a:link {
  52. font-family:verdana, sans-serif;
  53. font-size:80%;
  54. color:blue;
  55. background-color:#D1D1E1;
  56. text-decoration:underline;
  57. }
  58. a:visited {
  59. font-family:verdana, sans-serif;
  60. font-size:80%;
  61. color:blue;
  62. background-color:#D1D1E1;
  63. text-decoration:underline;
  64. }
  65. a:hover {
  66. font-family:verdana, sans-serif;
  67. font-size:80%;
  68. color:blue;
  69. background-color:#D1D1E1;
  70. text-decoration:underline;
  71. }
  73. table {
  74. /*border-color:black;*/
  75. border-style:solid;
  76. border-width:1px;
  77. background-color:transparent;
  78. border-collapse: collapse;
  79. }
  81. td {
  82. font-family:verdana, sans-serif;
  83. font-size:80%;
  84. text-align:left;
  85. background-color:transparent;
  86. border-color:black;
  87. border-style:solid;
  88. border-width:1px;
  89. }
  90. INPUT {
  92.      /*background-color:white;*/
  93.      font-size:12px;
  94.      font-family:arial;
  95. }
  96.      /*DEFINITION DES CLASSES*/
  97. .Info1 {
  98.      font-family: Arial;
  99.      font-weight: bold;
  100.      font-size:16px;
  101. }
  102. .Titre_gen {
  103.      border-style:solid;
  104.      background-color:white;
  105.      font-family: Arial;
  106.      font-weight: bold;
  107.      font-size:22px;
  108.      color:#000000;
  109. }
  110. .Titre_Table {
  111.      border-style:solid;
  112.      background-color:#D1D1E1;
  113.      font-weight: bold;
  114.      font-size:16px;
  115.      /*color:#00C0FF;*/
  116. }
  117. .Table_Entete {
  118.      border-style:solid;
  119.      background-color:#F5F5FF;
  120.      /*
  121.      font-family: Arial;
  122.      font-weight: bold;
  123.      font-color: navy;
  124.      font-size:14px;
  125.      */
  126.      /*color:#00C0FF;*/
  127. }
  128. .Table_Corps_infos {
  129.      border-style:solid;
  130.      background-color:#E0E0F6;
  131.      /*color:#00C0FF;*/
  132. }
  133. .Table_Corps_contenu {
  134.      border-style:solid;
  135.      background-color:#E0E0F6;
  136.      /*color:#00C0FF;*/
  137. }
  138. .TD_Entete {
  139.      font-family:Arial;
  140.      text-align:left;
  141.      background-color:transparent;
  142.      color:navy;
  143.      border-style:solid;
  144.      border-width:1px;
  145. }
  147. .TD_Corps1 {
  148.      font-family:Arial;
  149.      text-align:left;
  150.      /*empty-cells:collapse;*/
  151.      background-color:transparent;
  152.      border-color:black;
  153.      border-style:solid;
  154.      border-width:1px;
  155.      color:navy;
  156. }
  159. SELECT {
  160.      color:navy;
  161.      background-color:white;
  162.      font-size:10px;
  163.      font-family:arial;
  164. }

Reply

Marsh Posté le 06-06-2006 à 13:35:11    

En fait, je pense que tu ferais mieux de faire une feuille de style pour l'impression (print) plutôt que d'essayer d'utiliser des propriétés comme @page et size qui ne sont pas correctement prises en compte :
http://forum.alsacreations.com/top [...] 4&tid=1633


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 06-06-2006 à 13:41:38    

Mais ça va être la même chose de définir une nouvelle css, non? Comment faire pour que la nouvelle CSS soit prise en compte?
 
En fait si t'avais un exemple de CSS pour l'impression ça pourrait bien m'aider!
 
Merci

Reply

Marsh Posté le 06-06-2006 à 13:47:42    

En fait, une feuille de style pour l'impression est simplement une autre feuille de style (ex: print.css) que tu inclues de cette façon :

Code :
  1. <link type="text/css" rel="stylesheet" href="print.css" media="print" />


 
Tu y placeras les modifs qui doivent être prises en compte lors de l'impression.
 
Par exemple :  

Code :
  1. table {width: 70%}


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 06-06-2006 à 13:48:59    

Pour l'instant j'ai ajouté à ma CSS:
 
@media print {
  a {
    font-size: 10pt;
  }
  body {
    background-color:transparent;
    margin:0px 0px 0px 0px;
    width: 90%;
}
 
Et ça me fait toujours la même chose.
 
Je vois pas trop comment faire pour qu'il m'affiche la page sur une feuille A4 (pour l'instant il déborde sur la droite), mais je continue de chercher!

Reply

Marsh Posté le 06-06-2006 à 13:49:34    

Ok, donc c'est pas dans la même CSS. Merci, je vais essayer!

Reply

Marsh Posté le 06-06-2006 à 14:04:44    

Ca marche pas non plus. J'ai créé une CSS print comme tu m'as dit:
 

Code :
  1. .print {
  2.   width:"80%";
  3. }


 
Et dans mon formulaire, j'ai mis un TABLE général de classe print. Ce tableau général englobe tout le formulaire. Mais ça marche pas, j'affiche toujours la même page et pas 80% de sa largeur.

Message cité 2 fois
Message édité par PedroBD le 06-06-2006 à 14:05:35
Reply

Marsh Posté le 06-06-2006 à 14:14:41    

PedroBD a écrit :

Ca marche pas non plus. J'ai créé une CSS print comme tu m'as dit:
 

Code :
  1. .print {
  2.   width:"80%";
  3. }


 
Et dans mon formulaire, j'ai mis un TABLE général de classe print. Ce tableau général englobe tout le formulaire. Mais ça marche pas, j'affiche toujours la même page et pas 80% de sa largeur.


 
print est utilisé pour l'impression, pas à l'écran

Message cité 1 fois

---------------
What if I were smiling and running into your arms? Would you see then what I see now?  
Reply

Marsh Posté le 06-06-2006 à 14:14:41   

Reply

Marsh Posté le 06-06-2006 à 14:17:40    

PedroBD a écrit :

Ca marche pas non plus. J'ai créé une CSS print comme tu m'as dit:
 

Code :
  1. .print {
  2.   width:"80%";
  3. }


 
Et dans mon formulaire, j'ai mis un TABLE général de classe print. Ce tableau général englobe tout le formulaire. Mais ça marche pas, j'affiche toujours la même page et pas 80% de sa largeur.


OK, dans ce cas, tu as certainement des cellules de largeur fixe et définies et dont le total est plus grand que la page.
En clair si l'ensemble de tes cellules fait 30cm de large, ça ne sert à rien de dire que ton tableau est censé faire 80%
Il faut revoir les tailles des cellules.


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 06-06-2006 à 14:25:43    

ok merci! Chose curieuse quand même, ton truc marche bien sous Firefox!


Message édité par PedroBD le 06-06-2006 à 14:32:15
Reply

Marsh Posté le 06-06-2006 à 14:57:47    

Bon j'ai vérifié mes cellules, je vois pas trop le bin's et en plus je comprends pas pourquoi ça marche bien sous Firefox

Reply

Marsh Posté le 06-06-2006 à 15:09:45    

jagstang a écrit :

print est utilisé pour l'impression, pas à l'écran


 
OK, il est utilisé pour un window.print() si je comprends bien. Tu aurais pas un exemple d'une CSS pour l'impression stp?

Reply

Sujets relatifs:

Leave a Replay

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