Centrer une image et un texte dans une cellule

**gaya102** · 04/09/2009, 14h37

Bonjour

voila je voudrais que mon image soit centrer dans la cellule

http://www.lemondedegaya.fr/collection2.php

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
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
 
 
.texte2{
    color: #7890d2;
	font-family: Comic Sans MS, Times New Roman, Times, serif;
 
	font-size: 16px;
	text-decoration: none;
	text-indent:30px;
	text-align: center;
	position:relative;
	top: 70px;
	left: 220px;
	width: 739px;
	overflow: auto;
	margin: 0 0 10px 0;
	}
 
body {
	background-color: #f7d8fc;
	font-family:Comic Sans MS, Times New Roman, Times, serif;
	font-style: italic;
}
 
img {
	border:0;
	vertical-align:middle;
}
 
a {
	color: #781d89;
	font-family:Comic Sans MS, Times New Roman, Times, serif;
 
	font-size: 15px;
	text-decoration: none;
	text-align: center;
} 
 
a:hover {
    color: #e365f6;
	font-family:Comic Sans MS, Times New Roman, Times, serif;
 
	font-size: 15px;
	text-decoration: none;
	text-align: center;
}
 
#unite {
	position:absolute;
	left:50%;
	margin-left:-490px;
	width: 980px;
	top:50%;
	margin-top:-271px;
	height: 542px;
	background-image : url("images/fond_page.jpg");
	background-repeat: no-repeat;
	border :2px solid black;
}
 
#titre{
    color: #b04cbf;
	font-family: Comic Sans MS, Times New Roman, Times, serif;
 
	font-size: 36px;
	text-decoration: none;
	text-align: center;
	position:absolute;
	top: 5px;
	left : 205px;
}
 
#texte{
    color: #7890d2;
	font-family: Comic Sans MS, Times New Roman, Times, serif;
 
	font-size: 17px;
	text-decoration: none;
	text-align: right;
	position:absolute;
	top: 65px;
	left: 585px;
 
 
}
 
 
 
#menubas {
	 margin-top: 108px;
	 float:right;
	 padding-right: 5px;
}
 
.texte2
{
font-size: 15px;
 
font-weight: bold;
}
 
a.margetitre{
font-size: 15px;
text-decoration: none ;
font-weight: bold;
}
 
a.margetitre:hover{
font-size: 15px;
text-decoration: none ;
font-weight: bold;
}
 
#titrecontenu {
font-size: 17px;
color: #781d89;
text-align:left;
text-decoration: underline ;
height:10px;
 
}
 
#bandeau {
position: relative;
	width:757px;
	height:25px;
 
	top: 153px;
	left:220px;
color: #7890d2;
text-align:left;
text-decoration: underline ;
font-size: 15px;
 
font-weight: bold;
	}
#menu {
position: relative;
	float:left;
	width:208px;
	height:283px;
	top: 210px;
	left: 5px;
	text-align: center;
	}
#contenu {
position: relative;
	float:left;
	width:757px;
	height:365px;
	top:30px;
	left:12px;
	overflow: auto;
	font-size: 12px;
	font-weight: bold;
	}
 
	td, table{
	vertical-align:top;
	line-height:12px;
	}
 
	.gallerie .image {
  float: left;
  margin-left: 15px;
  margin-bottom: 15px;
   text-align: center;
   color:red; /* ta couleur */;
 
}
 
 
.gallerie .image img {
float: left;
margin-left: 15px;
  margin-bottom: 15px;
   text-align: center;
   color:red; /* ta couleur */;
}
 
 
	.gallerie2 .image {
  float: left;
  margin-left: 100px;
  margin-bottom: 70px;
   text-align: middle;
 
 
}
.format{
  float: left;
  margin-left: 20px;
  margin-bottom: 30px;
  font-weight: bold;
 
}
 
.clear {
  clear: both;
}
 
#bandeau {
position: relative;
}
 
.choix {
color: #7890d2;
text-align:left;
text-decoration: underline ;
font-size: 15px;
 
font-weight: bold;
	}

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>le monde de gaya et ses faire part</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	   <meta name="Description" content="Vos faire-part de naissance, mariage, remerciements, stickers et tableaux personnalisés qui vous correspondent le mieux ... Aide pour vos événements : mariage/pacs, communion, anniversaire ...">
	<meta name="keywords" content="faire, part, parts, faire-parts, faireparts, faire part, fairepart, mariage, deuil, deces, remerciement, union, naissance, fete, bebe, marie, ligne, en-ligne, online, original, artisanal, bapteme, papier, rare, unique, maries, creation, main, qualite, travail, soigne, soin, passion, invite, invitation, jubile, menu, remerciement, livre d'or" /><meta name="Robots" content="All">
<meta name="author" content="Thaon Sandrine">
<meta name="revisit-after" content="5 days">
 
<base href="http://www.lemondedegaya.fr">
		<link rel="stylesheet" href="menu.css" type="text/css" media="screen"/>
	    <link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="page.css" />
		 <!--[if IE]>
      <link rel="stylesheet" type="text/css" href="ie2.css" />
      <![endif]-->
 
</head>
 
   <body>
 
 
       <div id="unite">      
 
