Problème à l'impression

**JeanMarc_T2k** · 08/04/2008, 12h09

Bonjour,

J'ai créé un site que l'on peut voir à l'adresse : http://www.elevagedeshuguets.com

Avec IE, tout va bien à l'écran, mais lorsqu'on tente d'imprimer, la mise en page n'est pas respectée, et tout ne s'imprime pas.

Avec FF, c'est la catastrophe à l'écran, mais curieusement, c'est mieux à l'impression. Je reviendrai plus tard sur les problèmes d'affichage avec FF...

Le mieux est d'ouvrir le site, et passé la page d'acceuil, où il n'y a pas de problème, de se rendre compte sur une autre page.

J'ai lu quelques explications concernant l'impression, où je comprends qu'il faut créer un second fichier print.css. Ok, mais que faut-il changer à l'intérieur des styles, pour obtenir une bonne impression ?

Merci d'avance pour vos conseils.

**osia1** · 08/04/2008, 12h11

quelle est la largeur de ta page, si elle est supérieure à 900px c'est peut etre de là que vient le problème...

**JeanMarc_T2k** · 08/04/2008, 12h19

Ma page a une largeur variable, qui s'adapte à la largeur de l'écran.
J'ai l'impression que le problème vient de DIV qui à l'écran s'affichent les uns en dessous des autres, mais qui à l'impression s'affichent l'un à droite de l'autre.

C'est unpeu compliqué à expliquer, alors qu'en ouvrant le site puis en faisant un aperçu avant impression, on comprend immédiatement le problème.

**osia1** · 08/04/2008, 12h22

tu peux afficher le code s'il te plaît ça sera beaucoup plus simple...

**JeanMarc_T2k** · 08/04/2008, 12h28

Voici donc la page présentation :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<head>
<title>Elevage des Huguets</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="keywords" content="elevage,chevaux,pouliche,pouliniere,poulainsconcours morphologiques,master ibérique,modèles et allures,pre,AECE,pure,race,espagnole,&eacute;levage,poulini&egrave;ve,huguets,roussillon,luberon,84220,hara,paddock,">
<META NAME="description" CONTENT="L'&eacute;levage des Huguets cr&eacute;&eacute; en 2004 se situe en Provence au cœur du luberon sur la commune de Roussillon r&eacute;put&eacute;e pour ses ocres aux couleurs flamboyantes.Nos chevaux grandissent au milieu de paddocks en herbe ou ils peuvent s’&eacute;battre et se d&eacute;tendredans un environnement calme et serein.">
<META NAME="ROBOTS" content="index, follow, all">
<META NAME="Revisit-after" CONTENT="15"> 
<meta name="Author" content="Passiflores informatique - Jean-Marc VIDAL" lang="fr">
<meta name="Publisher" content="Elevage des Huguets, France">
<meta name="Copyright" content="Elevage des Huguets Roussillon, France">
<META NAME="Indentifier-URL" CONTENT="http://www.elevagedeshuguets.com/"> 
 
<link rel="stylesheet" href="style.css" type="text/css" />
<script src="menu.js" type="text/javascript"></script>
</head>
 
<body>
<script type="text/javascript">entetemenu(1)</script>
<div class="corps">
<table border="0" width="95%" cellpadding="3" cellspacing="0">
<tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
<tr>
 
<td width="25%">&nbsp;</td>
<td class="texteprincipal" width="75%" colspan="2">
L'&eacute;levage des Huguets cr&eacute;&eacute; en 2004 se situe en Provence au cœur du luberon sur la commune de Roussillon r&eacute;put&eacute;e pour ses ocres aux couleurs flamboyantes.<br/>
 
Nos chevaux grandissent au milieu de paddocks en herbe ou ils peuvent s’&eacute;battre et<br/> se d&eacute;tendre
dans un environnement calme et serein.
<br/>
<br/>
<br/>
 
 
</td>
<td width="25%">
<img src="images/presentation3.jpg">
</td>
<tr>
<td>&nbsp;</td>
<td width="25%">
<img src="images/presentation4.jpg">
</td>
<td class="textesecondaire" colspan="2">
Nous cherchons &agrave; d&eacute;velopper tout particuli&egrave;rement dans nos mod&egrave;les la fonctionnalit&eacute;, <br/>les allures
et le mental pour produire des chevaux destin&eacute;s aussi bien au dressage classique qu’&agrave; l’&eacute;quitation
d’ext&eacute;rieur.<br/>
 
