5568 sujets

Sémantique web et HTML

Feuille style pour impression

Pages :
Bonjour,

J'ai lu l'article 'Faire une feuille de style pour l'impression' mais je ne sais pas comment appliquer les conseils.

Je souhaiterais mettre une icone d'imprimante sur une page pour faire imprimer le contenu d'un calque.
Faut-il construire une page feuille de style séparée qu'un clic sur l'icone 'imprimante' appelerait ?
Alors, quoi mettre dans cette feuille ?
J'aimerais trouver un exemple simple à appliquer.

Merci à qui pourrait m'aider.
Je viens de trouver :

<div><a class="bouton" href="javascript:self.print()">Imprimer l'article</a></div>

qui semble convenir, mais qui imprime la page entière.
Je souhaiterais n'imprimer qu'un calque.
Faut repérer les éléments à ne pas imprimer grâce à leurs ID et/ou class et leur appliquer la propriété, display:none dans la feuille de style css print.

Exemple : 

<body>
<di id="contenu">
balablabla
</div>
<div id="menu">
...
</div>
<div id="publicite">
blabla
</div>
</body>


Et comme style css :


body {font-family: serif}
#publicite, #menu {display: none}


Voilà Smiley cligne
Modifié par Patidou (26 May 2008 - 17:02)
Bonjour flamel,

Je suppose (ne l'ayant pas mis en place moi même) qu'il doit ensuite suffire d'appeller ta feuille de styles "css.print" dans ton entête de document :
<link rel="stylesheet" media="print" href="print.css" type="text/css">

Et d'y définir les styles qui t'intéressent (en suivant le tutoriel que tu cites) en "masquant" (sélecteur:display:none;)tout ce qui n'est pas l'article qui t'interesse...

Mais cela reste supposition Smiley cligne

Cdt,
Sylvain

*20 secondes de retard, je progresse... Smiley lol
Modifié par 6l20 (26 May 2008 - 17:02)
Merci pour vos conseils.

Je voudrais n'imprimer qu'un 'Layer' que j'appelle 'LayerBiographie' et qui s'affiche avec l'ascenseur de défilement.
Quand j'imprime, seul le premier écran s'imprime et non pas le Layer entier.
Or il faudrait que tout le layer s'imprime quand le visiteur clique sur l'image de l'imprimante que j'ai mise dans un petit layer dans la page.
Que faire ?
Merci.
On reprend :

1/Javascript (javascript:self.print() ) lance l'impression (fichier/imprimer...)
2/Le navigateur va imprimer tout ce qu'il y a sur ta page...

D'ordinaire l'utilisateur définit seul ce qu'il veut imprimer (sélection d'une partie, mise en page personnelle, etc...) or tu as la possibilité de proposer un formatage spécifique qui ne se fera "que" par une feuille de style dédiée à l'impression : print.css (par exemple)

Il faut donc que tu définisses ce que tu veux proposer à l'impression en l'occurrence "LayerBiographie", que tu le mettes en forme ( imprimer titres/sous-titres ? Marges interne/externe ? Couleurs ? Supprimer l'overflow peut-être ? etc...) mais également définir ce que tu ne souhaites pas imprimer ( le reste en somme ? via la propriété display:none )

Cdt,
Sylvain
Bonjour,

Je crois qu'il serait utile de relire le tutoriel sur les feuilles de styles pour l'impression. On y signale entre autres qu'il est préférable de séparer les styles pour l'affichage à l'écran des styles pour l'impression, et d'appeler chaque feuille de styles en précisant bien media="screen" ou media="print".

Si tu laisses les styles pour l'affichage à l'écran s'appliquer quel que soit le média de restitution (c'est-à-dire si tu ne spécifies pas le média pour la feuille de styles principale...), tu risques de demander une impression avec de styles incompatibles avec l'impression papier. Pour rappel, screen a une hauteur indéterminée, tandis que les feuilles de papier ont des dimensions précises.
Les propriétés à éviter pour l'impression sont, notamment:
- position;
- overflow (scroll, auto ou hidden).
Bonjour,

Que dois-je mettre dans l'intruction du bouton de commande de l'impression ?

<div id="LayerPrint">
<div align="center">
<a href="javascript:window.print()"> <img src="../../../Images/comp36.gif" width="42" height="42"></a></div>

ma ligne de link est:

<link rel="stylesheet" type="text/css" href="biographieImprime.css" media="print" />


et voici la page biographieImprime.css :

#LayerBiographie {
width:700px;
height:2000px;
z-index:1;
left: 190px;
top: 55px;
background-color:#FFFFFF;
}

Merci d'avance.
Bonjour,

1. La fonction Javascript window.print fait exactement la même chose que Fichier > Imprimer. Ce n'est qu'un appel à une fonction standard du navigateur. Il n'y a rien de plus à indiquer. Si on veut faire quelque chose d'un peu subtil, on pourra éventuellement générer en Javascript le lien d'impression, afin qu'il ne soit pas visible si Javascript n'est pas activé.

2. Ta feuille de styles pour l'impression n'est pas bonne. Tu ne définis les styles que d'un seul élément (alors qu'il faudrait définir des styles globaux pour le texte, les titres, paragraphes et listes, masquer les éléments qui ne doivent pas être imprimés, etc.). Par ailleurs, définir une hauteur fixe en pixels pour un conteneur, qui plus est dans une feuille de styles pour l'impression, n'est pas une bonne idée. Solution: relire encore une fois l'article sur les feuilles de styles pour l'impression (qui contient un exemple de feuille de styles), et plus largement apprendre CSS. Smiley cligne

