Impression et sauts de pages

Impression et sauts de pages - HTML/CSS - Programmation

Marsh Posté le 21-02-2005 à 17:47:10    

Bonjour à tous,
 
donc tout d'abord je vous préviens, je débute en CSS, pour que vous ne soyez pas surpris si je sors quelques aberrations.
 
J'ai réalisé un script affichant des commandes, donc des tableaux de tailles variables, en nombre variables. Jusque là ça roule pas de problème.  
 
Cette page, destinée à être imprimée, contient un titre (en haut de page), défini comme ceci :
 
 
.titre2 {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 14px;
 font-weight: bold;
 color: #8F1007;
 border: 1px solid #990000;
 padding:8px;
}
 
donc à priori rien de sorcier.
 
Ce que je ne comprend pas, ce qu'à l'impression j'obtiens toujours une première page ne contenant que le titre, et les tableaux de commandes sur les pages suivantes.  
 
Quelqun a-t-il une idée ?
 
Merci d'avance.
 
PS : Je précise que je suis sur Firefox, IE gérant très mal les impressions de tableaux.

Reply

Marsh Posté le 21-02-2005 à 17:47:10   

Reply

Marsh Posté le 21-02-2005 à 18:00:34    

T'as juste ça dans ton css ou t'as d'autres trucs? C'est quoi le code de ta page html?

Reply

Marsh Posté le 22-02-2005 à 09:18:59    