Les &eacute;talons sont s&eacute;lectionn&eacute;s dans cette esprit, tandis que nos poulains sont manipul&eacute;s d&egrave;s leur plus jeune &acirc;ge, ce qui les rend naturellement confiants, maniables et respectueux du futur cavalier.
<br/>
<br/>
<br/>
 
 
</td>
</tr>
<tr>
<td>
&nbsp;
</td>
<td class="textesecondaire" colspan="2">
<br/>
Le cheval de Pure Race Espagnole appel&eacute; encore PRE fait partie des races les plus anciennes.<br/>
Il a &eacute;t&eacute; reconnu par les Haras Nationaux en 2001.<br/>
Sa r&eacute;gion d’origine, l’Andalousie, se situe au Sud de la P&eacute;ninsule Ib&eacute;rique d’o&ugrave;  son appellation<br/>
« Cheval Ib&eacute;rique ».
Il est tr&egrave;s appr&eacute;ci&eacute; pour sa noblesse, ses allures relev&eacute;es de haute &eacute;cole,<br/> son mental, sa fonctionnalit&eacute;
et son aptitude au rassembl&eacute;.<br/>
Ces qualit&eacute;s r&eacute;unies lui permette d’&ecirc;tre appr&eacute;ci&eacute; et mont&eacute; par des cavaliers tous niveaux confondus
et ainsi se faire plaisir tout simplement en chevauchant un cheval de Pure Race Espagnole.
<br/>
<br/>
<br/>
 
 
</td>
</tr>
</table>
 
<script type="text/javascript">basdepage(1)</script>
</div>
</body>
</html>

et le style CSS correspondant :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
 
body {
height : 100%;
width : 100%;
margin:10px;
background-color:#E3D393;
}
 
div#entete{
float:left;
margin-top:10px;
margin-right:20px;
 
background:#E3D393;
text-align: center;
}
 
div#lignehoriz{
float:top;
background-color:#9b0000;
height:3px;
}
 
.corps{
background-image: url("images/criniere4.jpg");
background-repeat: no-repeat;
background-position: top left;
height:100%;
 
}
 
 
#sansmarge {
margin:10px;
background-color:#E3D393;
}
 
*{
	margin:0;
	padding:0;
}
 
li{
margin:15px;
padding:0;
}
 
div#baspage {
              float:bottom;
 	height: 35px;
	text-align: center;
	margin-top: 30px;
              margin-left:0%;
	font-family:verdana, sans-serif;
	font-size:10px;
              color:#9b0000;
}
 
 
.menu{
	float:left;
	width:150px;
	height:38px;
	text-align:center;
}
.menu a{
	display:block;
	height:30px;
	padding-top:10px;
}
.menu a:link, .menu a:visited{
	background: url(images/fond.jpg) no-repeat;
	color:#9b0000;
 
}
.menu#activ a:link, .menu#activ a:visited{
	background: url(images/fondsel.jpg)  no-repeat;
	color:#E3D393;
}
.menu a:hover, .menu a:active, .menu a:focus{
	background: url(images/fondover.jpg)  no-repeat;
	color:#9b0000;
}
.menu#activ a:hover, .menu#activ a:active, .menu#activ a:focus{
	background: url(images/fondsel.jpg)  no-repeat;
	color:#E3D393;
}
 
div#margegauche{
float:left;
width:14.3%;
height:100%;
 
}
 
 
div#margedroite{
float:right;
width:10%;
 
background-color:#E3D393;
}
 
 
 
.texteprincipal {
	font-family: "Trebuchet MS, Geneva, Arial, Helvetica, SunSans-Regular, sans-serif";
	font-size: 20px;
	font-style: italic;
	line-height : 140%;
 
	color: #9b0000;
}
 
.textesecondaire {
	font-family: "Trebuchet MS, Geneva, Arial, Helvetica, SunSans-Regular, sans-serif";
	font-size: 18px;
	line-height : 140%;
	color: #9b0000;
	font-style: italic;
}
 
.textepetit {
	font-family: "Trebuchet MS, Geneva, Arial, Helvetica, SunSans-Regular, sans-serif";
	font-size: 16px;
	color: #6E6E6E;
}
 
.avecmargeg
{
margin-left:15%;
height:100%;
float:left;
display:block;
}
 
a { color: #6e6e6e; text-decoration: none; background-repeat: no-repeat }
a:hover { color: #9b0000; text-decoration: none; background-repeat: no-repeat }
 
.imagegauche
{
float : left;
margin-right:20px;
}

Je ne sais pas si ces éléments suffiront à éclaircir le problème...

Problème à l'impression

HTML

Discussions similaires

Partager

Partager