3. La feuille de styles pour l'écran est bien appelée avec un media="screen"?
Bonjour,

Je vais revoir les bases, c'est exact.

Voici les 2 lignes de 'link' :
<link rel="stylesheet" type="text/css" href="biographieEcran.css" media="screen" />
<link rel="stylesheet" type="text/css" href="biographieImprime.css" media="print" />

Voici la feuille CSS complête :

/* CSS Document */
#LayerBiographie {
font-family: Serif;
font-size: 15px;
background-color: #FFFFFF;
}
#LayerTitrePage, #LayerIndexBiographie, #LayerPrint, #LayerHaut {
print: none;
}

Mais que faut-il mettre comme commande par le bouton d'impression à la place de "javascript:window.print()" ?

Merci pour votre patience !
flamel a écrit :
Mais que faut-il mettre comme commande par le bouton d'impression à la place de "javascript:window.print()" ?

Comme je te l'ai déjà indiqué, l'utilisation de cette fonction javascript ou celle que tu avais mentionnée initialement (="javascript:self.print()") n'a pour seul effet que d'appeller la fonction impression du navigateur :
ie Fichier/imprimer
Information reprise et réponse anticipée de Florent..
Florent a écrit :
1. La fonction Javascript window.print fait exactement la même chose que Fichier > Imprimer. Ce n'est qu'un appel à une fonction standard du navigateur. Il n'y a rien de plus à indiquer.

Maintenant si javascript n'est pas activé sur le navigateur de ton visiteur, ce lien n'aura aucun effet et sera inutile sur ta page
Toujours Florent a écrit :
Si on veut faire quelque chose d'un peu subtil, on pourra éventuellement générer en Javascript le lien d'impression, afin qu'il ne soit pas visible si Javascript n'est pas activé.

Au regard des difficultés que tu sembles éprouver, il me semble prématuré de vouloir pousser plus avant ce type de subtilité Smiley cligne

Concernant ta feuille de style d'impression, est-ce que tu l'as testée ? Te donne-t-elle un résultat satisfaisant ?

Cdt,
Sylvain
Ma feuille de style 'ecran' marche bien.

Ce que je souhaiterais, c'est que le visiteur puisse imprimer le 'LayerBiographie' .
( Il s'agit d'un site familial avec biographie de mes parents et souvenirs de famille )
Le bouton que j'ai mis sur la page imprime la page entière et non la totalité du layer ( dans lequel se trouve beaucoup de texte avec photos) , parce que la commande n'est pas ce que je voudrais. C'est pour cela qu'il faut donc un petit script en javascript ?

Merci et très cordialement.
Bonjour,

Il me semble que tu n'aies pas compris les réponses qui t'ont été fournies.

Je vais tenter d'éclaircir un peu :
Tu cherches à n'imprimer qu'un bout de la page. Cependant, il n'existe pas de fonction javascript (ou autre) qui te permette de n'imprimer qu'un bout de document. Tu peux chercher autant que tu veux, tu ne trouveras pas, y'a pas, on ne peut pas, c'est impossible, c'est pas prévu,... c'est d'ailleurs pour ça que personne ne le fait.

Donc la solution, c'est l'inverse : masquer tout ce que tu ne veux pas imprimer dans le document. Ça se fait avec la règle display: none; (et non pas print: none;) sur tous les éléments que tu ne veux pas voir apparaître à l'impression, dans une feuille de style limitée à l'impression (media="print").

Pour éviter d'appliquer les styles que tu souhaiterais réservés à l'écran, les regrouper dans une feuille de style dédiée au media screen.
Modifié par Lanza (27 May 2008 - 15:58)
Bonjour Lanza,

J'ai bien masquer tout ce qui n'est pas à imprimer avec 'display: none;' au lieu de 'print: none;' dans une feuille de style limitée à l'impression 'biographieImprime.css', avec le 'link' correspondant dans ma page à imprimer.
Mais la commande window.print() n'en tient pas compte et imprime toujours l'écran.
Alors c'est qu'il y a une erreur quelque part Smiley smile

Edit : dans les feuilles de style, je veux dire, parce que comme dit plus haut, window.print() ne fait qu'activer la fonction d'impression du navigateur. Si ça imprime quelque chose, c'est qu'elle est correctement appelée.
Modifié par Lanza (27 May 2008 - 17:46)
çy est. ça marche.

Le 12 pages du l'ayerBiographie' se sont bien imprimées, mais il me reste un problème .
Dans la page il y a des 'includes'. Comment ne pas les imprimer ?
Normalement, des 'includes' ça n'existe qu'au niveau du serveur et ils sont (comme leur nom l'indique) inclus dans le document envoyé au navigateur. Ce dont on peut s'apercevoir en regardant le code source avec ledit navigateur.

Donc la technique est la même : "display: none;". Au besoin, s'il n'est pas possible ou pas souhaitable de modifier les includes pour une raison X ou Y, les entourer d'un div avec une classe qu'on pourra styler facilement.
Pages :
Sujet clos
Aller à