28172 sujets

CSS et mise en forme, CSS3

[résolu] CSS Print : afficher le titre à la place du bandeau

Pages :
Bonjour,

Je suis en train de mettre en place une feuille de style pour l'impression (site visible ici). Pour la mise en place de mon bandeau, j'avais appliqué la même méthode que sur alsacreations. Ça donne :
<h1><a title="Médiathèque Louis Aragon - accueil" href="http://mon_site"><img alt="Médiathèque Louis Aragon - accueil" src="http://mon_bandeau.png" width="928" height="273" /></a></h1>

Seulement, à l'impression, je préfèrerais faire une mise en forme du titre en format texte, plutôt que d'obliger à imprimer un bandeau assez large et assez haut (qui plus est, il dépasse de la feuille lorsque je lance un "Aperçu avant impression" sous Firefox 3.6.15).
Y a-t-il moyen de masquer le bandeau à l'impression, et de le remplacer par le titre (qui figure dans le "title" du lien, ou dans le "alt" de l'image) que je pourrai ensuite mettre en forme dans ma CSS ?

Merci pour votre aide, et bon après-midi à tous !
Modifié par Fix (12 Mar 2011 - 17:02)
Bonjour,

Et si tu donnais un attribut id à l'image qui sert de logo. Puis dans ta feuille de style propre à l'impression, tu mets cette id en display:none.

Pour faire apparaître un texte à la place, tu places un élément avec le texte. Tu mets cet élément en display:none pour la version écran et en display:block pour la version print.

Cordialement
Modifié par lddsoft (11 Mar 2011 - 15:32)
bonjour,

aucun soucis dans ce cadre d'usage de cacher l'image. elle pourrait aussi etre redimensionner.

pour le coté css, on pourrait par exemple recuperer le title et le lien pour remplacer l'image:

h1 a:before {content:attr(title);display:block;}
h1 a:after {content:attr(href);font-size:0.5em;display:block;}
h1 img {width:10cm;height:auto;}


GC
Aucun souci de cacher l'image, certes... mais cacher le texte par un "display: none" ou un "visibility: hidden", c'est nettement plus ennuyeux, comme l'expliquent très bien les liens données par Mabelle.

gc-nomade, j'aime assez ta solution néanmoins (même si elle n'est pas compatible avec IE6 et 7...). Je vais voir de ce côté-là.
J'aurais encore deux questions concernant cette CSS print :
1). j'utilise le script jCarousel sur la page d'accueil du site (c'est toujours ici), et lorsque j'imprime ma page, seul le dernier billet est affiché... y a-t-il un moyen pour que tous les billets du carousel le soient ?
2). Toujours sur cette page d'accueil, la partie "Nos prochaines animations" est désespérément bloquée à droite à l'impression... Et je ne comprends pas pourquoi ?
Pourquoi "cacher le texte par un display:none" est-il ennuyeux, puisque ce texte est remplacé par l'image dans la version écran, et est affiché, en remplacement de l'image, dans la version print de tes CSS ?

Personnellement, je trouve regrettable d'utiliser des pseudo-éléments qu'ignorent les versions IE antérieures à la 8. Bon nombre de personnes utilisent encore ces vieux dadets de navigateurs (hélas).

@Mabelle > je ne vois pas où est le problème dans la mesure où il s'agit de la version destinée à être imprimée.
Modifié par lddsoft (11 Mar 2011 - 17:15)
lddsoft a écrit :
Pourquoi "cacher le texte par un display:none" est-il ennuyeux

Pour toutes les bonnes raisons indiquées notamment ici.
Fix a écrit :

gc-nomade, j'aime assez ta solution néanmoins (même si elle n'est pas compatible avec IE6 et 7...). Je vais voir de ce côté-là.

L'image redimensionner devrait probablement suffire pour IE ?

lddsoft a écrit :

Personnellement, je trouve regrettable d'utiliser des pseudo-éléments qu'ignorent les versions IE antérieures à la 8. Bon nombre de personnes utilisent encore ces vieux dadets de navigateurs (hélas).

D'accord, mais il ne faut pas se focaliser a développer pour une seule marque de navigateur, tant qu'ils affichent l'essentiel, tout va bien.

GC
N'oublions pas la question première posée par Fix :

Comment faire pour ne pas imprimer le bandeau (logo) dans la version imprimable de la page.

Il n'est donc pas question d'un quelconque manque d'accessibilité pour les mal-voyants. Smiley cligne
Comment faire pour ne pas imprimer le bandeau (logo) dans la version imprimable de la page...

... et le remplacer par le titre Smiley cligne

Bref.

Fix a écrit :
J'aurais encore deux questions concernant cette CSS print :
1). j'utilise le script jCarousel sur la page d'accueil du site (c'est toujours ici), et lorsque j'imprime ma page, seul le dernier billet est affiché... y a-t-il un moyen pour que tous les billets du carousel le soient ?
2). Toujours sur cette page d'accueil, la partie "Nos prochaines animations" est désespérément bloquée à droite à l'impression... Et je ne comprends pas pourquoi ?
Le problème 2 était dû à une autre feuille de style CSS sans spécification du média... et qui s'appliquait donc aussi à l'impression. C'est maintenant corrigé.

