[RESOLU]Probleme lors de l'impression

Salut,

Bon encore un problème lol. Lors de l'aperçu impression, tout va bien tout tiens dans la page sauf sous IE où le site ne tient pas.

Sur mon site, j'ai un header en taille fixe en px. Existe t'il des astuces avec le CSS print pour pouvoir tout faire tenir sous IE ?

Si vous avez quelques pistes je vous remercie parce que là je galère
Modifié par chintaoui (31 Jul 2005 - 12:16)

Euhh j'ai peut etre mal exposé mon problème et il n'est peut etre pas assez clair ? SI oui dites le moi et je reformule

Salut,
spécifier une largeur en "px" pour l'impression, voilà qui est amusant

Le pixel est l'unité de mesure de l'écran, le media papier n'en a que faire

Le mieux est en fait de ne pas spécifier de largeur du tout pour l'impression, les retours à la ligne se feront d'eux même.

Pourquoi utilises tu une dimension pour ton header ?

J'utilise une taille fixe en px pour pouvoir centrer mon site au milieu de l'ecran avec margin: 0 auto;

SUr l'ecran tout est impec, au rendu impression sous firefox ou autres aussi mais sous IE, il me manque la moitié de ce qui est affiché sur l'écran. Problématique tout çà.

Bonjour chintaoui,

Olivier t'a indiqué l'essentiel : ne pas dimensionner en px dans une CSS print.

En cas de difficultés, pourrais-tu donner une url ou un exemple de ton code HTML et CSS ? cela nous aidera à cerner la question
Modifié par Laurent Denis (30 Jul 2005 - 18:10)

Je n'ai pas d'url dispo pour le moment et pour ce qui est du code, le problème c'est que je ne sais quoi vous donner. Pour l'instant je n'ai pas encore de CSS print mais je pensais en faire un pour essayer de ne plus avoir ce problème a l'impression sous IE.

chintaoui a écrit :
Pour l'instant je n'ai pas encore de CSS print mais je pensais en faire un pour essayer de ne plus avoir ce problème a l'impression sous IE.

C'est exactement l'idée

ui mais je ne sais pas du tout comment faire dans le css print pour que le site tienne sur format papier
Modifié par chintaoui (30 Jul 2005 - 18:26)

Pour centrer, text-align: center; tout simplement

Si tu pensais centrer une image, hop, poubelle
J'exagère mais bon, les images et l'impression, perso j'aime pas et je dois pas être tout seul.

Si c'est une image en tant que tel, text-align: center; sur l'élément et ça roule, si c'est une image de fond, elle ne sera pas centrée puisque pas imprimée (sauf si l'utilisateur le souhaite et configure son navigateur)

Pour du texte tout simple (recommandé en cas d'impression), text-align: center; sur la balise qui le contient (un <h1> à priori)

chintaoui a écrit :
ui mais je ne sais pas du tout comment faire dans le css print pour que le site tienne sur format papier

Quelques pistes usuelles pour une CSS print :

- remplacer les float:... par des float:none
- remplacer les position: absolute et position:fixed par des position:static
- remplacer les width:...px par des width: auto ou des %
- remplacer les padding: ...px par des padding: ...pt, idem pour les marges, voire les bordures.
- éliminer le contenu du type "menu" et "bannières" à l'aide de display:none
- remplacer les polices sans serif par des polices serif (pour une meilleure lisibilité)
- accroître légèrement les interlignes si le texte écran était en petite taille serrée
Modifié par Laurent Denis (30 Jul 2005 - 22:02)

Merci pour vos pistes de réflexion. Je voulais savoir, si je met un id ou une classe pour la version écran, est ce que je peux mettre un id ou une classe pour la version du css print. C'est à dire mettre deux id ou classe sur une meme balise.

Par exemple:

<div id="version_ecran" id="version_papier">

Non, les id sont uniques pour un élément.

Et ce ne serait de toutes façons pas nécessaire.

Supposons que la feuille de style sans média ou avec le media "all" comporte :

a écrit :
#menu {
float: left;
...
}
#contenu {
width: 600px;
...
}

La feuille de style d'impression doit reprendre les mêmes id pour modifier et compléter ces propriétés:

a écrit :
#menu {
float: none;
...
}
#contenu {
width: 100%;
...
}

Cet article devrait te donner un exemple concret et documenté de CSS print : http://openweb.eu.org/articles/exemple_css_print/
Modifié par Laurent Denis (30 Jul 2005 - 22:30)

Plutôt que de redefinir tout, pourquoi ne pas clairement indiquer les medias dircetement ?

Merci désormais j'ai toutes les clés en main .0 Z'etes trop forts

Si tu veux j'ai commencé une feuille de style d'impression pour mes tutos pour que tu vois ce que ça donne :
http://tutoriels.olivier-patry.net/themes/tutoriels/print.css

C'est à mon avis à compléter, mais ça donne une idée déjà.

Arf encore une question:

Comment joindre une CSS print avec @import au lieu de <link>

chintaoui a écrit :
Arf encore une question:

Comment joindre une CSS print avec @import au lieu de <link>

Comme ça :

@import url(print.css) print;

Didju... J'en ai marre de cette daube d'IE sérieux !!!!

Ca ne marche pas sous IE cette façon de faire.
Même avec le link et le media="print", il ne prend pas en compte la feuille

Il ne comprend pas non plus

@import url(style.css) screen;

Un autre hack pour IE...
Modifié par Olivier (30 Jul 2005 - 23:29)

Ah ben voilà pourquoi je galère lol. Bon ben on est dans la mouise.

chintaoui a écrit :
Ah ben voilà pourquoi je galère lol. Bon ben on est dans la mouise.

Utilise la méthode avec import si tu veux, mais :

ca ne marchera pas sous IE6, mais même avec link ça ne semble pas marcher.

ca masquera le style d'impression aux vieux navigateurs du fait du @import, mais je doute de toute façon qu'ils gèrent le media print.

Donc, te gène pas pour eux.

L'impression sera sans style aucun sous IE si tu as bien indiqué media="screen" sur ta feuille de style à l'écran.