Problème de centrage d'images

SAKAROV_UNO · 28/02/2011, 13h14

Salut, bien, je ne comprend vraiment pas pourquoi mon code ne fonctionne pas.

En fait, je souhaite centrer le tout sur la page, et mettre différents margin-top margin-bottom entre les éléments. Mais je ne comprend pas, avec le code suivant, j'arrive à centrer l'image "logo" et l'image "center", les images centrales ("imagegauche"/"video/"imagedroite") elles sont bien collées les unes aux autres comme il faut mais impossible de centrer le tout, et tout en haut l'image "title" impossible à centrer aussi !

Voici à quoi ça doit ressembler grossièrement :

Et voici le code source que j'ai fait (html/css) :

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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
 
 
<!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">
 
<head>
 
<title>bienvenue sur le site</title>
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 
<meta name="keywords" content="tags, tags, tags, tags"/>
 
 
 
 
 
 
<!-- début du CSS -->
 
<style type="text/css">
 
 
 
 
.title

{
	display: block;
	margin-left: 30%;
	height: 4%;
	border: 0px none;
	margin-top: 2%;
	margin-bottom: 10%;
	width: 30%;
	margin-left: 30%;
}
 
 
 
.logo

{
	width: 8%;
	display: block; 
	border: 0px none;
	margin-top: 3%;
	margin-left: 40%;
}
 
 
 
.enter

{
	width: 6.5%;
	border: 0px none;
	margin-top: 0%;
	margin-bottom: 2%;
	margin-left: 41%;
	text-decoration: blink;
}
 
 
</style>
 
<!-- fin du CSS -->
 
 
 
 
 
 
</head>
 
 
<body bgcolor="black">
 
 
 
 
 
<!-- image title située en haut à centrer -->
 
<p><img src="title.png" alt="title" class="title" height="140" align="middle"></p>
 
 
 
 
 
 
<!-- video d intro et images gauche et droite, le tout a centrer -->
 
 
<table width="766" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr><td height="50%" valign="top">&nbsp;</td></tr>
<tr>
<td width="766" align="center" valign="top">
<table width="766" border="0" cellpadding="0" cellspacing="0">
	<tr>
 
<!-- image gauche -->
 
<td align="center" valign="top"><img src="http://www.monsite.com/picz/imagegauche.jpg" alt="" width="184" height="225" align="middle"></td>
 
 
<!-- video d intro dispo sur le net située entre image gauche et image droite, les trois collés et à centrer -->
 
<td width="400" height="225" align="center" valign="top"><object classid="clsid:D2DB6E-A6D-1cf-968-4445000" codebase="http://download.macromedia.com/pub/video/can/flash/swflash.cab#version=6,0,29,0" width="400" height="225" align="middle" border="0">
            <param name="movie" value="http://www.monsite.com/video.swf">
            <param name="quality" value="high">
			<param name="menu" value="false">
			<param name="SCALE" value="noborder">
            <embed src="http://monsite/video.swf" width="400" height="225" align="middle" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shock-flash" scale="noborder"></embed></object></td>
 
 
 
<!-- image droite -->
 
<td align="center" valign="top"><img src="http://www.monsite.com/picz/imagegauche.jpg" alt="" width="184 height=225" align="middle"></td>
</tr>
</table>
</td>
 </tr>
  <tr><td height="50%" valign="top">&nbsp;</td></tr>
</table>
 
<!-- fin video d intro et images gauche droite le tout a centrer -->
 
 
 
 
 
<!-- image logo sous la video d intro à centrer -->
 
 
<p><img src="logo.png" alt="logo" class="logo"></p> 
 
 
 
 
 
<!-- image enter pour entrer dans le site située sous le logo -->
 
<p><a href="http://www.monsite.com/fluxbb"><img src="enter.png" alt="enter" class="enter" title="entrer dans le site"></a></p>  
 
 
 
 
 
</body> 
 
</html>

Voilà, quelqu'un à une idée pourquoi ça ne veut pas fonctionner ??

Merci.

Sakarov

Msieurduss · 28/02/2011, 14h08

Bonjour,

Je t'invite à utiliser la méthode suivante : tout mettre dans une DIV, à laquelle tu donnes une taille et certaines propriétés pour le centrage, ce qui donne :

En HTML :

Code :

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

1
2
3
4
5
6
7
8
 
<body>
<div id="conteneur">
 
