Page 1 sur 1

Decalage tableau vers la droite

Posté : 11 janv. 2011, 18:25
par orell1
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.

Re: Decalage tableau vers la droite

Posté : 11 janv. 2011, 18:38
par Eartz
peux tu nous donner la css concernant ce tableau et les éléments (divs, etc) le contenant ?

Re: Decalage tableau vers la droite

Posté : 11 janv. 2011, 18:44
par orell1
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

Re: Decalage tableau vers la droite

Posté : 11 janv. 2011, 19:38
par Eartz
merci,

est-ce que quand tu essaies sur le 12" il y a une scrollbar horizontale ?

Re: Decalage tableau vers la droite

Posté : 11 janv. 2011, 19:41
par orell1
c'est moi qui te remercie.

Non pas de scrollbar...

Re: Decalage tableau vers la droite

Posté : 11 janv. 2011, 20:09
par Eartz
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).

Re: Decalage tableau vers la droite

Posté : 11 janv. 2011, 20:27
par orell1
Merci!
c'est très propre!
En revanche dès que je change "margin : 50px 0 0 654px;" dans .formulaire { }
le décalage revient... :(

Re: Decalage tableau vers la droite

Posté : 11 janv. 2011, 20:44
par Eartz
pourquoi utilises-tu "margin : 50px 0 0 654px;" ?
tu veux centrer verticalement ?

Re: Decalage tableau vers la droite

Posté : 11 janv. 2011, 20:49
par orell1
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...

Re: Decalage tableau vers la droite

Posté : 11 janv. 2011, 21:47
par Eartz
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.

Re: Decalage tableau vers la droite

Posté : 11 janv. 2011, 22:17
par orell1
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