Aller au contenu

css d' impression et div

ricsavoy

Par ricsavoy
dans (X)HTML et CSS

 Partager

Sujets conseillés

ricsavoy

ricsavoy

Posté
Posté

Hello tous,

Voici mon prob.....

lorsqu'un utilisateur imprime une page de mon site, je voudrais qu'il y est un logo en haut de la page imprimée, donc mon idée était la suivante

Créer un div avec comme image de fond mon fameux logo, que j'incere dans ma page html mais que je cache avec display:none; et bien sur que je mets en display:bloc dans ma css d'impression mais ça ne marche pas ??? <_<

D'ailleurs, comme tous mes cadres ajustables au contenu crées en css, il n'apparaissent pas à l'impression, heureusement que je ne voulais pas qu'ils soient imprimables, sinon :blink:

Quelqu'un à une réponse à mon prob?

C'est moi ou un bug IE

sous IE6

Lien vers le commentaire
Partager sur d’autres sites
AntiStatic

AntiStatic

Posté
Posté

Salut !

en fait je crois que c'est tout simplement car les images utilisées en fond de div, ou de page ou de n'importe quoi ne sont pas imprimées ... il vaudrait donc mieux que tu fasse le contraire.

C'est à dire mettre ton logo en dur dans le site, déjà ce sera beaucoup mieux pour les visiteurs qui verront ton site sans CSS, et passer le div dans lequel tu auras mis ton logo en display:none sur ta CSS d'impression !

Comme ca le tour est joué ;) Enfin je pense, à moins que j'ai mla compris ton pb ...

Dis moi si ca marche ! A +

Lien vers le commentaire
Partager sur d’autres sites
ricsavoy

ricsavoy

Posté
  • Auteur
Posté

nope ça marche pas :unsure:

voici un extrait de mon code html :

<body>

<div class="adresse"><img src="logo_graph/adresse.jpg" alt="adresse"/></div>

la css normale :

.adresse {

display: none;

height: 126px;

width: 273px;

}

la css d'impression :

div.adresse {

height: 126px;

width: 273px;

display:bloc

}

J'en profite pour dire aussi que :

_AT_page {

size:landscape;

background: #333333;

margin: 30px;

}

Ca marche pas du tout, la "liaison" ne se fait pas !!!!!

:(

Elle est où la tuile ?

Lien vers le commentaire
Partager sur d’autres sites
LaurentDenis

LaurentDenis

Posté
Posté

Il faut se souvenir que dans tous les cas, les préférences et la configuration de l'utilisateur l'emportent sur la feuille de style "auteur" (celle du site).

C'est particulièrement vrai en ce qui concerne l'impression. La plupart des navigateurs activent par défaut l'option "ne pas imprimer les arrières-plans". Une image de contenu (<img...> html) aura plus de chances d'être imprimée dans les configurations par défaut, mais là encore, l'utilisateur peut aisément les supprimer.

Lien vers le commentaire
Partager sur d’autres sites
AntiStatic

AntiStatic

Posté
Posté

Déjà si tu veux afficher en bloc il faut mettre display : block ! et non pas bloc ! Mais en fait il faut que tu utilise l'attribut CSS visibility et non pas display donc par exemple :

visibility: hidden;

visibility: visible;

Donc au final essaye ca :

<div class="adresse"><img src="logo_graph/adresse.jpg" alt="adresse"/></div>

la css normale :

.adresse {
visiblity : hidden;
height: 126px;
width: 273px;
}

la css d'impression :

div.adresse {
height: 126px;
width: 273px;
visiblity : visible;
}

normalement tu n'est pas obligé de spécifier visibility : visible vu que c'est l'attribut par défaut de tout object HTML ! J'en profite aussi pour préciser qu'en CSS de niveau 2 il ne faut pas mettre #333333 mais #333 ;)

Lien vers le commentaire
Partager sur d’autres sites
LaurentDenis

LaurentDenis

Posté
Posté
Déjà si tu veux afficher en bloc il faut mettre display : block ! et non pas bloc ! Mais en fait il faut que tu utilise l'attribut CSS visibility et non pas display

Pas tout à fait.

- display supprime totalement l'élément de l'arbre du document : il n'apparait plus et n'a plus aucun effet sur les autre éléments de même niveau de parenté. Il n'est plus possible non plus de modifier la propriété display de ses éléments enfants. Bref, c'est comme s'il n'avait pas été dans le code HTML.

- visibility ne fait que rendre le contenu, les arrière-plan, les bordures, etc. de l'élément invisibles. Mais il est toujours présent dans l'arbre du document, et la boîte visuelle correspondante agit toujours sur les autres éléments de même niveau. Autrement-dit, un élément en visibility:hidden se manifeste par un grand espace blanc ;)

J'en profite aussi pour préciser qu'en CSS de niveau 2 il ne faut pas mettre #333333 mais #333 ;)

Non.

Les valeurs de couleurs CSS1 et CSS2 peuvent être spécifiées de multiples manières, et dans ce cas, sous forme abrégée ou non.

Lien vers le commentaire
Partager sur d’autres sites
ricsavoy

ricsavoy

Posté
  • Auteur
Posté

Merciiiiiiiii ça marche impec ! :D

et pkoi la liaison ne se fait pas avec :

_AT_page {

size:landscape;

background: #333333;

margin: 30px;

}

:blush:

Il ne faut pas remplacer le terme _AT_page par le nom de sa propre page quand meme ??? si c'est ça on peut decerner le prix :1eye:

Lien vers le commentaire
Partager sur d’autres sites
LaurentDenis

LaurentDenis

Posté
Posté
et pkoi la liaison ne se fait pas avec :

_AT_page {

size:landscape;

background: #333333;

margin: 30px;

}

_AT_page n'est pas supporté par IE, Mozilla, FireFox. A ma connaissance, seul Opera l'implémente correctement. En fait, en raison de son peu de support, le rôle de _AT_page va être considérablement réduit avec CSS2.1, qui ne conserve que la propriété margin, et supprime size...

La couleur d'arrière-plan, comme dit plus haut, est de toute façon le plus souvent annulée par la configuration locale de l'impression.

Enfin, le navigateur gère lui-même ses propres marges d'impression. Il est cependant possible de spécifier des marges en le faisant plus simplement directement pour l'élément body dans la CSS print. Il est préférable de le faire en cm, unité plus adaptée au média papier.

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
 Partager
Aller sur la liste des sujets
×
×
  • Créer...