18099 sujets

Questions générales et questions de débutants

CSS affichage du media print

Bonjour à tous,

voilà dans la réalisation de mon site Web, et n'ayant pas trouvé de réponse claire sur le forum et sur internet, je vous introduis mon problème:

Mon site se compose de 4 frames dont le frame central me sert de zone d'affichage des différents articles issus de la navigation des menus.

Les articles sont rédigés en couleurs grisées sur fond noir selon le style de CSS choisi pour le média screen.
j'ai ajouté un lien renvoyant l'article vers un nouvelle page pour l'impression. j'ai donc créé un CSS pour le média print qui imprimera le texte en noir sur fond blanc.
Tout ça fonctionne très bien donc même si des améliorations sont tjs à y apposer

Mon "souci" lors de l'affichage de la page avec le lien, celle-ci s'affiche avec le CSS du média screen (ce qui est assez logique).
mais j'aimerais que lorsqu'on ouvre ce lien, la page s'affiche directement avec le CSS du média print.

il y a-t-il une astuce pour celà?

en espérant m'être bien expliqué sur le sujet.

merci d'avance
Salut Smiley smile

Tu peux tout simplement faire sur la page d'impression (virtuel, puisque c'est une vrai page), mettre la css print en Screen, et en Print Smiley smile
Super_baloo8 a écrit :
Salut Smiley smile

Tu peux tout simplement faire sur la page d'impression (virtuel, puisque c'est une vrai page), mettre la css print en Screen, et en Print Smiley smile


euh comment je fais ça concrètement?

j'ai indiqué ceci mais ça ne fonctionne pas pour l'affichage à l'écran de la page d'impression alors que ça fonctionne très bien quand je fais aperçu avant impression.

<head>
<link rel="stylesheet" type="text/css" href="../../Style/StyleSiteArticle.css" media="screen">
<link rel="stylesheet" type="text/css" href="../../Style/StyleSiteArticlePRINT.css" media="screen, print">
</head>
<body>
<div align="right" class="noimp"><a href="../feuilles.htm" target="_blank">Version imprimable</a></div>

<p>bla bla bal...

</body>

merci
Si tu as des styles réservés à l'écran et d'autres réservés à l'impression, et que tu veux afficher à l'écran les styles pour l'impression... il faut appliquer les styles pour l'impression au media screen également!

