Fixer la taille d'une page HTML

**gdawirs** · 03/10/2008, 10h21

Bonjour à tous!

J'ai écrit une petite page web avec une image de fond, et récupéré du code javascript qui affiche une horloge sur plusieurs fuseaux horaires.
L'image est rafraichie toute les minutes grâce au "body onload" qui change le document.body.background.

Mon problème est le suivant: l'image générée que j'utilise à une résolution fixe (ici 1920x1200) qui ne m'arrange pas.
Je voudrais que ma page web fasse (par exemple) 1024x768, et que l'image de 1920x1200 soit "stretchée" à la taille que je souhaite.

J'ai tenté de fixer la taille du body: sans succès.
J'ai voulu emballer ma page dans un <div> de taille fixe, mais je ne sais pas forcer le rafraichissement d'un <div background> toutes les minutes.

Pouvez-vous m'aider s'il vous plaît? Je vous joind un fichier zip avec ma page et une image d'exemple (sachant que la "vraie" image est en faite remplacée chaque minute).

Merci!

**blueice** · 05/10/2008, 14h46

Suffit de fixer la div en lui donnant une taille et de donner une taille fixe à tes images

Code html :

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

<img src="image.jpeg" width="1024" height="768" alt="" />

Et si tu veux redimensionner la fenêtre ce sera avec du javascript..

**gdawirs** · 06/10/2008, 07h49

passer des paramètres à un img src ne marche pas dans mon cas, puisque l'image est référencée via un body background...

**blueice** · 06/10/2008, 08h21

Dans ce cas tu fixes le body...
Et tu redimensionnes la fenêtre avec du JS.

**gdawirs** · 06/10/2008, 08h45

Merci blueice,

Peux-tu me dire comment je peux fixer la taille du body?

**romain_ci** · 06/10/2008, 09h43

Avec les proprietes width et height comme indiqué plus haut
Up !!!

**blueice** · 06/10/2008, 11h22

Code html :

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Untitled</title>
	<style type="text/css" title="text/css">
/* <![CDATA[ */
* { margin:0; padding:0; }
#container { width:1024px; height:768px; background-color:green;}
/* ]]> */
</style>
<script>
// <![CDATA[
function retaille ()
{
parent.window.resizeTo(1024,768);
parent.window.moveTo(0, 0);
}
// ]]>
</script>
</head>
<body onload = "retaille()">
<div id="container">
 
</div>
</body>
</html>

**gdawirs** · 06/10/2008, 11h58

Je suis désolé, mais cela ne focntionne pas.
J'ai bien un div général de la bonne dimension, la fenêtre est resizée à la bonne taille, mais mon image est changée via le document.body.background, qui est recouvert par le div "container".

J'ai tenté de changer ma page pour mettre le background au div, mais cla ne marche pas. U a-t-il moyen de mettre le div en "dessous" du body?

**blueice** · 06/10/2008, 13h02

Ce que j'ai donné est un exemple, tu dois placer ton image dans la div...

**glisda** · 23/12/2011, 15h17

Bonjour, voici mon premier post sur ce forum plein de bonnes astuces et de soluces en tout genre.
Je déterre ce topic qui sommeille depuis près de 3 ans, car mon problème bien que différent à des points communs avec celui-ci, et si je suis arrivé là pour trouver la réponse à mon problème, peut-être que d'autres feront la même chose?

Donc, mon souci est le suivant, j'ai une newsletter en html, elle est fonctionnelle, et tout va pour le mieux (par mail).
Par contre, la destinant également à ma page Facebook, cette page ne doit pas dépasser les 520 px de largeur. Or sur Facebook, elle est tronquée, et je ne parviens pas à modifier sa taille.
Je vous joint le code ci-dessous, si quelqu'un avait a gentillesse de m'expliquer comment modifier le script pour qu'il s'affiche entièrement dans l'étroite fenêtre allouée par facebook...
Ca serait super génial!

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
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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Newsletter Oxhwave</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body marginheight="0" marginwidth="0" topmargin="0" leftmargin="0" bgcolor="#f2f2f2">
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#f2f2f2">
	<tr>
		<td valign="top" align="center">
			<table width="551" border="0" cellspacing="0" cellpadding="0">
				<tr>
					<td align="left" style="padding:10px 0 10px 10px; font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#888888;">
						Images not displaying properly? Add <a href="mailto:ch.ruelle@yahoo.fr" style="color:#545454;">ch.ruelle@yahoo.fr</a> to your address book now<br>
						or <a href="[SHOWEMAIL]" style="color:#545454;">view the online version here</a>.
					</td>
				</tr>
				<tr>
					<td align="left" bgcolor="#ffffff" style="border:1px solid #9c9c9c; padding:5px;">
						<div style="border:7px solid #424242;">
							<table width="525" border="0" cellspacing="0" cellpadding="0">
								<tr>
									<td style="padding:25px 20px 20px 20px;">
										<table width="485" border="0" cellspacing="0" cellpadding="0">
											<tr>
												<td><img src="http://dl.dropbox.com/u/5497711/ban.jpg" alt="OXHWAVE.COM" width="500" height="120"></td>
												<td align="right" valign="middle" style="font-family:Arial, Helvetica, sans-serif; font-size:18px; color:082c4b;">Le 22 12 2011</td>
											</tr>
										</table>
									</td>
								</tr>
								<tr>
									<td>
										<div style="border-bottom:1px solid #d6d6d6; border-top:1px solid #d6d6d6; padding-bottom:3px; padding-top:3px;">
											<div style="background-color:#424242;">
												<table height="39" border="0" cellspacing="0" cellpadding="0">
													<tr>
														<td style="border-right:1px solid #797979; padding:0 20px 0 20px; font-family:Arial, Helvetica, sans-serif; font-size:11px;"><a href="http://www.oxhwave.com/bienvenue/contact.html" style="color:#e4e4e4;">Je m'abonne</a></td>
														<td style="border-right:1px solid #797979; padding:0 20px 0 20px; font-family:Arial, Helvetica, sans-serif; font-size:11px;"><a href="http://www.oxhwave.com/bienvenue/contact.html" style="color:#e4e4e4;">Je me désabonne</a></td>
														<td style="border-right:1px solid #797979; padding:0 20px 0 20px; font-family:Arial, Helvetica, sans-serif; font-size:11px;"><a href="[FORWARD]" style="color:#e4e4e4;">envoyer à un ami</a></td>
														<td>&nbsp;</td>
													</tr>
												</table>
											</div>
										</div>
									</td>
								</tr>
								<tr>
									<td>
										<table width="585" border="0" cellspacing="0" cellpadding="0">
											<tr>
												<td style="border-bottom:1px solid #d6d6d6; padding-bottom:3px;">
													<table width="585" border="0" cellspacing="0" cellpadding="0">
														<tr>
															<td style="padding:1px 1px 0 1px;" valign="top"><img src="http://dl.dropbox.com/u/5497711/pixnews.jpg" width="335" height="269" alt=""></td>
															<td width="188" style="font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#666666; padding:20px 20px 0 20px; line-height:17px;" valign="top" bgcolor="#f6f6f6">
																<p style="font-size:13px; margin:0 0 8px 0; color:082c4b;"><b>Bienvenue sur la première Newsletter de Oxhwave</b></p>
																<p style="margin:0 0 20px 0;">
																	 Susciter les bonnes cohésions, le partage et la coopération...