tout ton code...
 
</div>
</body>

Et en CSS :

Code :

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

1
2
3
4
5
6
 
#conteneur {
     width: 900px;
     margin-left: auto;
     margin-right: auto;
}

La width à 900px est un exemple, à toi d'adapter ;-)
(tu peux aussi mettre un %, mais à ce moment là, applique une taille en %age à body de 100%)

Normalement ça devrait fonctionner.

Pour information, tu utilises beaucoup de tableaux pour la mise en page, une méthode aujourd'hui peu recommandée pour tout un tas de raisons, tu trouveras de nombreux liens à ce sujet en cherchant (sur Google ou ailleurs).
Quand on est habitué à la mise en page en tableaux, ça paraît plus difficile au début, mais on gagne beaucoup au final (là aussi, tu trouveras de nombreux articles et commentaires à ce sujet).

Bon courage !

SAKAROV_UNO · 28/02/2011, 15h53

Merci pour ta réponse.

Alors, j'ai fait ce que tu m'as dit, et ai un peu modifié le code. Moi, oui, je veux que des %, jamais de valeurs en px !

Donc, maintenant, sur mes "4 images" mes "4 blocs" diras-t-on, j'en ai 3 sur 4 qui fonctionne ! Il est reste un qui ne veut pas !

L'élément central (l'intro avec les deux images sur les côtés) est tout bien centré.

Le logo est bien centré.

L'image "Entrer" est bien centrée.

L'image qui REFUSE de m'obéir c'est celle du haut ("title").

Je te repasses le nouveau code un peu modifié donc :

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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
 
 
<!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">
 
<head>
 
<title>bienvenue sur le site</title>
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 
<meta name="keywords" content="tags, tags, tags, tags"/>
 
 
 
 
 
 
<!-- début du CSS -->
 
<style type="text/css">
 
 
body
 
{
 
 width: 100%;
 height: 100%;
 
}
 
#conteneur 
 
{
     width: 100%;  // 900px
     margin-left: auto;
     margin-right: auto;
}
 
.title

{
	display: block;
	margin-left: 30%;
	height: 4%;
	border: 0px none;
	margin-top: 2%;
	margin-bottom: 10%;
	width: 30%;
}
 
#intro
 
{
	width: 100%;
	margin-left: 19%;
}
 
.logo

{
	width: 8.7%;
	display: block; 
	border: 0px none;
	margin-top: 3%;
	margin-left: 44.92%;
}
 
 
 
.enter

{
	width: 6.5%;
	border: 0px none;
	margin-top: 0%;
	margin-bottom: 0.5%;
	margin-left: 46.1%;
	text-decoration: blink;
}
 
 
</style>
 
<!-- fin du CSS -->
 
 
 
 
 
 
</head>
 
 
<body bgcolor="black">
 
 
<div id="conteneur">
 
 
<!-- image title située en haut à centrer -->
 
<p><img src="title.png" alt="title" class="title" height="100" align="middle"></p>
 
 
 
 
 
 
<!-- video d intro et images gauche droite le tout a centrer -->
 
<div id="intro">
 
<table width="766" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr><td height="50%" valign="top">&nbsp;</td></tr>
<tr>
<td width="766" align="center" valign="top">
<table width="766" border="0" cellpadding="0" cellspacing="0">
	<tr>
 
<!-- image gauche -->
 
<td align="center" valign="top"><img src="http://www.monsite.com/picz/imagegauche.jpg" alt="" width="184" height="225" align="middle"></td>
 
 
<!-- video d intro dispo sur le net située entre image gauche et image droite, les trois collés et à centrer -->
 
<td width="400" height="225" align="center" valign="top"><object classid="clsid:D2DB6E-A6D-1cf-968-4445000" codebase="http://download.macromedia.com/pub/video/can/flash/swflash.cab#version=6,0,29,0" width="400" height="225" align="middle" border="0">
            <param name="movie" value="http://www.monsite.com/video.swf">
            <param name="quality" value="high">
			<param name="menu" value="false">
			<param name="SCALE" value="noborder">
            <embed src="http://monsite/video.swf" width="400" height="225" align="middle" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shock-flash" scale="noborder"></embed></object></td>
 
 
 
<!-- image droite -->
 
<td align="center" valign="top"><img src="http://www.monsite.com/picz/imagegauche.jpg" alt="" width="184 height=225" align="middle"></td>
</tr>
</table>
</td>
 </tr>
  <tr><td height="50%" valign="top">&nbsp;</td></tr>
