Decalage tableau vers la droite

Mammouth du PHP | 687 Messages

11 janv. 2011, 18:25

Bonjour à tous,

savez-vous d'ou pourrait provenir le fait que mon tableau contenu dans une page php se décale vers la droit suivant la taille de l'écran...?
Sur mon 22" le tableau est parfaitement centré et lorsque je teste sur un 12" le tableau s'est décalé de quelques pixels sur la droite...

Merci par avance.

Eléphanteau du PHP | 18 Messages

11 janv. 2011, 18:38

peux tu nous donner la css concernant ce tableau et les éléments (divs, etc) le contenant ?
contact[@]camille-hodoul.com
http://camille-hodoul.com/

Mammouth du PHP | 687 Messages

11 janv. 2011, 18:44

voici le css
body {
	font-family: tahoma;
	font-size: 12pt;
	color: #fff;
	background:#000 url(fond.jpg) no-repeat center top;
    padding : 0;
	border : 0 none;
	font-weight:normal;
	width:800px;
	height:650px;
	text-align:center;
}
.formulaire {

	font-family:Tahoma, Geneva, sans-serif;
	font-size:12pt;
	color:#fff;
	margin:50px 0 0 950px;
}
et le tableau
<!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=utf-8" />
<link href="css/styles.css" rel="stylesheet" type="text/css">
<title>TEST</title>
</head>

<body>


<div class="formulaire">
<table>
<tr>
<td> test </td>
</tr>
</table>
</div>

</body>


</html>
Tous les tests sont faits sur le même navigateur (firefox)

Merci

Eléphanteau du PHP | 18 Messages

11 janv. 2011, 19:38

merci,

est-ce que quand tu essaies sur le 12" il y a une scrollbar horizontale ?
contact[@]camille-hodoul.com
http://camille-hodoul.com/

Mammouth du PHP | 687 Messages

11 janv. 2011, 19:41

c'est moi qui te remercie.

Non pas de scrollbar...

Eléphanteau du PHP | 18 Messages

11 janv. 2011, 20:09

Tu devrais essayer ce code :
<!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=utf-8" />
<link href="style.css" rel="stylesheet" type="text/css">
<title>TEST</title>
</head>

<body>


<div class="formulaire">
	<table>
		<tr>
			<td> test </td>
			<td>retest</td>
			<td>reretest</td>
		</tr>
		<tr>
			<td>test2</td>
			<td>retest2</td>
			<td>reretest2</td>
		</tr>
	</table>
</div>

</body>


</html>
body {
	font-family: tahoma;
	font-size: 12pt;
	color: #fff;
	background:#000 url(fond.jpg) no-repeat center top;
    padding : 0;
	border : 0 none;
	font-weight:normal;
	max-width:800px; /* taille maximum, tu peux régler la taille minimum avec min-width */
	width : 50%; /* pour que le body reste centré sans scrollbar quelle que soit la résolution de l'écran */
	height:650px;
	text-align:center;
	border : solid white 1px; /* juste pour distinguer le body */
	margin : auto; /* centrer le body */
}
.formulaire {
	display : inline-block; /* le div pourra être centré proprement avec margin  */
	margin : auto; /* centrer le div */
	font-family:Tahoma, Geneva, sans-serif;
	font-size:12pt;
	color:#fff;
	/* margin:50px 0 0 950px; */
	border : solid green 1px; /* Juste pour distinguer le div */
}
Méfie-toi des largeurs de body (ou même de div) exprimées de manière fixe, par exemple en px, si tu veux pouvoir t'adapter à toutes les résolutions : il y aura bien un moment où une fenêtre de 500*500 ne pourra pas afficher entièrement une div de 800*650 par exemple^^
J'ai commenté les lignes que j'ai rajouté, et j'ai laissé celles que j'ai enlevé en commentaire également.

Je ne sais pas si ça correspond à ce que tu voulais faire, mais ça donne un tableau centré^^ j'ai testé sous SeaMonkey (c'est basé sur Gecko comme firefox donc en thérorie ça rend pareil) et sous Chrome.
Attention par contre à "display : inline-block;", il me semble que c'est pas géré par IE6 si jamais tu veux le porter dessus (mais chuis pas sûr pour le coup).
contact[@]camille-hodoul.com
http://camille-hodoul.com/

Mammouth du PHP | 687 Messages

11 janv. 2011, 20:27

Merci!
c'est très propre!
En revanche dès que je change "margin : 50px 0 0 654px;" dans .formulaire { }
le décalage revient... :(

Eléphanteau du PHP | 18 Messages

11 janv. 2011, 20:44

pourquoi utilises-tu "margin : 50px 0 0 654px;" ?
tu veux centrer verticalement ?
contact[@]camille-hodoul.com
http://camille-hodoul.com/

Mammouth du PHP | 687 Messages

11 janv. 2011, 20:49

non en fait mon fond est tout noir avec un cadre blanc au centre, et à l'intérieur je voudrais y insérer un formulaire de contact, sur l'écran 22" pas de problème pour le margin mais sur le 12" c'est décalé sur la droite, du coup mon cadre de fond est rogné par le formulaire...

Eléphanteau du PHP | 18 Messages

11 janv. 2011, 21:47

S'il y a décalage c'est à mon avis la faute au margin : 50px 0 0 654px; , qui n'est pas très propre^^
Si tu veux centrer ton cadre blanc normalement le margin : auto; (suivi de margin-top : 50px; pour régler l'écart avec le haut si tu veux) suffit.

Si ça ne convient pas, j'aurai besoin d'une idée plus précise de ce que tu veux faire avec ton formulaire : tu veux le mettre dans le tableau dont on parlait plus haut ?
Si tu as un début de code pour ton formulaire n'hésite pas à le donner.
contact[@]camille-hodoul.com
http://camille-hodoul.com/

Mammouth du PHP | 687 Messages

11 janv. 2011, 22:17

alors je viens de remplacer le margin : 50px 0 0 654px; par margin-top:50px; et margin-left:654px;
Je ne sais pas trop pourquoi cela fonctionne de cette façon mais ça fonctionne! Merci!!! :D