Code :
  1. <body leftmargin="10" topmargin="10" marginwidth="10" marginheight="10">
  2. <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" height="100%">
  3. <tr valign="top" height="15">
  4. <td align="right" style="padding-right:5px;padding-top:5px;padding-bottom:10px;">
  5. <a href="javascript:self.close();">
  6. <img src="zims/bt_close.jpg" width="14" height="13" border="0" id="btfermer" alt="Fermer la fenêtre"></a>
  7. </td></tr>
  8. <tr valign="top" height="30">
  9. <td align="center">
  10. <div class="titre2" style="border:0px;">
  11. ::: Commandes magasin du 21/02/2005 pour le poste : DIVERS
  12. </div><br>
  13. </td>
  14. </tr>
  15. <tr valign="top">
  16. <td>
  17. <div style="width:800px;max-width:800px; vertical-align:top;">
  18. <div class="titre2" style="margin-bottom:25px;">
  19. Commandes passées par le magasin : WILSON
  20. </div>       
  21. <div class="linecmd" style="width:720;">
  22. <table width="710" align="left" cellspacing="0" cellpadding="1" border="1" style="display:inline-table;clear:right;margin-right:10px; margin-bottom:30px;">
  23. <tr>
  24. <th width="125" class="entetetable2">BOITAGE</th>
  25. <th width="30" align="center" class="entetetable1">-</th>
  26. <th width="30" align="center" class="entetetable1">1/2 L</th>
  27. <th width="30" align="center" class="entetetable1">3/4 L</th>
  28. <th width="30" align="center" class="entetetable1">1 L</th>
  29. <th width="30" align="center" class="entetetable1">GM</th>
  30. <th width="30" align="center" class="entetetable1">PM</th>
  31. <th width="30" align="center" class="entetetable1">MM</th>
  32. <th width="30" align="center" class="entetetable1">20 X 11</th>
  33. <th width="30" align="center" class="entetetable1">22 X 11</th>
  34. <th width="30" align="center" class="entetetable1">24 X 11</th>
  35. <th width="30" align="center" class="entetetable1">26 X 11</th>
  36. <th width="30" align="center" class="entetetable1">30 X 11</th>
  37. <th width="30" align="center" class="entetetable1">24 X 15</th>
  38. <th width="30" align="center" class="entetetable1">20 X 16</th>
  39. <th width="30" align="center" class="entetetable1">20 cm</th>
  40. <th width="30" align="center" class="entetetable1">30 cm</th>
  41. <th width="30" align="center" class="entetetable1">40 cm</th>
  42. <th width="30" align="center" class="entetetable1">50 cm</th>
  43. <th width="30" align="center" class="entetetable1">60 cm</th>
  44. </tr>
  45. <!-- -->
  46. <tr>
  47. <td width="125" align="left" class="celltable1">Boite étoile</td>
  48. <td class="celltable1" align="center">56</td>
  49. <td class="celltable1" align="center">&nbsp;</td>
  50. <td class="celltable1" align="center">&nbsp;</td>
  51. <td class="celltable1" align="center">&nbsp;</td>
  52. <td class="celltable1" align="center">&nbsp;</td>
  53. <td class="celltable1" align="center">&nbsp;</td>
  54. <td class="celltable1" align="center">&nbsp;</td>
  55. <td class="celltable1" align="center">&nbsp;</td>
  56. <td class="celltable1" align="center">&nbsp;</td>
  57. <td class="celltable1" align="center">&nbsp;</td>
  58. <td class="celltable1" align="center">&nbsp;</td>
  59. <td class="celltable1" align="center">&nbsp;</td>
  60. <td class="celltable1" align="center">&nbsp;</td>
  61. <td class="celltable1" align="center">&nbsp;</td>
  62. <td class="celltable1" align="center">&nbsp;</td>
  63. <td class="celltable1" align="center">&nbsp;</td>
  64. <td class="celltable1" align="center">&nbsp;</td>
  65. <td class="celltable1" align="center">&nbsp;</td>
  66. <td class="celltable1" align="center">&nbsp;</td>
  67. </tr>
  68. </table>
  69. </div>
  70. <div class="linecmd" style="width:180;">
  71. <table width="170" align="left" cellspacing="0" cellpadding="1" border="1" style="display:inline-table;clear:right;margin-right:10px; margin-bottom:30px;">
  72. <tr>
  73. <th width="125" class="entetetable2">BOLDUC</th>
  74. <th width="30" align="center" class="entetetable1">-</th>
  75. </tr>
  76. <!-- -->
  77. <tr>
  78. <td width="125" align="left" class="celltable1">Blanc</td>
  79. <td class="celltable1" align="center">60</td>
  80. </tr>
  81. <tr>
  82. <td width="125" align="left" class="celltable1">Orange</td>
  83. <td class="celltable1" align="center">86</td>
  84. </tr>
  85. <tr>
  86. <td width="125" align="left" class="celltable1">Rose indien</td>
  87. <td class="celltable1" align="center">7</td>
  88. </tr>
  89. </table>
  90. </div>
  91. <hr color="#FFFFFF" style="display:block;clear:both;margin-top:10px;">
  92. <!---->
  93. <div class="linecmd" style="width:240;">
  94. <table width="230" align="left" cellspacing="0" cellpadding="1" border="1" style="display:inline-table;clear:right;margin-right:10px; margin-bottom:30px;">
  95. <tr>
  96. <th width="125" class="entetetable2">BOUGIES</th>
  97. <th width="30" align="center" class="entetetable1">-</th>
  98. <th width="30" align="center" class="entetetable1">GM</th>
  99. <th width="30" align="center" class="entetetable1">PM</th>
  100. </tr>
  101. <!-- -->
  102. <tr>
  103. <td width="125" align="left" class="celltable1">Blanc</td>
  104. <td class="celltable1" align="center">60</td>
  105. <td class="celltable1" align="center">89</td>
  106. <td class="celltable1" align="center">3</td>
  107. </tr>
  108. <tr>
  109. <td width="125" align="left" class="celltable1">Rose</td>
  110. <td class="celltable1" align="center">90</td>
  111. <td class="celltable1" align="center">54</td>
  112. <td class="celltable1" align="center">5</td>
  113. </tr>
  114. <tr>
  115. <td width="125" align="left" class="celltable1">Bleue</td>
  116. <td class="celltable1" align="center">&nbsp;</td>
  117. <td class="celltable1" align="center">17</td>
  118. <td class="celltable1" align="center">14</td>
  119. </tr>
  120. <tr>
  121. <td width="125" align="left" class="celltable1">Bobèche</td>
  122. <td class="celltable1" align="center">19</td>
  123. <td class="celltable1" align="center">&nbsp;</td>
  124. <td class="celltable1" align="center">&nbsp;</td>
  125. </tr>
  126. </table>
  127. </div>
  128.              
  129. </div></tr></table>


 
 
 
Désolé si c'est pas super propre, en fait je tatonne plus qu'autre chose en CSS et j'ai galéré pour que les tableaux s'affichent les uns après les autres (et non les uns en dessous des autres).  
 
