28173 sujets

CSS et mise en forme, CSS3

Salut,
je suis en train de créer une page qui sera dédié à l'impression.
J'aurai voulu avoir des petits conseils pour cela car je ne trouve rien ou rien de complet sur ce que je veux.

En gros sur ma page, j'ai un tableau de 3 lignes,

premiere ligne qui est en gris avec un titre en balise H1

les autres lignes contiennent du texte que je voudrai laisser en verdana.

Quand je suis sur le net la page est nikel comme je voudrai l'imprimer mais quand je passe à l'impression il me manque des couleurs (comme le bgcolor de ma 1ere ligne du tableau)

voilà mon CSS

@media print{
body {
    font-size:12pt;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	background:white;
     }

h1 {
  font-weight:bold;
  color:white;
  font-size:1.2em;
  display:inline;

}

 .tr {
  background-color: #48485a;
} 
}


Pour le lien à insérer dans la page c'est bien :

<LINK rel=STYLESHEET href="imprimer.css" style type="text/css" media="print">

Merci d'avance
Jonathan
Modifié par jiojio (28 Jun 2007 - 14:29)
Salut,

Sauf erreur les backgrounds (fonds ou images) ne sont pas imprimés par défaut. Ceci est dû à la config impression du navigateur.

Sous FF par exemple, fais un aperçu avant impression, puis clique sur "mise en page" et coche "Imprimer le fond de page" de la rubrique Options.

Ca devrait fonctionner.

A + !

swissboy
et sur IE ^^

mais il n'y a pas un moyen de contourner ça ? ce n'est pas énorme ce que je demande d'imprimer là ? lol
Hello,

jiojio a écrit :
mais il n'y a pas un moyen de contourner ça ?

Non. À part remplacer le titre et son fond de couleur par une image (dans le code HTML, pas une image de fond), ou faire du PDF. Smiley smile
jiojio a écrit :
on ne peut pas imprimer un page directement comme elle apparait sur l'écran ?

Encore non. Tu imagines ce que ça donnerait pour les pages sur fond sombre, pour les sites très graphiques, etc. ? Bonjour le gaspillage d'encre pour imprimer quelques lignes de texte !

Pour rester zen et y voir plus clair, tu seras peut-être intéressé par cet article :
http://css.alsacreations.com/Tutoriels-et-articles-divers/feuille-css-impression
Modifié par Florent V. (28 Jun 2007 - 16:13)