Tableau récalcitrant au centrage vertical

Version imprimable

Bonjour

La méthode de centrage vertical que j'utilise d'habitude ne fonctionne pas sur mon nouveau site. J'ai cherché, farfouillé, mais pas trouvé où est le problème.:cry:
NB : chaque page est constituée d'un tableau alors qu'avant, je mettais juste une image de fond avec des balises dessus.

Voici la totalité du code de la 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
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Document sans nom</title>
<style type="text/css">
<!--
body {background-color: #000000;
	background-repeat: no-repeat;}
#container{width:900px;
        height:630px;
        top:50%;
        left:50%;
        position:absolute;
		margin-top:-315px;
        margin-left:-450px;
}
.Style8 {font-size: 17px;
	color: #555555;
	font-family: Arial, Helvetica, sans-serif;
	font-style: normal;
	font-weight: bold;}
a:link {color: #555555;
	text-decoration: none;}
a:visited {text-decoration: none;
	color: #555555;}
a:hover {text-decoration: none;
	color: #AA0000;}
a:active {text-decoration: none;
	color: #AA0000;}
-->
</style>
</head>
<body bgcolor="#FFFFFF">
<table width="900" height="630" border="0" align="center" cellpadding="0" cellspacing="0" background="FondAccueil.jpg">
  <tr>
    <td width="419" height="458" align="left" valign="top"><div align="justify"></div>
    <div align="center"></div></td>
    <td width="63">&nbsp;</td>
    <td width="418" align="center" valign="middle">&nbsp;</td>
  </tr>
  <tr>
    <td align="right" valign="top"><span class="Style8"><a href="Untitled-2.html">fran&ccedil;ais</a></span></td>
    <td>&nbsp;</td>
    <td align="left" valign="top"><span class="Style8">english</span></td>
  </tr>
</table>
</body>
</html>

Une idée pour résoudre le problème et décoller la page du haut de l'écran de façon simple ? (moi pas forte...du tout!):roll:

01/08/2008, 15h11
Erwan31

Bonjour,
pourquoi n'utilises tu pas un simple div au lieu d'une table?
Le but premier des tableaux est de présenter des données tabulaires.
Ensuite la règle de centrage s'applique a #container qui est absent de ta structure.
01/08/2008, 15h26
epona1

D'accord. Pas de "container" donc ça ne peut pas marcher. Je supprime cette partie du code.

Je suis en train de tout refaire avec tableau. Je ne peux pas changer. J'avoue ne savoir qu'est "div".
N'y-a-t-il pas quelque chose de simple à faire pour centrer ce :furieux: tableau en hauteur à l'écran ?
01/08/2008, 16h25
Erwan31

Les div sont des divisions qui servent à diviser ta page en plusieurs blocs distincts et manipulables...
La mise en page via des tableaux est maintenant dépassée, si tu débutes ce qui semble être le cas, je te conseil de te mettre aux DIV/CSS.

La technique du centrage via position:absolute / marges négatives fonctionne à condition que tu indiques une hauteur à ton bloc.
01/08/2008, 16h59
epona1

Pardon de me répéter, je garde mon tableau et JE VOUDRAIS SAVOIR COMMENT LE CENTRER EN HAUTEUR DANS MA PAGE.

Merci d'avance
;)

Tu avais trouvé la solution il me semble (container)

Code:

1
2
3
4
5
6
table {
        position:absolute;
        top:50%;
	margin-top:-315px;
        height:630px;
}

01/08/2008, 17h29
epona1

En remplaçant "container" par "table", je fais juste chahuter les tableaux intérieurs de ma page, sans qu'elle décolle du haut...:(

Une autre idée ???

Bonjour,

Effectivement il manque la balise <DIV> qui servira de contenair au tableau.
Il suffit juste d'ajouter <div id="contenair"> avant <table .... >
et </div> aprés </table>

Exemple:
les elements ajoutés sont soulignés

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
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Document sans nom</title>
<style type="text/css">
<!--
body {background-color: #000000;
	background-repeat: no-repeat;}
#container{width:900px;
        height:630px;
        top:50%;
        left:50%;
        position:absolute;
		margin-top:-315px;
        margin-left:-450px;
}
.Style8 {font-size: 17px;
	color: #555555;
	font-family: Arial, Helvetica, sans-serif;
	font-style: normal;
	font-weight: bold;}
a:link {color: #555555;
	text-decoration: none;}
a:visited {text-decoration: none;
	color: #555555;}
a:hover {text-decoration: none;
	color: #AA0000;}
a:active {text-decoration: none;
	color: #AA0000;}
-->
</style>
</head>
<body bgcolor="#FFFFFF">
<div id="container">
<table width="900" height="630" border="0" align="center" cellpadding="0" cellspacing="0" background="FondAccueil.jpg" bgcolor="#009900">
  <tr>
    <td width="419" height="458" align="left" valign="top" bgcolor="#009900">
    	<div align="justify"></div>
    <div align="center"></div></td>
    <td width="63" bgcolor="#009900">&nbsp;</td>
    <td width="418" align="center" valign="middle" bgcolor="#009900">&nbsp;</td>
  </tr>
  <tr>
    <td align="right" valign="top"><span class="Style8"><a href="Untitled-2.html">fran&ccedil;ais</a></span></td>
    <td>&nbsp;</td>
    <td align="left" valign="top"><span class="Style8">english</span></td>
  </tr>
</table></div>
</body>
</html>

PS: J'ai coloré le tableau en vert pour mettre en evidence le centrage verticale (noire sur noire c'est moins evident...)

A+... Thierry

01/08/2008, 20h58
epona1

TOP DE CHEZ BIG TOP !!!

Impeccable. Merci mille fois !

:king: