28173 sujets

CSS et mise en forme, CSS3

bonjour,
ma question porte sur la mise en forme d'une page en impression:
je souhaite mettre un titre de document centré sur la page avec une bordure en haut et en bas.
Ce titre est dans #colonne-droite.
Ma colonne de gauche n'est pas affiché à l'impression.
Et en affichage écran ma colonne de droite fait une taille fixe de 950px.
Comme faire pour que ma #colonne-droite prenne toute la page (la bordure) et que mon titre soit centré???

ci-joint mon code qui hélas ne marche pas!

#colonne-gauche {
	display:none;
}
body, #wrapper {
	width:100%;
}
#colonne-droite {
 	width: 100%;
}
h2.titre-age {
	display:block;	
	font-size:20px;
	text-align:center;
	border-bottom:2px solid #000;
	border-top:2px solid #000;
	color:#000;
 	width: 100%;
}
Modérateur
Salut,

Un h2 est déjà un élément de type block qui prend toute la largeur dont il dispose donc il semble inutile de le repréciser, non ?
Pour le centrage, il faut bien passer par un text-align: center;

... et pour ne plus avoir de marges, il faut intervenir sur les paramètres de ton imprimante et non sur le CSS.... à moins bien sûr que tu en aies rajoutées via CSS.
Modifié par koala64 (05 Sep 2007 - 11:12)
Bonjour,

As-tu lu le tutoriel sur les feuilles de style pour l'impression?
http://css.alsacreations.com/Tutoriels-et-articles-divers/feuille-css-impression

On y souligne le fait que le support des CSS pour l'impression est plutôt partiel, notamment en ce qui concerne la gestion «papier»: format, orientation, sauts de page, veuves et orphelines, paragraphes solidaires, etc.

Pour un rendu travaillé, il faudra donc passer par du PDF.
Pour information: le logiciel Prince XML permet de générer du PDF de qualité à partir de fichiers HTML/XML stylés via CSS. Ils ont un très bon support des propriétés CSS pour l'impression.
Le logiciel est disponible dans une version gratuite mono-utilisateur. Ils ajoutent un logo Prince sur la première page (logo non visible à l'impression). La licence pro est à 500$ (380-400 EUR), et les licences serveur sensiblement plus chères.
Quoi qu'il en soit, la version gratuite est sympa, et ça vaut le coup de l'essayer.
Je viens de tester quelques réglages sympathique avec Prince:
/* Format, orientation, marges de la page */
@page {
	size: A4 landscape;
	margin: 24mm 20mm;
}

/* Affichage sur deux colonnes type «roman» */
body {
	column-count: 2;
	column-fill: auto;
	column-gap: 60mm;
}

Bien entendu, pas la peine d'espérer de support correct de ceci de la part des navigateurs web. Sauf peut-être, partiellement, dans Opera (à voir...).