FORUM Tom's Hardware » Programmation » PHP & MySQL & ASP » [CSS ?] Imprimer le contenu d'un DIV
 

[CSS ?] Imprimer le contenu d'un DIV

Il y a 387 utilisateurs connus et inconnus. Pour voir la liste des connectés connus, cliquez ici
Ajouter une réponse



 Mot :   Pseudo :  
 
Bas de page
Auteur
 Sujet : [CSS ?] Imprimer le contenu d'un DIV
 
Bounty59
Plus d'informations
n°27873
13-02-2007 à 13:18:58

Bonjour,

Malgré mes recherches sur le net, et la création d'une feuille de style CSS print.css, je ne parviens pas à imprimer le contenu d'un div.

Je m'explique...
J'ai une page, composée de 3 DIV :

---------------------------
| DIV_BANNIERE |
---------------------------
| DIV_MENU |
---------------------------
| DIV_TABLEAU |
| |
| |
---------------------------

Je souhaite imprimer uniquement le contenu du tableau, mais la hauteur du DIV correspondant est fixe : une scrollbar permet d'afficher la suite du texte.

J'ai créé un fichier print.css, contenant ceci :

Code :
  1. /*  début de la Partie a ne PAS imprimer  */
  2. #menu{
  3.   display:none;
  4. }
  5.  
  6. #banniere{
  7.   display:none;
  8. }
  9. /*  fin de la Partie a ne PAS imprimer  */
  12. /*  début de la Partie a imprimer  */
  13. #tableau{
  14.   background-color:#FFFFFF;
  15.   display:block;
  16.   clip:auto;
  17.   overflow:visible;
  18. }
  19.   /*  fin de la Partie a imprimer  */



J'ai donc ajouté la ligne suivante, dans ma page HTML :

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



Enfin, la procédure d'impression doit être lancée lors du clic sur un bouton "Imprimer" figurant dans le menu :

Code :
  1. <input type = 'button' style='width: 200px;' value = 'Imprimer le tableau actuel' onclick="javascript:window.print()"/>



Mais l'impression ne fonctionne pas, la page entière s'imprime (bannière, menu et tableau).
D'autre part, seule la partie du tableau visible sur la page est imprimée.

Grand merci par avance à ceux qui prendront le temps de m'aider,
Alex


Message édité par Bounty59 le 13-02-2007 à 13:19:47

boub popsy team
G.M.G.V.S.O.
Profil : Modo matériel
Plus d'informations
n°27874
13-02-2007 à 13:56:53

C'est pas

Code :
  1. display:none;



mais

Code :
  1. visibility: hidden;



Qu'il faut mettre ;)


---------------
SPAM & WAREZ = Ban!
Ultimate Boot CD | Memtest+
Mon bar préféré à Lyon ! | Bijoux Fantaisie de Créateur !
Johan_et_P irlouit
Inside my own Second Life
Plus d'informations
n°27882
13-02-2007 à 18:28:48

"display: none;" fonctionne très bien..

Il faut juste penser soit à placer la feuille "print" après la feuille générale, soit à définir le média de sortie de la feuille générale à media="screen" ainsi :

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


Après, ça fonctionne..

Sans indication de média de sortie sur le lien de la CSS, ça revient à préciser media="all" ;).. Sans oublier que l'ordre des CSS est important, les règles étant toujours cumulatives.

:jap:


Message édité par Johan_et_P irlouit le 13-02-2007 à 18:32:07

---------------
Retrouvez moi sur mon blog : http://www.nicolasullern.net/leblog/
Et aussi sur :
http://www.linkedin.com/in/nicolasullern
http://www.viadeo.com/fr/profile/nicolas.ullern
http://www.copaing.net/johanpirlouit/
boub popsy team
G.M.G.V.S.O.
Profil : Modo matériel
Plus d'informations
n°27883
13-02-2007 à 18:52:05

En effet, toutes mes confuses :jap:

Néanmoins sauf erreur de ma part mettre "display: none;" risque de fusiller ton affichage (enfin pas dans le cas present) si tu alignes des blocs div côte à côte, non ?

