Impression page web et structure en DIV

[sim100]

Bonjour
Voila, j'ai fais ça
-http://www.1two.org/corpscoeuresprit/
à titre d'exemple.

Quand j'imprime la page avec plusieurs imprimante, je n'ai pas le site en entier sur la page, c'est coupé.

Le site est en 900px de large. C'est une structure en DIV

Pouvez-vous me dire si vous avez le même type de problèmes avec vos sites, si c'est à cause de la structure et si je dois passer en tableaux, ou si le site en 900px est trop large

Merci beaucoûp

 

[Bacteries]

Fais une CSS spéciale pour le media print. Et tu pourra donc avoir une impression comme tu souhaites.

 

[sim100]

Fais une CSS spéciale pour le media print. Et tu pourra donc avoir une impression comme tu souhaites.

C'est quoi ça

Merci

 

[Marie-Aude]

Une feuille de style avec comme type de media "print" donc qui s'applique uniquement à l'impression.

 

[Celtic Girl]

Pour faire simple, tu peux créer une seconde feuille de style qui ne s'applique qu'à l'impression.

Cela te permet d'optimiser le contenu imprimable, faciliter sa lecture, et même, pour les écolos, diminuer la quantité de pages à imprimer. Tu peux ainsi choisir pour l'impression, d'enlever ton menu à gauche, et de laisser seulement le contenu de ton site avec son header et footer... Bref, à toi de tâter un peu du CSS et de tester les possibilités d'une feuille CSS pour l'impression. :wink:

Pour que ta feuille soit bien intégrée dans tes pages, préfère ce code-ci :

<link rel="stylesheet" type="text/css" href="print.css" media="print" />

Cela permettra aux navigateurs d'interpréter ta feuille CSS comme étant spécialement dédiée à l'impression. :wink:

Bon courage pour la suite.

 

[sim100]

Ah d'accord, je ne connaissais pas ! terrible !

Donc je mettrais que la partie centrale, mais alors comment faire pour que seule la partie centrale soit imprimmée ?

Dans le print.css il faut mettre la même chose que dans le style.css normal et vider la colonne de gauche et le header ?

Je ne vois pas trop la

Merci encore

 

[Celtic Girl]

Tu peux effectivement reprendre les mêmes bases que ton css initial, à condition bien sûr de reprendre ces bases dans un autre fichier portant un nom différent. (Il est important de bien dissocier ton fichier css pour l'écran et ton fichier css destiné à l'impression).

Si tu veux par exemple désactiver l'affichage de ton menu, ça te donnera ce genre là :

#menu {
  display:none;
}

Pour plus d'infos, jette un coup d'oeil ici : http://www.siteduzero.com/tutoriel-3-33242-imprimer-uniquement-le-contenu-d-une-page-web.html

En espérant t'avoir aidé...

 

[sim100]

OK, merci beaucoup à tous, je jetterais un oeil sur le lien, mais je pense avoir capté le truc

Merci

 

[Marie-Aude]

Tu peux mettre des display none sans problème.
Si tu veux un exemple live, regarde la page www.mezgarne.com/maroc/
Il y a des zones qui ne s'affichent pas et à l'inverse, quelques zones qui ne s'affichent que sur le print.
Technique parfaitement valide aux yeux de Google, je le précise, à partir du moment où on n'en profite pas pour bourrer en mots clés. Je rajoute au print des détails sur l'identification de la page, j'enlève les menus, les puces en forme d'image...

J'ai pris la précaution de supprimer l'image de fond, c'est un réglage par défaut dans la plupart des navigateurs, mais comme ça je suis sûre de ce qui s'imprime.

 

[sim100]

Bonjour,

Bon flute
J'ai fais comme ils ont dit, voila mon code

body{
  background-color:#FFFFFF;
  color:#000000;
  font-size:13px;
  }

#conteneur { background-color:#FFFFFF; color:#000000; }
	
#header { display:none; }
	
#center { margin-left: 0px; background-color:#FFFFFF; color:#000000 }

#left { left: 0; float: left; width: 0px; display:none; }

#footer { display:none; }

Bon alors, j'avoue que j'ai essayé beaucoup de truc
Mais basiquement, j'ai toujours un espace à gauche lors de l'impression, et donc le texte centrale est coupé à droite, une centaine de pixels.
Je n'arrive pas à avoir une impression correcte non coupée.

Une idée ?
Merci