28220 sujets

CSS et mise en forme, CSS3

Impression d'une page [ résolu ]

Hello !
je suis en train de finir mon site et je voulais ajouter un lien "imprimer la page" ...

Bien entendu, je dispose de 2 feuilles CSS, l'une en media="screen" et l'autre en media="print" et dans cette dernière, les calques qui ne doivent pas être imprimés sont en display:none;

Cela dit, même si le résultat de ma page a l'air grosso modo correct, je suis confronté à 2 soucis :

- le premier est la disposition : en effet, le seul calque que j'imprime (le central) est voisin d'un menu vertical, et ce manu, même masqué, laisse son "empreinte" sur la page finale : le calque du centre fait 10cm de large ... alors que je le voudrais à 20 cm Smiley smile

- le second est la suite de pages : après un premier essai, une seule page est sortie de l'imprimante, et ce serait bien d'avoir tout le contenu sur plusieurs pages ... (au lieu d'une troncature à la première page)


Ci joints :
- le squelette de ma page

<div id="gauche"></div>
<div id="droite"></div>

<div id="site">
     <div id="baniere">...</div>
     <div id="menu_horizontal">...</div>
     <div id="menu_vertical">...</div>
     
     <div id="centre">...</div>
</div>


- un bout de mon fichier styles.css :

#gauche { position:absolute; width:13%; height:100%; top:0; left:0; }
#droite { position:absolute; width:13%; height:100%; top:0; right:0%; background-image:url(images/sqD.gif); background-repeat:no-repeat; background-position:top right; }
#site { position:absolute; width:73%; height:100%; top:0; left:13%; text-align:center; margin:0; padding:0; }
#baniere{ position:relative; width:100%; height:12%; padding:5px 0 0 0; overflow:auto; }
#menu_horizontal { background-color:#DCE9F0; position:absolute; top:12%; left: 0; height:10%; padding:0; overflow:auto; width: 100%; }
#menu_vertical { position:absolute; top:22%; width:20%; height:78%; overflow:auto; background-color:#DCE9F0; left:0; text-align:left; }
#centre { position:absolute; top:22%; width:79%; height:78%; overflow:auto; background-color:#F0F0F0; left:20%; text-align:left; padding:0 0 0 10px; }


- et un bout de mon fichier imprim.css :

#gauche { position:absolute; width:0%; height:100%; top:0; left:0; display:none; }
#droite { position:absolute; width:0%; height:100%; top:0; right:0%; background-image:url(images/sqD.gif); background-repeat:no-repeat; background-position:top right; display:none; }
#site { position:absolute; width:73%; height:100%; top:0; left:13%; text-align:center; margin:0; padding:0; }
#baniere{ position:relative; width:100%; height:0%; padding:5px 0 0 0; overflow:auto; display:none; }
#menu_horizontal { background-color:#DCE9F0; position:absolute; top:12%; left: 0; height:00%; padding:0; overflow:auto; width: 100%; display:none; }
#menu_vertical { position:absolute; top:22%; width:00%; height:78%; overflow:auto; background-color:#DCE9F0; left:0; text-align:left; display:none; }
#centre { position:absolute; top:22%; width:100%; height:78%; overflow:auto; background-color:#FFFFFF; left:20%; text-align:left; padding:0 0 0 10px; }
...

@page { size:21.0cm 29.7cm; margin:2cm 1cm 2cm 1cm; }


et je fais le lien avec a href="javascript:window.print();"
c'est peut être là mon erreur ?

merci de toute réponse Smiley smile
Modifié par Malcolm (07 May 2005 - 11:29)
La majeure partie de tes problème devrait être reglée en supprimant le positionement absolu, c'est ça qui fout le boxon partout.

Le media imprimé n'est pas à prendre de la même façon que le web.
merci de ta réponse... j'ai fait un essai en virant toutes les positions dans la feuille imprim.css pour tous les calques.

La disposition sur la feuille imprimée est identique, et ça ne résout pas le pb de la troncature juste après la première page. Je ne pense pas que la suppression des positions absolues soit la solution... ou alors j'en ai trop supprimé ?
Bah la troncature de la page, ça me fait typiquement penser au positionement absolu, et vu que tu en avais dans ta page, ça devait être ça.

Faudrait voir ta page en ligne pour se faire une idée, parceque là c'est pas l'idéal pour se rendre compte.

Mais de toute façon, le positionement n'est pas vraiment adapté à l'impression.
Olivier a écrit :
Bah la troncature de la page, ça me fait typiquement penser au positionement absolu, et vu que tu en avais dans ta page, ça devait être ça.

Non, puisque même ces positionnements virés, le pb n'est pas résolu pour autant.

Olivier a écrit :
Faudrait voir ta page en ligne pour se faire une idée, parceque là c'est pas l'idéal pour se rendre compte.

Mais de toute façon, le positionement n'est pas vraiment adapté à l'impression.

Oui, je publie mon "nouveau" site ce soir ... je te ferai signe Smiley cligne
Merci
ce sujet est résolu : le calque #site contenant #centre avait des spécifications de largeur et de hauteur que j'ai supprimées, ainsi que celles du calque #centre.

L'impression s'effectue sans problèmes.
Sujet clos
Aller à