<div id="titre">   
 
 Le monde de Gaya
 
 </div>  
 <div id="texte">   
 
 Faire-part de mariage originaux et  personnalisés.   <br>
 
 </div>  
 
           <div id="menubas">
          <?php
include("menu.php");
?> 
 
           </div>
           <div>
 
 
 
 
 
 
 
					<div id="bandeau">La collection faire-part mariage</div>
	<div id="menu">
	<br><br>
	<a href="collection.php"class="margetitre">La collection</a><br><br>
	<a href="format.php"class="margetitre">Les formats</a><br><br>
	<a href="papiers.php"class="margetitre">Les papiers</a><br><br>
	<a href="textes.php" class="margetitre">Idées de textes</a><br><br>
	<a href="conditions.php" class="margetitre">Conditions de ventes</a>
 
 
	</div>
	<div id="contenu">
 
	<div class="gallerie">
 
 
				<div id="contenu" align="center">
					<table border="0" width="700">
							<tr>
 
							<td align="center" style="vertical-align: middle" height="108"><a href="faire-part-cygne.htm"><img border="0" src="images/comme_site_devant_petite.jpg" width="120" height="100"></a><br>
							<a href="faire-part-cygne.htm">La branche</a><br>
							A partir de 1.95 euros
							<br>
&nbsp;</td>
							<td align="center" style="vertical-align: middle" height="108"><a href="faire-part-photos-sepia.htm"><img border="0" src="images/comme_site_devant_petite.jpg" width="120" height="100"></a><br><a href="faire-part-photos-sepia.htm">La branche</a><br>
							A partir de 1.95 euros<br>
&nbsp;</td>
 
							<td align="center" height="108"><a href="faire-part-coeur-argent.htm"><img border="0" src="images/comme_site_devant_petite.jpg" width="120" height="100"></a><br>
							<a href="faire-part-coeur-argent.htm">La branche</a><br>
							A partir de 1.95 euros<br>
&nbsp;</td>
 
							<td align="center" style="vertical-align: middle" height="108"><a href="faire-part-cygne.htm"><img border="0" src="images/comme_site_devant_petite.jpg" width="120" height="100"></a><br>
							<a href="faire-part-cygne.htm">La branche</a>s<br>
							A partir de 1.95 euros
							<br>
&nbsp;</td>
							</tr>
 
 
 
	<div class="clear"></div>
 
	</div>
 
 
 
 
			</div>		
 
 
 
       </div>        
   </body>
</html>

merci d'avance

**Macmillenium** · 04/09/2009, 15h47

Bonjour,

Sans vouloir te décourager, je remarque une méconnaissance de plusieurs bases CSS ...
Je t'invite à jeter un coup d'œil sur ce tuto, il te sera sans doute utile si tu comptes revoir ton code.

Pour ton problème, un height:100% sur le tableau produit le comportement souhaité.

**gaya102** · 04/09/2009, 15h52

justement c'est de la que je suis parti, de se tut

je dois le mettre ou se 100%

**Macmillenium** · 04/09/2009, 16h07

Code :

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

1
2
 
<table width="700" height="100%" border="0">

**gaya102** · 04/09/2009, 16h20

ca marche pas c'est pire même

http://www.lemondedegaya.fr/collection2.php

**Macmillenium** · 04/09/2009, 16h27

Quand tu dis :

comment centrer une image et un texte dans une cellule

Je pense directement au centrage verticale, alors pourrais tu faire un effort et détailler ta demande STP ?

**gaya102** · 04/09/2009, 16h30

voila mon but est de faire la même chose que ca

http://www.fairepartpourmariage.com/...t-mariage.html

tu vois tu as une image et son texte juste en dessous

Tu vois se que je veux dire

**Macmillenium** · 04/09/2009, 16h36

Envoyé par gaya102

Tu vois se que je veux dire

Oui je vois

Enlève le display:block; sur IMG (menu.css ligne 5

) et le height="100" sur le tableau si tu veux.

**gaya102** · 04/09/2009, 16h41

je me sens stupide mais j'ai ca ligne 5

" font-family: Comic Sans MS, Times New Roman, Times, serif;"

et je ne trouve pas le "display:block;"

désolé

**Macmillenium** · 04/09/2009, 16h46

http://www.lemondedegaya.fr/menu.css

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
/**********************************************************
				STYLES GENERAUX
**********************************************************/
 
img { 
	border: 0; 
	display: block; 
}
 
#logo { 
	float: left;
}

**gaya102** · 04/09/2009, 16h50

j'avais pas regarder dans se css la lol

bon ca marche lol mais j'ai une image avec un texte qui se promenne tout seul

**Macmillenium** · 04/09/2009, 16h52

Parce que tu n'as pas de vertical-align:middle; comme les autres cellules.

**gaya102** · 04/09/2009, 16h59

merci c'est exactement ce que je voulais

maintenant faut que je trouve le moyen d'enlever le scrolling qui est en bas.

Par contre je ne comprend pas pourquoi mon titre collection faire part mariage est sur 2 lignes

**Macmillenium** · 04/09/2009, 17h05

Ouvre des nouvelles discussions pour les autres problèmes STP.

**gaya102** · 04/09/2009, 17h09

merci de ton aide en tout cas

Centrer une image et un texte dans une cellule

Centrer un élément en CSS

Discussions similaires

Partager

Partager