En revanche, le problème numéro 1 m'a l'air curieux : je suppose que le javascript n'est évidemment pas interprété pour l'impression... donc pourquoi l'aperçu avant impression en tient-il compte ? Par exemple :
. sur ma page d'accueil, si je fais un "Aperçu avant impression" (sous Firefox 3.6.15) alors que le carousel est en cours de défilement, l'aperçu ne m'affichera qu'une partie du texte (autrement dit : l'aperçu reflète exactement ce qui était à l'écran au moment où j'ai cliqué sur "aperçu avant impression", c'est-à-dire une partie de texte en train de défiler) ;
. sur ma page "Livres de jeunesse" (ici), c'est une rotation d'images. Il se passe la même chose : si la rotation est en cours, l'aperçu montre effectivement une image plus petite que l'autre, et plus effacée (en filigrane).

Quelqu'un pourrait m'expliquer ce comportement ?
Pour le problème 2, dans la feuille "jcarousel.css", le div "#editos" est positionné en float:left et le div "#animations" en float:right. Ceci explique cela.

Je ne sais pas si tu as essayé, mais si tu configures l'impression sur paysage, tu vois les 3 paragraphes dans leur totalité. Je suppose qu'il s'agit d'une question de largeur de la page web à imprimer qui est trop importante pour tenir sur une feuille A4 en format "portrait".
Modifié par lddsoft (12 Mar 2011 - 10:00)
Le problème #2 a été corrigé... comme je l'avais indiqué dans mon message précédent !

Pour le problème de l'impression du script, aucune largeur n'est spécifiée dans la CSS, donc je ne vois pas pourquoi ça déborderait... Et ma question n'était pas là :
Fix a écrit :
je suppose que le javascript n'est évidemment pas interprété pour l'impression... donc pourquoi l'aperçu avant impression en tient-il compte ?
OK, je sais lire ! Je tentais tout simplement de t'expliquer le problème 2.

Pour ce qui concerne l'impression, je maintiens ce que j'ai dit : la largeur d'une page web n'est pas égale à la largeur d'une feuille A4 !!!!!
Si aucune largeur n'est spécifiée, c'est que ta largeur = 100% de l'élément parent.
Modifié par lddsoft (12 Mar 2011 - 11:50)
Pas taper Smiley cligne J'avais bien compris d'où venait le problème 2. J'aurais dû être plus clair dans la formulation de mon message.

Pour l'autre problème, je ne suis pas sûr de bien comprendre : ça veut dire qu'il faudrait que j'ajoute un body { width: 100%; } ?

Merci de votre aide.
Fix a écrit :
Pour l'autre problème, je ne suis pas sûr de bien comprendre : ça veut dire qu'il faudrait que j'ajoute un body { width: 100%; } ?


J'ai un peu étudié le code HTML et les feuilles de style de ta page d'accueil, mais, je dois bien l'avouer, je suis le bec dans l'eau là. Je ne crois pas qu'il s'agirait de mettre un body à 100% de largeur. La solution doit être ailleurs, mais où ...?

Je te disais plus haut qu'en mettant le format paysage, on pouvait lire la totalité des 3 articles. En fait, j'ai mal regardé: le début et la fin des lignes sont tronqués. Je n'ai encore jamais eu cela auparavant.
En fait, ça dépend de l'endroit où se trouve le carousel sur l'écran : s'il est en cours de défilement, alors l'aperçu sera tronqué. Sinon, l'aperçu affiche bien tout le texte. On peut donc regarder plusieurs fois l'aperçu, et avoir des résultats différents (idem pour l'impression, j'ai essayé).

D'où le fait que, à mon avis, le javascript de ma page est interprété même lorsqu'il s'agit de l'aperçu avant impression, ou de l'impression elle-même...

...mais pourquoi ? Là est la question.

Pour le formuler autrement : quelqu'un s'est-il déjà penché sur la CSS Print d'une page contenant un javascript ? Si oui, le script était-il ou non interprété ? Comment gérer cela dans la feuille de style ?
bonjour,

Une autre approche serait de servir tout les style lié aux script avec l'attribut media pour ecrans et de faire usage de !important; dans la feuille dedié a l'impression pour evincer les style injecter via javascript.

Pour editos par exemple:
#editos , #editos *{position:static!important;max-width:100%!important;}


A prendre en premier comme une piste et pas forcement la soluce.

Cordialement
C'est une excellente solution ! Merci beaucoup !

Je n'avais pas du tout compris la cause de mon problème. Merci de me l'avoir expliquée : il s'agit bien en effet de "style injecté via javascript". Un aperçu du code source généré m'aurait permis de m'en rendre compte...

Ce billet est donc résolu. Un grand merci à vous.
Pages :
Sujet clos
Aller à