Tu pourrais par exemple, pour un site en PHP, avoir des URL comme suit:
nomdelaressource?display=screen (normal, valeur par défaut en absence du paramètre $_GET['media']).
nomdelaressource?display=print-preview (application des styles pour l'impression uniquement, avec peut-être un bouton «Imprimer cette page» en haut de page (généré en JavaScript).

Dans le premier cas, tu aurais quelque chose comme ceci:
<link rel="stylesheet" type="text/css" media="screen" href="screen.css">
<link rel="stylesheet" type="text/css" media="print" href="print.css">

et dans le deuxième et troisième cas:
<link rel="stylesheet" type="text/css" media="print, screen" href="print.css">


Les possibilités sont assez larges. Il faudrait juste que tu définisse à l'avance ce que tu souhaites proposer exactement à l'utilisateur en termes de fonctionnalités pour l'impression. Smiley cligne
Modifié par Florent V. (01 Feb 2009 - 16:56)
Merci beaucoup pour votre aide à tous les deux.

je pense qu'il faut que je me mette sérieusement au PHP Smiley smile
Bonjour,

N'ayant pas voulu ouvrir un autre sujet similaire, j'ai le même problème !

Voici le code XHTML:


<!DOCTYPE html PUBLIC "-//W3C//dtD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/dtD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="fr">
<head>
<title>aaa</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

[b]
<link rel="stylesheet" href="styles/cadre-vert.css" type="text/css" media="screen,print" />
<link rel="stylesheet" href="styles/cadre-jaune.css" type="text/css" media="screen,print" />
[/b]

</head>
<body>

<div>
  <div class="cadre-vert">Cadre-vert</div>
  <br/>
  <div class="cadre-jaune">Cadre-jaune</div>
</div>

</body>
</html>


Et le code CSS associé :

cadre-vert.css

.cadre-vert {
  width:100px;
  height:100px;
  color:blue;
  background-color:green;
  border: 3px solid black;
}


cadre-jaune.css

.cadre-jaune {
  width:100px;
  height:100px;
  color:red;
  background-color:yellow;
  border: 3px solid black;
}


Comme Florent V l'a dit :
a écrit :
Si tu as des styles réservés à l'écran et d'autres réservés à l'impression, et que tu veux afficher à l'écran les styles pour l'impression... il faut appliquer les styles pour l'impression au media screen également!


C'est donc ce j'ai fait en appliquant media="screen,print" pour que l'utilisateur puisse avoir un aperçu avant l'impréssion.

En testant sous IE6 et FF2 => "Fichier" => "Aperçu avant impression", les bordures et les couleurs de texte apparaissent correctement mais il n'y a pas de couleurs de fond ! J'ai tout de même essayé d'imprimer avec PDFCreator mais j'obtiens le même résultat.

J'ai testé avec la règle d'importation. Tout en sachant que IE n'accepte pas les media dans une feuille de style, j'ai placé le code XHTML suivant à la place des balises de liens :

<style type="text/css" media="screen,print">
  @import url(styles/cadre-vert.css);
  @import url(styles/cadre-jaune.css);
</style>


Mais j'ai obtenu le même résultat, donc cela vient soit du code CSS (pourtant valide W3C) soit du navigateur. j'ai aussi testé sur mon site web et les images n'apparaissent pas !

Je précise que je révise avec les normes du CSS 2 du site yoyodesign. Je sais que l'on est en CSS 2.1 et prochainement CSS3 mais tout est traduit. Ceci n'est pas pour un site mais juste pour comprendre le fonctionnement.

Si vous avez une solution s'il vous plait !!

J'aurais aussi aimé savoir comment ce comportait l'impression en braille quand on utilise le média "embossed" (Destiné aux appareils à impression braille). Je ne veux pas trop m'étendre la dessus (difficile de répondre en une phrase je sais Smiley langue ) mais j'aimerais savoir si une feuille de style spécial doit être attribuée ou si l'impression suit le flux normal de la page web ?!

PS :
1- Je ne suis pas en mode noir/blanc en "Aperçu avant impression", je ne sais même pas si c'est possible de l'être. Mais ça n'est pas le problème !
2- Je suis sous sp3 et je n'ai pas fait la maj IE7, je reste donc sous IE6 pour éviter les bugs
3- J'utilise FF2 car FF3 me fait un peu ramer
Modifié par anima876 (10 Feb 2009 - 17:09)
anima876 a écrit :
En testant sous IE6 et FF2 => "Fichier" => "Aperçu avant impression", les bordures et les couleurs de texte apparaissent correctement mais il n'y a pas de couleurs de fond !

Sauf si l'utilisateur configure son navigateur pour le faire, les navigateurs n'impriment pas les couleurs et images de fond. Tout simplement parce que ça bouffe de l'encre inutilement.

anima876 a écrit :
J'aurais aussi aimé savoir comment ce comportait l'impression en braille quand on utilise le média "embossed" (Destiné aux appareils à impression braille).

Je ne suis pas sûr que le média "embossed" soit implémenté par quelque navigateur que ce soit. Il faudrait faire des recherches (et/ou essais) à ce sujet.
Merci !! Pour la réponse sur les couleurs, je n'aurais pas pensé à cette raison. Smiley ravi

Pour imprimer en braille je ne pourrais pas tester mais je n'ai pas eu le temps de lire les recommandations du W3C : braillenet.org Smiley sweatdrop

Sinon voici un petit site de translation :libbraill.org" rel="nofollow noopener" >http://libbraille.org/translator.php]libbraill.org[/url]

Si j'ai d'autres informations, j'irais les poster dans le coin de l'accessibilité.

Il y a trop de chose en CSS c'est dingue. Smiley murf
Modifié par anima876 (15 Feb 2009 - 12:44)
Sujet clos
Aller à