Pour la CSS :
 

Code :
  1. .celltable1 {
  2. font-family: Verdana, Arial, Helvetica, sans-serif;
  3. font-size: 10px;
  4. font-weight: normal;
  5. color: #000000;
  6. }
  7. .entetetable2 {
  8. font-family: Verdana, Arial, Helvetica, sans-serif;
  9. font-size: 10px;
  10. font-weight: normal;
  11. color: #990000;
  12. }
  13. .linecmd {
  14. display:inline;
  15. position:relative;
  16. top:20px;
  17. padding:10px;
  18. margin-top:30px;
  19. vertical-align:top;
  20. clear:both;
  21. }


 
 
 
 

Reply

Marsh Posté le 22-02-2005 à 15:44:48    

please help  :cry:

Reply

Marsh Posté le 23-02-2005 à 15:05:33    

pourquoi tu le mets dans un div ton titre?
Et pourquoi tu utilises des div pour mettre tes tableaux sur la même ligne? (suffit de faire un tableau de x colonnes et d'une ligne, chacune des cellules comprenant elle-même un tableau)
Alors je sais bien que d'utiliser du CSS c'est hachement plus à la mode que d'utiliser le HTML tout con de papa, mais bon en l'occurence les navigateurs ne respectent pas forcément bien et tout le CSS alors que niveau HTML, depuis le temps, c'est à peu près bon.
Et l'emboitement de tableaux fonctionne très bien.

Reply

Marsh Posté le 23-02-2005 à 15:14:31    

leMicky > pour ça : http://www.cybercodeur.net/weblog/ [...] index.html
 
Et entre nous, soit on fait un site en html en se contrefoutant de la signification des balises, soit on le faire de maniére plus moderne en utilisant des css et en utilisant les tableaux que quand on veut afficher un tableau. En xhtml, les tableaux ne sont plus des balises de mises en page.
 
Au fait j_lecruel : Pas de <html> dans ta page? pas de </body> ni de </html> non plus? Pas de doctype? Ca respecte aucune norme ça.


Message édité par omega2 le 23-02-2005 à 15:14:40
Reply

Marsh Posté le 23-02-2005 à 15:29:04    

Non mais je n'ai mis que la partie concernée (pour éviter que vous vous tapiez 3 tonnes de code).
 
Pour le problème de saut de page je l'ai résolu en mettant le titre dans la même cellule que les tableaux, avec un margin-bottom à 30px.  
 
LeMicky > cette page est generée par un script PHP, et comme je le disait ces tableaux sont en nombre variable, de largeur et hauteur variables.


Message édité par j_lecruel le 23-02-2005 à 15:29:50
Reply

Marsh Posté le 23-02-2005 à 15:42:51    

Perso, j'utilise des tableaux et du CSS, genre dans l'exemple donné sur le site de ton lien le mec qui fait 40 tableaux imbriqués... c'est clair que c'est quelque peu abusé.
Mais bon quand je vois que j_lecruel a passé un maximum de temps pour mettre ces 3 pauvres tableaux sur la même ligne, je me dis que peut-être un tableau imbriqué fait en 3 secondes montre en main aurait fait l'affaire.
 
Après, c'est sûr que si tu es à l'école/section R&D et que tu as tout ton temps ou presque, vas y, fais toi plaisir, fais les choses nickel chrome à la pointe du progrès etc... Maintenant, si tu es sur un forfait super tendu niveau planning, ben tu vas au plus simple tout en restant correct : car le coup du "tu plombes ta page en ajoutant un tableau imbriqué"... je suis sûr que le code HTML avec des div de partout contient plus de lettres que le même avec un <table><tr><td>...</td><td>...</td><td>...</td></tr></table>
 
Enfin, malheureusement, les navigateurs que tu trouves dans les entreprises ne sont pas forcément les plus récents et enfin les CSS ne sont pas toujours interprétés correctement/complétement par les dits navigateurs.
 
Ok?!
Disons que les CSS c'est bien et super pratique, d'ailleurs ce serait génial si les navigateurs respectaient réellement et complétement la norme, mais que parfois, la méthode à papa supra rapide rend bien service aussi.
En conclusion, ne pas être extrêmiste dans un sens comme dans l'autre.
Suis-je compris?

Reply

Marsh Posté le 23-02-2005 à 16:01:06    

LeMicky > je t'ai bien compris et je ne peux pas faire avec ta méthode.

Reply

Marsh Posté le 23-02-2005 à 16:01:21    

A par pour des navigateurs tel que nescape4, les css sont assez bien géré pour être utilisable il me semble.
Et pour mettre trois tableaux l'un à côté de l'autre, il me semble que c'est facile à faire avec des div : il sufit de définir sur quel côté de l'élément précédant il doit se coler.
 
T'as raison, il ne faut pas être extrémistes dans un sens ou un autre, mais je trouves qu'aujourd'hui, utiliser des tableaux imbriqués, ca se raproche de l'html extrémismes.
Aprés, c'est sur que si on ne conait que l'html 4 et qu'on n'a pas le temps d'aprerndre ni les régles de l'xhtml ni les css, il vaut mieux utiliser les technologies qu'on maitrise.

Reply

Marsh Posté le 23-02-2005 à 16:01:21   

Reply

Marsh Posté le 23-02-2005 à 16:12:35    

ouf! un moment, j'ai cru que j'étais devenu un vieux con...

Reply

Marsh Posté le 23-02-2005 à 16:18:39    

Mixer CSS, mise en page en tableaux et HTML 3.2, c'est sûr ça fait pas bon ménage...
 
Sinon je suis plutôt pour l'avis qu'il faut être extremiste tout de suite maintenant. Sinon vous allez vous rétamer lorsque l'XHTML 2.0 sera implémenté partout :/

Reply

Marsh Posté le 23-02-2005 à 16:23:06    

FlorentG a écrit :

Mixer CSS, mise en page en tableaux et HTML 3.2, c'est sûr ça fait pas bon ménage...
 
Sinon je suis plutôt pour l'avis qu'il faut être extremiste tout de suite maintenant. Sinon vous allez vous rétamer lorsque l'XHTML 2.0 sera implémenté partout :/


 
Dis moi, tu ne connais pas le monde de l'entreprise (rassure moi), tu sais qu'on trouve encore des windows 3.1 ?  
Donc avant que ce soit partout....je serai à la retraite (enfin si y a encore le système de retraite à cette époque).
 
Mais bon, je suis d'accord pour dire qu'il faut se tenir au courant des évolutions et d'essayer de les suivre. Mais après faut être réaliste et pragmatique.
 
 

Reply

Marsh Posté le 23-02-2005 à 16:24:15    

En entreprise, on a interêt à passer aux normes drastiques. Ca permet après de traiter tes pages HTML comme sources XML, donc les applications sont infinies :) Après c'est sûr faut mettre à jour le parc informatique... Mais ça doit être rentable à terme

