Images dans mon site qui deforment tout

Bonjour,
je suis occupé de développer un jeu php mais en voulant maintenant développer l'apparence du site je coince.

Mais par exemple dans mon forum (que j'ai fait moi meme et avec du bbcode) quand on poste une image et qu'elle depasse la largeur de la cellule ou se trouve le contenu de la page cela s'elargit et deforme tout notamment le header ce que je ne veux pas. Est-il possible d'eviter que cela ne s'elargisse avec un scrollbar par exmple. J'ai essaye avec un overflow: scroll; mais ca ne change rien.

L'adresse si vous voulez voir:
http://tunedup.redby.info

Mes codes:

Ma page:

Code:

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
<? 
session_start();
include 'connect.php';
include 'bbcode.php';
?>
 
<head>
<title>.:: Tuned Up::.</title>
<META NAME="description" CONTENT="Tuned Up is a free and online textbased tuning game.">
<META NAME="keywords" CONTENT="tuning,tuned,up,warren,dumortier,Tuned Up,tuning,cool,race,rzcing,mmorpg,rpg,free,online,textbased,street x,drift,drag,need for speed,speed">
<META NAME="dc.keywords" CONTENT="tuning,tuned,up,warren,dumortier,Tuned Up,tuning,cool,race,rzcing,mmorpg,rpg,free,online,textbased,street x,drift,drag,need for speed,speed">
<META NAME="abstract" CONTENT="Tuned Up is a free and online textbased tuning game. Tune your car to become the best Street Racer.">
<META NAME="subject" CONTENT="Tuned Up is a free and online textbased tuning game.">
<META NAME="author" CONTENT="Warren Dumortier">
<META NAME="copyright" CONTENT="Tuned Up">
<META NAME="revisit-after" CONTENT="3 days">
<META NAME="identifier-url" CONTENT="http://tunedup.redby.info">
<META NAME="reply-to" CONTENT="warrendumortier@hotmail.com">
<META NAME="publisher" CONTENT="Warren Dumortier">
<META NAME="date-creation-ddmmyyyy" CONTENT="28062006">
<META NAME="Robots" CONTENT="all">
<META NAME="Rating" CONTENT="General">
<META http-equiv="VW96.OBJECT TYPE" CONTENT="Document">
<META NAME="Category" CONTENT="Document">
<META NAME="Page-topic" CONTENT="Document">
<META NAME="Generator" CONTENT="Notepad++">
<META NAME="organization" CONTENT="Warren Dumortier">
<META NAME="contact" CONTENT="warrendumortier@hotmail.com">
<META NAME="contactStreetAddress1" CONTENT="Numéro, rue, bâtiment">
<META NAME="Classification" CONTENT="tuning,tuned,up,textbased,mmorpg">
<META http-equiv="Content-Language" CONTENT="eng">
<META http-equiv="Content-type" CONTENT="text/html;charset=iso-8859-1">
<META NAME="location" CONTENT="France, FRANCE">
<META NAME="expires" CONTENT="never">
<META NAME="date-revision-ddmmyyyy" CONTENT="28062006">
<META NAME="Distribution" CONTENT="Global">
<META NAME="Audience" CONTENT="General">
<META http-equiv="Content-Script-Type" CONTENT="text/javascript">
<META http-equiv="Content-Style-Type" CONTENT="text/ccs">
<link rel=stylesheet href="style.css">
</head>
 
<body>
<table id="maintable" align="center">
 
<tr>
<td id="head" colspan="3">
&nbsp;
</td>
</tr>
 
<tr>
<td id="news" colspan="2">
&nbsp;
</td>
</tr>
 
<tr>
 
<td id="menu" valign="top">
<? include 'menu.php'; ?>
</td>
 
<td id="page" valign="top">
blablabla</td>
 
</tr>
 
<tr>
<td id="foot" valign="center" colspan="2">
Created by <a href="mailto:warrendumortier@hotmail.com">Warren</a> Dumortier &copy;Tuned Up 2006&copy;
</td>
</tr>
 
<? exit(); ?>
 
</table>
</body>

Mon CSS:

Code:

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
<!--
body {
background-color: #426B94;
color: #FFFFFF;
}
 
a {
text-decoration: none;
color: #FFFFFF;
}
 
a:hover {
text-decoration: underline;
color: #FFFFFF;
}
 
#maintable {
width: 900px;
}
 
#head {
background: url("images/header.png");
width: 900px;
height: 100px;
border: 1px solid white;
}
 
#menu {
width: 120px;
border: 1px solid white;
height: 700px;
}
 
#news {
background: url("images/news.png");
width: 900px;
height: 40px;
border: 1px solid white;
}
 
#page {
width: 780px;
border: 1px solid white;
height: 700px;
padding: 5px;
}
 
#foot {
width: 900px;
height: 40px;
border: 1px solid white;
text-align: center;
}
-->

Merci

il faut que tu ecrives un code javascript qui redimensionne l'image quand elle est trop grande, j'ai un pote qui l'avait fait pour sa galerie photo, je lui demande ca dès que je le revois et je te poste ca ;) en attendant tu peux te renseigner sur les redimensionnement javascript

Merci ce serait sympa

à insérer dans la balise img :
Code:

1 2 onload="javascript:if(this.width>800) this.width=800;
avec ceci, si la largeur de l'image dépasse 800px ca la redimension à 800px, bien sûr tu peux régler, et aussi appliquer la hauteur de l'image.

:resolu: ?

sinon, dans ton css :
Code:

1 2 3 4 5 img { width:800px; heignt:500px; }
ceci dit, le mieux serait de redimensionner les images lorsque tu les upload sur le site => voir dans la rubrique php, sur le traitement des images, ça te permettrait de redimensionner proportionnellement, détail important !-)
en plus, ça te permettra de réduire la taille des grandes images (effet notable sur la taille occupée par le forum, et la vitesse d'affichage des pages).