Impression d'une div

Impression d'une div - HTML/CSS - Programmation

Marsh Posté le 29-11-2006 à 09:39:14    

Bonjour à tous,
 
Sur un site Internet, j'ai une div dans laquelle il y a un scrollbar (cette div est inclue dans plusieurs autres div).  
 
Lors de l'impression, je n'ai pas tout le contenu de la div, mais seulement ce que l'on voit à l'écran (l'impression fait un imprim ecran). Comment faire pour imprimer la div en entier, meme ce qui est plus bas dans la page et qui est atteignable à l'écran par la scrollbar.
 
 
Merci d'avance :)

Reply

Marsh Posté le 29-11-2006 à 09:39:14   

Reply

Marsh Posté le 29-11-2006 à 09:46:33    

Je suppose que le div s'est vu doter d'une barre de défilement via une feuille de style ?
Il faut créer une feuille de style pour l'impression, dans laquelle tu désactives cette barre de défilement.
 
CF: http://forum.hardware.fr/hfr/Progr [...] 8725_1.htm

Reply

Marsh Posté le 29-11-2006 à 09:54:11    

Ah d'accord, merci, je vais la désactiver :)

Reply

Marsh Posté le 29-11-2006 à 10:37:51    

Sous ie, ca fonctionne parfaitement (pour une fois), seulement, sur firefox, lors de l'impression, la div, avec l'overflow désactivé, se met au dessus des div suivantes.
 
Y'a pas un moyen d'enlever ce problème ?

Reply

Marsh Posté le 29-11-2006 à 15:40:58    

4bis a écrit :

Sous ie, ca fonctionne parfaitement (pour une fois), seulement, sur firefox, lors de l'impression, la div, avec l'overflow désactivé, se met au dessus des div suivantes.

 

Y'a pas un moyen d'enlever ce problème ?


tu mets aussi un height:auto sur cette div.

 


Je preconise quelque chose de simple :

 

en admettant que cette div a un id "pouet"

 

en html :

Code :
  1. <div id="pouet"></div>


en CSS :

Code :
  1. #pouet {height:300px; overflow:auto}
 

maintenant lorsque tu veux imprimer, il faut desactiver tout ca. solution simple :

 
Code :
  1. function IwantToPrintAllMyStuff() {
  2.    document.body.className+="print"; //on rajoute une classe CSS au body;
  3.    window.print();
  4.    document.body.className=document.body.className.replace(/\bprint\b/,"" ); //on supprime la classe CSS du body;
  5. }


en CSS

Code :
  1. .print #pouet {
  2. height:auto;
  3. overflow:visible;
  4. }
 

La technique consiste à ajouter une classe CSS qui fait ton travail, pas besoin de faire plus de grigri. J'utilise souvent cette méthode pour faire disparaitre un paquet d'éléments


Message édité par gatsu35 le 29-11-2006 à 15:41:48
Reply

Sujets relatifs:

Leave a Replay

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