Reply

Marsh Posté le 23-02-2005 à 16:50:45    

:)
Enfin, je ne sais pas si tu as vu mais l'informatique n'est pas vraiment une priorité en ce moment :(  
Allez, je m'en vais apprendre le roumain...

Reply

Marsh Posté le 23-02-2005 à 16:53:21    

Ca dépend. Oublie pas que dans pas longtemps, y'aura 5500 sites administratifs à mettre aux normes ;)

Reply

Marsh Posté le 23-02-2005 à 16:58:53    

De toute façon j'espère bien que dans pas si longtemps je ne ferai plus de codage et que je demanderai à des petits jeunes à la pointe du progrès de le faire ;)

Reply

Marsh Posté le 24-02-2005 à 15:37:02    

Bon comme je ne suis pas borné etc... j'ai lu tout plein de choses sur les CSS vs tableaux et... ok ok, je vais tâcher de faire quelques DIV et autres bien sentis et ne plus utiliser de tableau pour la mise en page.
Ca va, je suis encore récupérable ;)

Reply

Marsh Posté le 24-02-2005 à 17:25:31    

Vous avez réussi a en sauver un de plus! ;)

Reply

Marsh Posté le 24-02-2005 à 23:01:08    

youpi. :) Vivement que j'ai finis la prochaine version de mon site web que mes propos corespondent à ce qui est visible sur mon site. :D

Reply

Sujets relatifs:

Leave a Replay

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