Pour que les salariés soient fiers de porter et valoriser les couleurs de l’entreprise.
 
Parce que vous dirigeant, vous avez un MESSAGE à faire passer 
Découvrez le challenge Oxhwave....
 
																</p>
															</td>
														</tr>
													</table>
												</td>
											</tr>
											<tr>
												<td style="font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#333333; padding:20px; line-height:20px;">
													<p style="margin:0 0 10px 0; font-size:18px; color:#0165ab;"><a href="http://www.oxhwave.com" style="color:#0165ab;">Le challenge à vos couleurs...</a></p>
													<p style="margin:0 0 15px 0;">
													Donnez la possibilité à vos salariés de s’exprimer en équipe !
Créez une nouvelle dynamique pour votre entreprise.
 Une nouvelle façon de motiver vos collaborateurs !
 
Intégrez le premier championnat du genre 
et inscrivez-vos équipes dans un programme de team building différent! 
														Oxhwave, ce sont des programmes adaptés pour tous et pour répondre à tous les objectifs !
 
 
Le Championnat, c'est la référence, l'assurance et la fierté pour les salariés de faire partie d'une équipe 
au sein du groupe ou de l'entreprise !
 
 Le déroulement s'effectue en journée (ou 1/2 journée) et en équipe de 4 (2 hommes, 2 femmes).
 
Chacune des équipes passent sur un plateau constitué de 6 épreuves. 
Les points sont alors capitalisés pour définir les vraies forces et la  valeur de l'équipe.
 
Les meilleures équipes pourront porter les couleurs et représenter l'entreprise 
et l'ensemble des salariés dans le championnat inter-entreprises !
 
 
Suscitez un nouvel intérêt, 
le plaisir et la fierté pour votre entreprise.
													</p>
												</td>
											</tr>
										</table>
 
									</td>
								</tr>
								<tr>
									<td style="border-top:1px solid #d6d6d6; background-color:#f6f6f6; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#666666; line-height:17px;  padding:15px 0 15px 20px;">
										<b>Oxhwave, le coaching urbain...</b><br>
										adresse et tél<br>
										<a href="mailto:cr.ruelle@yahoo.fr" style="color:#4089bb;">contact (par mail)</a><br>
										<a href="http://www.oxhwave.com" style="color:#4089bb;">oxhwave.com</a>
									</td>
								</tr>
							</table>
 
						</div>
					</td>
				</tr>
				<tr>
					<td align="left" style="padding:20px 0 10px 10px; font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#888888;">
						<br>
						Si vous ne souhaitez plus recevoir notre newsletter<a href="[UNSUBSCRIBE]" style="color:#545454;"> desinscrivez-vous</a>.
					</td>
				</tr>
			</table>
		</td>
	</tr>
</table>
 
</body>
</html>

Je ne sais pas si je dois modifier dans body ou si c'est une ligne bien spécifique à ajouter... (je pensais à la valeur 551 dans Body----> table---- Height 551, mais ça ne change rien!
Comme je ne suis pas l'auteur du script, je ne veux pas commencer à modifier toutes les valeurs et faire un truc au rendu effroyable, parce ça par contre j'y parviens très bien tout seul!!

Merci d'avance aux valeureux codeurs qui sauront m'expliquer cette lacune afin que dans mes prochains scrpts je puisse par moi-même faire cette modification comme un grand!
Joyeux Noël à tous et à toutes.
Steve.

Fixer la taille d'une page HTML

HTML

Discussions similaires

Partager

Partager