Tailles en CSS pour impression

Tailles en CSS pour impression - HTML/CSS - Programmation

Marsh Posté le 01-11-2004 à 19:48:56    

Salut à tous :)
 
Voila j'aimerais généré des étiquettes destinées à l'impression via CSS ...
 
Le probleme est que les tailles données dans le code:
 
expl>   width: 2.5cm;
 
ne sont pas respectées lors de l'impression :(
 
Que dois-je faire pour obtenir les bonnes tailles sur le papier ?

Reply

Marsh Posté le 01-11-2004 à 19:48:56   

Reply

Marsh Posté le 01-11-2004 à 20:31:12    

tu as bien vérifié que ton browser supportait les CSS d'impression et que le tu n'avais pas restreind la protée de ta CSS uniquement à l'écran?

Reply

Marsh Posté le 01-11-2004 à 20:33:12    

J'utilises Firefox que dois-je faire pour supportait les CSS d'impression ?
Ya t il des commandes CSS spécifiques à l'impression ?

Reply

Marsh Posté le 01-11-2004 à 20:35:45    

Ok, donc lui les supporte. Reste à voir si comment tu as déclaré tes CSS. Si tu as utilisé un media="screen" dans un link par exemple, c'est normal que ce ne soit pas pris en compte.

Reply

Marsh Posté le 01-11-2004 à 20:40:32    

Voila mes CSS :

Citation :

<style type="text/css">
<!--
.cadre1{
     height: 1.5cm;
     padding-top: 0.25cm;
     }
.cadre2{
     margin: 0;
     padding: 0;
     font-family: Verdana;
     font-size: 35px;
     font-weight: bold;
     border: 5px solid blue;
     color: blue;
     }
 
//-->
</style>


 
je n'utilise aucun media="screen"

Reply

Marsh Posté le 01-11-2004 à 20:43:21    

humm, ok, et quand tu dis que ce n'est pas respecté, peux-tu être plus précis?

Reply

Marsh Posté le 01-11-2004 à 20:48:27    

en mettant media="print" :??:


---------------
Martin
Reply

Marsh Posté le 01-11-2004 à 23:07:45    

NeR_i a écrit :

Voila mes CSS :

Citation :

<style type="text/css">
<!--
.cadre1{
     height: 1.5cm;
     padding-top: 0.25cm;
     }
.cadre2{
     margin: 0;
     padding: 0;
     font-family: Verdana;
     font-size: 35px;
     font-weight: bold;
     border: 5px solid blue;
     color: blue;
     }
 
//-->
</style>


 
je n'utilise aucun media="screen"


Tu utilises media="print" comme le dit martius et tu évites de mélanger px et cm parce que ton imprimante elle sait pas ce que c'est que des pixels.


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 02-11-2004 à 00:53:51    

erf en mettant media="print" tous les effets (couleurs,bordures,taille de police) disparaissent...
 
Du coup je n'ai plus d'étiquettes :(
...? :|


Message édité par NeR_i le 02-11-2004 à 00:54:16
Reply

Marsh Posté le 02-11-2004 à 01:06:05    

bah c'est un peu normal...  c'est pour l'impression !


---------------
Martin
Reply

Marsh Posté le 02-11-2004 à 01:06:05   

Reply

Marsh Posté le 02-11-2004 à 16:29:22    

Oue donc ça ne convient pas pour ce que je veux  :sweat:  
 
Jvoudrais simplement savoir comment on fait pour retrouver les tailles en cm données en CSS sur le papier ?  :??:


Message édité par NeR_i le 02-11-2004 à 16:31:58
Reply

Marsh Posté le 02-11-2004 à 19:08:51    

NeR_i a écrit :

Oue donc ça ne convient pas pour ce que je veux  :sweat:


Mais si, ça marche très bien...


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 02-11-2004 à 20:54:17    

Ben non :(
 
Voila ce que je veux imprimer: http://neri.jexiste.fr/ex.html
Et voila ce que j'obtiens avec 'media="print"':
http://neri.jexiste.fr/exprint.html
:??:

Reply

Marsh Posté le 02-11-2004 à 21:07:43    

Tu n'as pas bien compris à quoi sert l'attribut media... Si tu mets media="print" ça veut dire que les styles qui suivent seront définis pour l'impression. Et donc plus pour l'écran.  
 
Si tu veux que ça serve aux 2 tu mets media="print,screen"
 
Mais dans ce cas attention car tu as des mesures en pixels (px) ce qui ne signifie rien pour une imprimante.
 
Bref, le plus propre est de définir un style pour chaque :
 

<style type="text/css" media="screen">
 
...
</style>
<style type="text/css" media="print">
 
...
</style>


 
Ou alors en faisant plus court :
 

<style type="text/css">
 
/* Les propriétés CSS communes à l'impression et à l'écran */
 
...
 
@media screen {
 /* Les propriétés CSS propres à l'écran */
...
}
 
@media print {
 /* Les propriétés CSS propres à l'imprimante */
...
}


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 02-11-2004 à 21:12:44    

gm_superstar a écrit :

Tu n'as pas bien compris à quoi sert l'attribut media... Si tu mets media="print" ça veut dire que les styles qui suivent seront définis pour l'impression. Et donc plus pour l'écran.  
 
Si tu veux que ça serve aux 2 tu mets media="print,screen"
 
Mais dans ce cas attention car tu as des mesures en pixels (px) ce qui ne signifie rien pour une imprimante.
 
Bref, le plus propre est de définir un style pour chaque :
 

<style type="text/css" media="screen">
 
...
</style>
<style type="text/css" media="print">
 
...
</style>


 
Ou alors en faisant plus court :
 

<style type="text/css">
 
/* Les propriétés CSS communes à l'impression et à l'écran */
 
...
 
@media screen {
 /* Les propriétés CSS propres à l'écran */
...
}
 
@media print {
 /* Les propriétés CSS propres à l'imprimante */
...
}




 
Ok mais le problème n'est pas la... :o
 
En fait je m'en fou de l'affichage à l'écran il me faut juste un moyen d'obtenir les tailles que je donne dans le code sur le papier.
 
Mais ce sont des étiquettes colorées que je veux imprimer.
 
En gros si je di dans les CSS que je veux 2.5cm je veux que sur le papier je retrouve 2.5cm est ce possible ou pas ?


Message édité par NeR_i le 02-11-2004 à 21:13:43
Reply

Marsh Posté le 02-11-2004 à 21:15:00    

NeR_i a écrit :

En gros si je di dans les CSS que je veux 2.5cm je veux que sur le papier je retrouve 2.5cm est ce possible ou pas ?


Dans ce cas oui, tes boites sont bleues dans l'aperçu avant impression de Moz et IE... Elles ont l'air de faire la bonne taille, mais je n'imprimerai pas pour vérifier tant que tu n'auras pas résolu ce problème de px et de cm mélangés


Message édité par gm_superstar le 02-11-2004 à 21:15:18

---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 02-11-2004 à 23:29:01    

Ok j'ai résolu mon probleme :)
 
En fait les mesures sont bien respectées a l'impression le probleme vient des <hr> qui séparaient les étiquettes elles engrangés un espace supplémentaire.
 
*Note: la hauteur totale du cadre = height + padding

Reply

Sujets relatifs:

Leave a Replay

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