28220 sujets

CSS et mise en forme, CSS3

[resolu] CSS Print

Aloha msieurs dames,

J'aimerais mettre en place un css print pour alléger une page de ses couleurs et menus inutiles à l'impression. Seulement voila, les aperçus de FF et IE me montrent la page brute de décoffrage, sans CSS. Vous pouvez m'aider ?
@page {size: portrait; margin: 5%; font-size: 12pt;}

.break {page-break-before: always;}

/* Elements à cacher */
ul, #head1, #pied2, #pied3, #bleu, .archi, .imgfrqp, .prix1 span, .offreshotel, .autresoffres, .compteur, .reserve {display:none;}

.txthotel {width:100%;height:480px;}
h2.titrehotel {margin: 0px; font-size: 120%; font-weight:bold;color:#052B50;}
h2.titrehotel span.txtright {margin: -20px 0 20px 50px;}
.plan {float:none;position:relative;margin: 0; top:100px; left:300px;}
.prix {float:none;position:relative;border:none;top:20px; left:-220px;}
.optionhotel {float:none;position:relative;top:20px; left:-220px;}
.commenthotel {float:none;position:relative;top:40px; left:-220px;}
.adressehotel {float:none;position:relative;top:140px; left:-495px;border:white;width:100%;margin:0;}
p {padding: 0px 10px; font-size: 100%; margin: 5px 0px 0px 0px;}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	<head>
		<title>Quick Palace : Liste des hôtels Bip en France</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
			<link href="bip.css" rel="stylesheet" media="screen">
				<link href="style.css" rel="stylesheet" media="screen>
				<link rel="stylesheet href="print.css" type="text/css" media="print"/>
	</head>

Modifié par kuvett (19 Jul 2005 - 14:30)
Peut-être que c'est parce que ta balise rel est mal fermée Smiley smile 

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

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

Egalement : les 3 liens vers les feuilles de styles sont à corriger pour y placer l'espace et le / finaux.

Pour la CSS print proprement dite, tu peux supprimer la règle @page {size: portrait... qui n'est comprise que par Opera, et qui a disparu en CSS2.1 (voir http://blog-and-blues.org/weblog/2004/11/24/346-de-css2-a-css21-anticipation-raisonnable-1 )

Pour tes différentes classes, mieux vaudrait éviter l'utilisation de l'unité pixel, qui n'a pas de sens dans ce media : le pt, le cm sont appropriés. Le pt est intéressant puisqu'il permet de rendre proportionnels les espacements et la taille de la police...

Les positions relatives gagneraient à être remplacées par des marges, si possibles, pour des espacement plus fiables entre blocs.

Enfin, les couleurs seront "écrasées" par le réglage des préférences utilisateurs.
Modifié par Laurent Denis (19 Jul 2005 - 14:41)
Sujet clos
Aller à