28112 sujets

CSS et mise en forme, CSS3

Bonjour à tous !

Je me permets de solliciter votre aide pour une mise en forme qui commence à fortement me taper sur le système Smiley lol Après de nombreux essais peu fructueux et un écumage intensif de page sur Google, la communauté de Alsa reste mon dernier et meilleur atout pour y remédier Smiley winner

En effet, j'essaie de faire en sorte d'avoir une mise en page personnalisée (et un peu joli) lors de l'impression. J'ai donc pas mal usé du @media print, et j'arrive grossièrement à la maquette que j'avais conçu. Néanmoins persistent deux problèmes auxquels de nombreuses tentatives n'ont rien résolu :

- Sur Safari, la mise en page est très particulière et n'est pas du tout fidèle au rendu des autres navigateurs. En effet, il y a un effet de "dezoom" : le contenu est petit et ne prend pas toute la hauteur de la page alors qu'il s'adapte très bien aux autres navigateurs.

- Je ne parviens pas à venir à bout des marges (je veux que la vaguelette soit en bord à bord), malgré avoir mitraillé de margin:0 le body, le #page, le @page ... Le plus étrange est que si le contenu est sur 2 pages, le texte de la deuxième page va s'afficher directement en bord de feuille (sans margin-top) Smiley confus


Plutôt qu'un long discours je vous propose de voir directement sur mon serveur test la situation :

http://dev.emmanuelclaude.fr/oe-dev/?offre-d-emploi=test (id et mdp du dev : test / test - le CSS spécifique print commence ligne 1485 jusqu'à la fin)

Je sais que c'est possible car j'ai vu des rendus similaire à ce que je veux réaliser, fonctionnelles sans les problèmes que j'ai énuméré.

Je suis assez à l'aise avec le CSS en général, je me suis documenté sur le CSS print mais pas mal de choses m'échappent encore, et pour couronner le tout le debug n'est pas vraiment intuitif (hormis sur le Devtools de Chrome qui permet d'émuler l'impression sans passer par un CTRL+P.

Je vous remercie par avance de votre attention et votre aide !
Modifié par zongo (15 Feb 2018 - 21:42)