(si j'ai le temps je testerais ce soir, vois si ça laisse bien la place ou pas)


---------------
SPAM & WAREZ = Ban!
Ultimate Boot CD | Memtest+
Mon bar préféré à Lyon ! | Bijoux Fantaisie de Créateur !
marsien
Je me la pête
Profil : /!\ Docteur - PDG
Plus d'informations
n°27885
13-02-2007 à 19:35:45

Tu as raisons Boub, display: none et le bloc disparaît y compris sa place. Visibility: hidden le masque mais il garde son emplacement (devenu alors vide).

Message cité 1 fois
boub popsy team
G.M.G.V.S.O.
Profil : Modo matériel
Plus d'informations
n°27887
13-02-2007 à 20:38:38

Merci de la précision, ça m'evites de tester :ange:

(mode feignant ON)

Message cité 1 fois

---------------
SPAM & WAREZ = Ban!
Ultimate Boot CD | Memtest+
Mon bar préféré à Lyon ! | Bijoux Fantaisie de Créateur !
Johan_et_P irlouit
Inside my own Second Life
Plus d'informations
n°27892
13-02-2007 à 21:20:35

Shino-Genin a écrit :

Tu as raisons Boub, display: none et le bloc disparaît y compris sa place.


Ce qui semble intéressant dans le cas présent ;)..

a écrit :

(mode feignant ON)


(bienvenu au club :ange:) ; si si moi aussi, parfois)

:jap:


---------------
Retrouvez moi sur mon blog : http://www.nicolasullern.net/leblog/
Et aussi sur :
http://www.linkedin.com/in/nicolasullern
http://www.viadeo.com/fr/profile/nicolas.ullern
http://www.copaing.net/johanpirlouit/
KangOl
Profil : Pointeur
Plus d'informations
n°27893
13-02-2007 à 21:28:16

un développeur DOIT etre fénéant :o