</table>
 
</div>
 
<!-- fin video d intro et images gauche droite le tout a centrer -->
 
 
 
 
 
<!-- image logo sous la video d intro à centrer -->
 
 
<p><img src="logo.png" alt="logo" class="logo"></p> 
 
 
 
 
 
<!-- image enter pour entrer dans le site situee sous le logo -->
 
<p><a href="http://www.monsite.com/fluxbb"><img src="enter.png" alt="enter" class="enter" title="entrer dans le site"></a></p>  
 
 
 
</div>
 
</body> 
 
</html>

Je te passe le code modifié, tu penses pouvoir m'aider à régler ce souci ???

Merci.

(PS: pour info, tout le code est de moi, hormis les <table> qui forme le bloc vidéo).

Merci encore !

Sakarov.

EDIT: Je ne comprend pas pourquoi la barre de défilement horizontale (en bas) est active, en effet, il y a du vide à droite quand on la tire.... ?????? Ce doit être à cause de ce maudit titre qui déconne... enfin je n'sais pas.....

Msieurduss · 28/02/2011, 16h38

Hello

D'abord quelques petites remarques :
- on n'utilise pas // pour les commentaires en CSS, il faut les mettre entre /* et */ (sinon ça peut éventuellement être source d'erreur)
- penser à fermer les balises <img>, qui font partie des balises "auto-fermantes" (<img src="#" alt="..." />)

Et pour ton problème :

- si tu veux le centrer vraiment ton titre, pas la peine de lui mettre une margin-left du coup

Essaye ça en html :

Code :

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

1
2
3
4
 
<div class="title">
	<img src="title.png" alt="title" height="100" />
</div>

Et en css :

Code :

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

1
2
3
4
5
6
7
8
9
10
 
.title

{
	height: 4%;
	border: 0px none;
	margin-top: 2%;
	margin-bottom: 10%;
	text-align: center;
}

ornitho13 · 28/02/2011, 16h53

Salut, pour centrer ton image ".title', il faut que tu revois le margin-left :

Code css :

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

1
2
3
4
5
6
7
8
9
 
.title
{
	display: block;
	height: 4%;
	border: 0px none;
	margin:2% auto 10%;
	width: 30%;
}

En mettant en "auto" cela va centrer ton image.

Ensuite concernant ton problème de scrollbar, cela provient de ton div#intro et de ton body du au margin-left, voici ce qu'il faut mettre:

Code css :

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

1
2
3
4
5
6
7
8
 
body
{
 width: 100%;
 height: 100%;
 margin:0;
 padding:0;
}

=> afin d'enlever le margin et le padding du body

Pour ton div#intro, donnes lui la taille de ton tableau (766px) :

Code css :

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

1
2
3
4
5
6
 
#intro
{
	width:766px;
	margin:0px auto;
}

SAKAROV_UNO · 28/02/2011, 19h19

Eh bien, malheureusement, aucun des deux ne fonctionne...

J'ai essayé vos deux méthodes, en commençant par celle d'ornitho13 ; elle n'a pas fonctionné. Le titre est toujours ferré en haut à gauche et la scrollbar toujours présente. Je suis alors passé à la méthode de Msieurduss (tout en gardant l'idée pour le body d'ornitho13).

J'en arrive donc à ce code :

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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
<!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">
 
<head>
 
<title>bienvenue sur le site</title>
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 
<meta name="keywords" content="tags, tags, tags, tags"/>
 
 
 
 
 
 
<!-- début du CSS -->
 
<style type="text/css">
 
body
{
 width: 100%;
 height: 100%;
 margin:0;
 padding:0;
}
 
#conteneur 
 
{
     width: 100%;  // 900px
     margin-left: auto;
     margin-right: auto;
}
 
.title

{
	height: 4%;
	border: 0px none;
	margin-top: 2%;
	margin-bottom: 10%;
	text-align: center;
}
 
#intro
 
{
	width: 100%;
	margin-left: 19%;
}
 
.logo

{
	width: 8.7%;
	display: block; 
	border: 0px none;
	margin-top: 3%;
	margin-left: 44.92%;
}
 
 
 
.enter

{
	width: 6.5%;
	border: 0px none;
	margin-top: 0%;
	margin-bottom: 0.5%;
	margin-left: 46.1%;
	text-decoration: blink;
}
 
 
</style>
 
