[HTML] Centrer mon image dans ma table

Version imprimable

Bonjour,

j'ai essayé des top:50% et des valign:middle mais j'arrive toujours pas a centrer mon image, voici le code :

HTLM :

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
<html>
<head>
<link rel="stylesheet" type="text/css" href="./style.css" media="all" />
<script language="javascript"src="./bouge_map.js"></script>
</head>
 
<body onLoad=cacher();>
 
      <div align="center">
 
                     	<div id="map" style="border:3px solid #000000;overflow:hidden">
 
                             <table width="100%" border="0px">
                             <a id="armoire1" href="../robots/alsace_strasbourg.htm" target="droite"></a>
                             <img src="./image.jpg" alt="carte"/>
							</table>
 
                		</div>
 
             <tr>
                 <td><div id="div_gauche" onmouseover="active('G')" onmouseout="desactive()"</div></td>
                 <td align="right"><div id="div_droit" onmouseover="active('D')" onmouseout="desactive()"></div></td>
             </tr>
     </div>
 
 
</body>
</html>

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
div#map {	
	background-image:  url(./bg.gif);
    height: 100%;
    width: 400px;     
}
 
div#div_gauche {
	background-image:  url(./fleche_g.gif);
    left: 0px;    
}
 
div#div_droit {
	background-image:  url(./fleche_d.gif);
    right: 0px;    
}
 
#div_droit, #div_gauche {
	background-repeat: no-repeat;
    position: absolute;    
    height: 52px;
    width:52px;
    top: 50%;
}
 
#armoire1 {
	background-image:  url(./armoire.gif);
    left: 69px;
    top: 197px;
    background-repeat: no-repeat;
    position: relative;
    display: block;
    height: 23px;
    width: 23px;
}

Ce qui donne :
http://img132.imageshack.us/img132/7...turemm3.th.gif

Auriez vous une solution?

28/07/2006, 19h55
Nesmontou

Salut, une balise img directement dans une balise table, ça n'est pas très correct tout ça :koi:

Regarde sur le site du W3C pour voir comment il faut faire

cest vrai, de toute façon ça change rien, ce qui donnerais :

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
<html>
<head>
<link rel="stylesheet" type="text/css" href="./style.css" media="all" />
<script language="javascript"src="./bouge_map.js"></script>
</head>
 
<body onLoad=cacher();>
 
      <div align="center">
 
                     	<div id="map" style="border:3px solid #000000;overflow:hidden">
 
 
 
                             <a id="armoire1" href="../robots/alsace_strasbourg.htm" target="droite"></a>
                             <img src="./image.jpg" alt="carte"/>
 
 
 
                		</div>
 
             <tr>
                 <td><div id="div_gauche" onmouseover="active('G')" onmouseout="desactive()"</div></td>
                 <td align="right"><div id="div_droit" onmouseover="active('D')" onmouseout="desactive()"></div></td>
             </tr>
     </div>
 
 
</body>
</html>

mais ça change pas mon probleme :s

bon bah en grudeant un peu jy arrive :

html:

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
<html>
<head>
<link rel="stylesheet" type="text/css" href="./style.css" media="all" />
<script language="javascript"src="./bouge_map.js"></script>
</head>
 
<body onLoad=cacher();>
 
 
                     	<div id="map" style="border:3px solid #000000;overflow:hidden">             
 
                             <a id="armoire1" href="../robots/alsace_strasbourg.htm" target="droite"></a>
 
                             <img src="./image.jpg" alt="carte"/> <br/><br/>
 
                		</div>
 
             <tr>
                 <td><div id="div_gauche" onmouseover="active('G')" onmouseout="desactive()"</div></td>
                 <td align="right"><div id="div_droit" onmouseover="active('D')" onmouseout="desactive()"></div></td>
             </tr>
     </div>
 
 
</body>
</html>

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
div#map {	
	background-image:  url(./bg.gif);
    top:15%; 
    height: auto;
    width: 400px; 
    position: absolute; 
    left:30%;      
}
 
div#div_gauche {
	background-image:  url(./fleche_g.gif);
    left: 0px;    
}
 
div#div_droit {
	background-image:  url(./fleche_d.gif);
    right: 0px;    
}
 
#div_droit, #div_gauche {
	background-repeat: no-repeat;
    position: absolute;    
    height: 52px;
    width:52px;
    top: 50%;
}
 
#armoire1 {
	background-image:  url(./armoire.gif);
    left: 69px;
    top: 197px;
    background-repeat: no-repeat;
    position: relative;
    display: block;
    height: 23px;
    width: 23px;
}