et surtout appliquer le principe DRY (Don't Repeat Yourself)

marsien
Je me la pête
Profil : /!\ Docteur - PDG
Plus d'informations
n°27894
13-02-2007 à 21:28:53

On est pas là pour faire le boulot à votre place :fou:


:D

Bounty59
Plus d'informations
n°27910
14-02-2007 à 10:11:17

Bonjour,

et merci pour vos réponses.
Cependant, ça ne fonctionne toujours pas... :(

Je m'explique... En fait, j'ai, dans le menu, une combo qui masque ou affiche des DIV en fonction de l'élément sélectionné par l'utilisateur.

Pour ce faire, je passe par une fonction Javascript, en dessous de laquelle j'ai donc indiqué le lien vers la feuille de style print.css, comme suit :

Code :
  1. <html>
  2. <head>
  4. <style type="text/css" media="screen">
  5. body{
  6.   font:arial, verdana;
  7. }
  8. table{
  9.   border-collapse: collapse;
  10. }
  11. td{
  12.   border: 0px solid black;
  13. }
  14. a:hover{
  15.   text-decoration:none;
  16. }
  17. </style>
  19. <script language="javascript">
  21. function foncAfficheBan(){
  22.     if (document.formCritSuivComptable.date.value=='' || document.formCritSuivComptable.date2.value==''){
  23.             alert("Les deux dates doivent être renseignées, merci." );
  24.         }
  25.     else{
  26.     document.formCritSuivComptable.submit();
  27.         }
  28. }
  30. function foncListeClients(selectindex){
  31. if(selectindex==3){
  32.     document.getElementById('cli').style.display = 'block';
  33.     }
  34. else{
  35.     document.getElementById('cli').style.display = 'none';
  36. }
  37. }
  39. function listDeroulCompt(selRub){
  40.         if (selRub == 'produit'){
  41.             document.getElementById('listProd').style.display = 'block';
  42.             document.getElementById('listTransp').style.display = 'none';
  43.         }
  44.         else if (selRub == 'transp'){
  45.             document.getElementById('listProd').style.display = 'none';
  46.             document.getElementById('listTransp').style.display = 'block';
  47.             document.getElementById('cli').style.display = 'none';
  48.         }
  49. }
  51. function effacecli(){
  52. document.formCritSuivComptable.cli.numCli.value = '';
  53. }
  55. </script>
  57. <link rel="stylesheet" type="text/css" media="print" href="print.css" />
  59. </head>



Dans le <body>, par défaut, j'ai mis la propriété display de certaines DIV à none, d'autre à block...
Le souci peut-il provenir de là ? Comment faire alors ?...



boub popsy team
G.M.G.V.S.O.
Profil : Modo matériel
Plus d'informations
n°27918
14-02-2007 à 13:27:35

AMHA il faut redefinir TOUTES les propriétés dans ton print dans ce cas ...

+ es tu sur qu'il soit bien chargé ? ;)


---------------
SPAM & WAREZ = Ban!
Ultimate Boot CD | Memtest+
Mon bar préféré à Lyon ! | Bijoux Fantaisie de Créateur !
Bounty59
Plus d'informations
n°27944
15-02-2007 à 15:18:35

Salut boubpopsyteam,

Je ne comprends pas trop ta réponse... Quelles autres propriétés puis-je redéfinir dans mon print.css ?!

J'ai fait une page de test, tout simple. Et en effet, lorsque les propriétés "display" des DIV on été entrées en dur dans la page html, le CSS print n'est pas pris en compte lors du clique sur le bouton "Imprimer".

Comment faire ?

Bounty59
Plus d'informations
n°28069
21-02-2007 à 14:05:59

UP s'il vous plait m'sieurs dames ;(

boub popsy team
G.M.G.V.S.O.
Profil : Modo matériel
Plus d'informations
n°28070
21-02-2007 à 14:08:48

Dans ton print.css redefinie les propriétés de TOUS les éléments.


---------------
SPAM & WAREZ = Ban!
Ultimate Boot CD | Memtest+
Mon bar préféré à Lyon ! | Bijoux Fantaisie de Créateur !
Bounty59
Plus d'informations
n°28088
22-02-2007 à 14:01:10

Bonjour Boub,

De quels autres éléments parles-tu ?!
Dans mon print.css (voir code au début du topic), je redéfinis bien les propriétés Display de tous les éléments (les 3 div), non ?!


Message édité par Bounty59 le 22-02-2007 à 14:01:57
boub popsy team
G.M.G.V.S.O.
Profil : Modo matériel
Plus d'informations
n°28094
22-02-2007 à 21:32:05

On dirait que tu as raison ;)

Tu l'as bien mis apres la principale ?

(principale mise elle aussi dans un fichier à part)


---------------
SPAM & WAREZ = Ban!
Ultimate Boot CD | Memtest+
Mon bar préféré à Lyon ! | Bijoux Fantaisie de Créateur !
Bounty59
Plus d'informations
n°28105
23-02-2007 à 09:35:27

Salut Boub,

Oui. Voir mon message et code du 14/02.

Bounty59
Plus d'informations
n°28484
05-03-2007 à 10:42:31

UP ? :(

jmangelini
Plus d'informations
n°39218
20-08-2008 à 10:15:43

J'arrive tard, mais qui sait, ça peut aider certains qui viendraient là ...
Pour ma part j'utilise toujours UNE SEULE feuille de style CSS appelée par mes pages html
Dans cette feuille de style, j'ai des sections écran ( entre @media screen { }) des sections imprimante ( entre @media print{ }), le reste (entre rien !) est commun écran et imprimante .

Pour ne pas imprimer, par exemple, le DIV contenant les menus, voilà comment je procède :
@media screen {
div#MENUS
{
position: absolute;
top: 135px; /* doit être égal à 15 + hauteur de img#bandeau_top */
left: 10px;
width: 15%; /* largeur à faire correspondre à celle de img#bandeau_gauche */
}
}

@media print {
div#MENUS { display: none }
}

bien entendu, la recette est applicable à tout élément du CSS : par exemple, vous voulez dans les paragraphes courants du texte 12px à l'écran et 10px à l'imprimante, ça donne
@media screen {p {font-size:12px;}} @media print{p {font-size:10px;}}

zeb
Profil : Modérateur libre
Plus d'informations
n°39220
21-08-2008 à 10:29:36

Merci jmangelini pour ces précisions.
En général, le déterrage de topic, c'est mal :fou:
Mais à bon escient, c'est bien