<!-- fin du CSS -->
 
 
 
 
 
 
</head>
 
 
<body bgcolor="black">
 
 
<div id="conteneur">
 
 
<!-- image title située en haut à centrer -->
 
<div class="title">
	<img src="title.png" alt="title" height="100" />
</div>
 
 
 
 
 
<!-- video d intro et images gauche droite le tout a centrer -->
 
<div id="intro">
 
<table width="766" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr><td height="50%" valign="top">&nbsp;</td></tr>
<tr>
<td width="766" align="center" valign="top">
<table width="766" border="0" cellpadding="0" cellspacing="0">
	<tr>
 
<!-- image gauche -->
 
<td align="center" valign="top"><img src="http://www.monsite.com/picz/imagegauche.jpg" alt="" width="184" height="225" align="middle"></td>
 
 
<!-- video d intro dispo sur le net située entre image gauche et image droite, les trois collés et à centrer -->
 
<td width="400" height="225" align="center" valign="top"><object classid="clsid:D2DB6E-A6D-1cf-968-4445000" codebase="http://download.macromedia.com/pub/video/can/flash/swflash.cab#version=6,0,29,0" width="400" height="225" align="middle" border="0">
            <param name="movie" value="http://www.monsite.com/video.swf">
            <param name="quality" value="high">
			<param name="menu" value="false">
			<param name="SCALE" value="noborder">
            <embed src="http://monsite/video.swf" width="400" height="225" align="middle" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shock-flash" scale="noborder"></embed></object></td>
 
 
 
<!-- image droite -->
 
<td align="center" valign="top"><img src="http://www.monsite.com/picz/imagegauche.jpg" alt="" width="184 height=225" align="middle"></td>
</tr>
</table>
</td>
 </tr>
  <tr><td height="50%" valign="top">&nbsp;</td></tr>
</table>
 
</div>
 
<!-- fin video d intro et images gauche droite le tout a centrer -->
 
 
 
 
 
<!-- image logo sous la video d intro à centrer -->
 
 
<p><img src="logo.png" alt="logo" class="logo"></p> 
 
 
 
 
 
<!-- image enter pour entrer dans le site situee sous le logo -->
 
<p><a href="http://www.monsite.com/fluxbb"><img src="enter.png" alt="enter" class="enter" title="entrer dans le site"></a></p>  
 
 
 
</div>
 
</body> 
 
</html>

Y'a un problème autre part dans le code c'est pas possible... j'ai revérifié 30 fois.... je capte pas là....

ornitho13 · 28/02/2011, 19h53

je viens de tester mon code et ton nouveau code, et les 2 fonctionnent bien (a part pour le tien qui a un problème de scrollbar).
Peux tu nous dire sur quel navigateur testes tu ?

SAKAROV_UNO · 28/02/2011, 21h52

J'utilise Safari, FireFox, Chrome, Opera.

Pour les 4 ça me donne le même résultat...

Je te contacte par MP.

EDIT: je t ai envoyé un MP, mais l'envoi ne m'a pas été confirmé, deux fois... confirme moi si tu l'as reçu ou non stp

merci.

A bientôt.

28/02/2011, 19h53	#7
ornitho13 Rédacteur/Modérateur Jérome Debray Responsable de projet Inscription : mai 2009 Messages : 627 Détails du profil Informations personnelles : Nom : Jérome Debray Âge : 32 Localisation : France Informations professionnelles : Activité : Responsable de projet Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : mai 2009 Messages : 627 Points : 3 064 Points : 3 064	je viens de tester mon code et ton nouveau code, et les 2 fonctionnent bien (a part pour le tien qui a un problème de scrollbar). Peux tu nous dire sur quel navigateur testes tu ?
	00

28/02/2011, 21h52	#8
SAKAROV_UNO Invité de passage yuri sakarov Inscription : février 2011 Messages : 4 Détails du profil Informations personnelles : Nom : yuri sakarov Informations forums : Inscription : février 2011 Messages : 4 Points : 0 Points : 0	J'utilise Safari, FireFox, Chrome, Opera. Pour les 4 ça me donne le même résultat... Je te contacte par MP. EDIT: je t ai envoyé un MP, mais l'envoi ne m'a pas été confirmé, deux fois... confirme moi si tu l'as reçu ou non stp merci. A bientôt.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email