28172 sujets

CSS et mise en forme, CSS3

[Résolu] Margin-bottom en impression

Bonjour,

Ma question précédente étant restée sans réponse, je re-poste ma question differement.

J'imprime un billet de mon blog (marge Firefox à 0cm) avce le fichier print.css ci-dessous :


body {
	display: block;
	font: 11px/18px Verdana, Geneva, Arial, Helvetica, sans-serif;
	border: 1px solid red;
	margin-top: 3cm;
	margin-bottom: 3cm;
	margin-left: 6cm;
	margin-right: 4cm;
}


Mon billet faisant plusieurs pages, je n'arrive pas à avoir la marge du bas à 3 cm sur chaque page, mais juste à la fin du body, sur la dernière page.

Comment faire pour avoir une marge de 3 cm en bas de chaque page ?

Merci d'avance.
Modifié par tuck (15 Aug 2008 - 15:16)
Bonjour,

Pourquoi ne pas mettre les marges sur un conteneur global plutôt que sur le body ?

Smiley sweatdrop
a écrit :

Pourquoi ne pas mettre les marges sur un conteneur global plutôt que sur le body ?


Qu'entends-tu par là ?

Merci
Et bien, imaginons que ta page HTML se présente comme suit (de façon très réductrice) :

<body>

<div id="conteneur">

... contenu de ta page ...

</div>

</body>

Je me demandais ce que ça donnerait d'appliquer les marges sur #conteneur plutôt que sur body.

Smiley biggol
Bonjour,

Les marges d'une page imprimée se gèrent avec @page, pas avec des marges sur l'élément BODY (ou autre élément), qui marcheront pour les marges latérales, pour la première page et la dernière page, mais pas pour déterminer l'emplacement de la coupure entre deux pages.

Hop:
http://www.w3.org/TR/CSS21/page.html
@ Florent v.

Merci de ta réponse, j'ai suivis les conseils du site dont tu m'avais donné le lien, mais cela n'a pas l'air de fonctionner. Ci-dessous le code de mon print.css


@page {
	margin: 5cm;
}

body {
	display: block;
	font: 11px/18px Verdana, Geneva, Arial, Helvetica, sans-serif;
	border: 1px solid red;
}

img {
	margin-left: auto;
	margin-right: auto;
	padding: 5px;
	border: 1px solid #206dc5;	
}

a { text-decoration : none; }

#sidebar, #prelude, #footer, #comment-form , #top { display : none; }
tuck a écrit :
j'ai suivis les conseils du site dont tu m'avais donné le lien

Il s'agit de la spécification CSS 2.1. Ce ne sont donc pas des conseils, mais la norme elle-même. Smiley cligne

tuck a écrit :
mais cela n'a pas l'air de fonctionner

Ça ne fonctionne effectivement pas avec la plupart des navigateurs (je crois qu'Opera s'en sort mieux que les autres, mais c'est à peu près tout). Cette partie de la spécification (styles pour l'impression / médias paginés) est assez mal implémentée par les navigateurs. Il n'y a que des outils tels que Prince XML (un générateur de PDF qui utilise HTML ou XML et CSS) qui l'implémentent assez largement.

Donc: rien à faire, sauf passer par du PDF si on doit absolument obtenir un rendu précis.

Pour rappel, il y a un tutoriel sur les styles pour l'impression dans les tutoriels Alsacréations.
Modifié par Florent V. (14 Aug 2008 - 18:10)
Merci Florent V., je vais tester Prince XML et je reviens vous faire part de mes essais (en espérant que ce sera concluant).

Il semblerait donc que Firefox implémente mal la norme CSS 2.1 en ce qui concerne le @page.

Merci pour vos réponses.
Après plusieurs essais je suis enfin arrivé à ce que je voulais avec Prince XML (merci à Florent V. pour la suggestion, car ce programme implémente convenablement le @page qui me faisait défaut sous Firefox).

Cependant j'ai encore une question. Peut-on en CSS "réduire" une photo (en gardant le ratio) selon qu'elle soit de type portrait ou paysage. En fait pour imprimer les billets de mon blog, je copie-colle le code HTML dans un fichier que je passe à la moulinette Prince XML avec le bon print.css.

Cependant toutes mes images se retrouvent avec la même largeur alors que je voudrai qu'elle garde toutes une largeur proportionnelle à leur taille d'origine :

img {
height: 50%
width: 50%
}


Peut-on mettre un argument de type If ... then ... else dans du CSS ?

Merci d'avance.
tuck a écrit :
Cependant toutes mes images se retrouvent avec la même largeur alors qu: e je voudrai qu'elle garde toutes une largeur proportionnelle à leur taille d'origine

Voir dans la documentation de Prince XML ce qui concerne les images. Je ne sais pas trop ce qu'ils ont prévu. En tout cas, si tu fais width: 50% tu dis à l'image de prendre, pour largeur, la moitié de la largeur de son parent; donc ça ne correspond pas à ce que tu souhaites.

tuck a écrit :
Peut-on mettre un argument de type If ... then ... else dans du CSS ?

Non.
Modifié par Florent V. (15 Aug 2008 - 07:55)
OK, je vais me pencher dans la doc de Prince XML pour voir comment traiter les photos.

Merci à tous pour vos conseils et remarques.

Je considère le sujet comme [résolu].
Sujet clos
Aller à