CSS print

Bonjour,

Pour mon site, j'ai commencé à créer une page css destiné à l'impression. Pour l'instant seule certaines pages sont visé. Mais il y a 2-3 trucs qui me donne du fils à retordre sur une page en particulier.

exemple de page: -http://www.spypoint.com/FR/produits/camera-chasse-cellulaire/produit-Mini-LIVE.html

1. Le tableau des caratéristiques
Le dit tableau ne se sépare pas en 2, pour continuer sur la page qui suit. Pire, il saute une nouvelle page et cache se qui dépasse de la page!
2. les fichiers javascript.
Le script isotope fou en l'aire toute ma mise en page au niveau de la section des produits compatibles (tout en bas).

Salut,

J'ai vu passer un up...
Je teste sur la page que tu as donné en faisant un ctrl + P sous chrome et un aperçu avant impression sous FF

juliesunset a écrit :

1. Le tableau des caratéristiques
Le dit tableau ne se sépare pas en 2, pour continuer sur la page qui suit. Pire, il saute une nouvelle page et cache se qui dépasse de la page!

Le tableau se comporte plutôt bien sous Chrome mais sou FF effectivement il saute la page courante pour s'afficher sur une page neuve... Un solution pourrait être de modifier ton DOM et plutôt que d'avoir un gros tableau, le découper en plusieurs tableau (un par "section").

juliesunset a écrit :

2. les fichiers javascript.
Le script isotope fou en l'aire toute ma mise en page au niveau de la section des produits compatibles (tout en bas).

Oui la par contre c'est moche dans les deux cas. A mon avis c'est une un problème de div. Faut vraiment un gros reset du positionnement que le plugin te fait et reprendre calmement avec un beau inline-block etc.



PS : Je suis absolument ULTRA FAN de la visu a 360 du produit ! C'est un truc auquel je pense depuis des années et que j'ai jamais pu mettre en pratique... Superbe !
Modifié par _laurent (06 May 2015 - 16:51)

Merci pour ta réponse.

_laurent a écrit :
Je teste sur la page que tu as donné en faisant un ctrl + P sous chrome et un aperçu avant impression sous FF

Effectivement, je n'ais testé que sur Firefox, mais peu importe vue que ça ne fonctionnais pas comme je voulais...

_laurent a écrit :
Le tableau se comporte plutôt bien sous Chrome mais sou FF effectivement il saute la page courante pour s'afficher sur une page neuve... Un solution pourrait être de modifier ton DOM et plutôt que d'avoir un gros tableau, le découper en plusieurs tableau (un par "section").

Mouais... je vais étudier cette solution ça demande quand même plusieurs modifs...

_laurent a écrit :
Oui la par contre c'est moche dans les deux cas. A mon avis c'est une un problème de div. Faut vraiment un gros reset du positionnement que le plugin te fait et reprendre calmement avec un beau inline-block etc.

J'ai essayé plusieurs trucs et rien n'a fonctionné... JE vais devoir y retourner...

_laurent a écrit :
PS : Je suis absolument ULTRA FAN de la visu a 360 du produit ! C'est un truc auquel je pense depuis des années et que j'ai jamais pu mettre en pratique... Superbe !

Ah merci, justement ça ne fait pas très longtemps que c'est en place. On voulait le faire depuis un bon moment déjà! Merci de ton retour!

Bon j'ai revu la structure du tableau, passé le conteneur en block, et retiré les page-break-before: always; et page-break-after: always;, maintenant le tableau passe bien,

Pour la partie avec le isotope, j'ai simplement "annulé" le transform qui était appliqué et maintenant tout ce place bien!

Je remarque cependant, que sur certaine page, les textes dans "Particularités" sont coupé... ex: -http://www.spypoint.com/FR/produits/camera-chasse-cellulaire/produit-SMART-PRO.html
Le premier texte ne continue pas à la page suivante...