Page 1 sur 1

Table BackGround IE vs FF

Posté : 26 janv. 2006, 18:38
par Ic3Cub3
Hello a tous,
Et oui, me revoila avec un ennui de plus, désolé :lol:
Je m'explique :
J'ai denouveau un affichage different dans IE et dans FF avec une table.
Mais je ne sais pas d'ou cela vient.
Voici le HTML:
<html>
<title>Seb - Contact Page - Copyright &copy; 2006</title>
<head>
</head>
<!-- Début -->
<style TYPE="text/css">
body{
background-color:#808080;
color:#FFFFFF;
}
table {
background-repeat: no-repeat;
background-position: center left;
}
</style>
<!-- Fin -->
  <body>
	<table border="0" valign="center" height="100%" width="100%"><tr><td>
		<table border="0" align="center">
		<tr>
			<td>
				<table border="0">
					<tr><td>
						<p><img src="logoseb.jpg" height="160" width="200" alt="Copyright &copy; 2006"></p>
					</td></tr>
					<tr><td>
						<p><img src="contactseb.jpg" height="160" width="200" alt="Copyright &copy; 2006"></p>
					</td></tr>
				</table>
			</td>
			<td background="fondeau.jpg" height="320" width="400">
				<p><?php include ('formulaireseb.php'); ?></p>
			</td>
		</tr>
		</table>
	</td></tr></table>
  </body>
</html>
visible sur http://membres.lycos.fr/nonameyet/
Avec IE, affichage nickel, mais FF me pose probleme, il m'agrandi le fond de ma table :S
Y a til un truc que j'ai mal fait ?
MErci d'avance ;)

voila les screen IE et puis FF :
Image
Image

Posté : 26 janv. 2006, 18:56
par Cyrano
As-tu songé à une mise en page sans tableaux HTML ?

Posté : 26 janv. 2006, 20:17
par Ic3Cub3
J'y ai pensé mais je veux un alignement vertical pour IE et FF, bref....
Et puis je me suis lancer dans les Table et pas les DIV mais s'il faut je changerai....
Sinon tu ne sais pas d'ou vient l'erreur ?

Posté : 26 janv. 2006, 21:10
par Cyrano
probablement d'une marge interne du tableau contenant le formulaire additionné à une marge externe du formulaire lui-même. Tout ça peut s'ajuster via le style CSS.

J'ajoute que CSS ne signifie pas obligatoiremet DIV : on va en utiliser pour certains éléments c'est vrai, mais pas systématiquement : on utilise les propriété des éléments de bloc : titres, paragraphes etc... tout ça peut être positionné correctement sans utiliser les tableaux.

Si tu veux voir un exemple de mise en page assez complexe sans le moindre tableau, jete un oeil ICI et un encore plus spectaculaire et très connu des webdsigners : csszengarden

Posté : 26 janv. 2006, 22:37
par Ic3Cub3
Pourtant j'ai mis background no repeat pour les tables....
Bon faut que je revois le tout via CSS alors :)

Posté : 26 janv. 2006, 22:45
par Cyrano
Le problème ne viens pas du background mais des marges intérieures et extérieures de certains objets de la page.

Posté : 26 janv. 2006, 23:21
par Ic3Cub3
Bon j'ai tout refais en CSS, et effectivement il y avait aussi un souci avec le formulaire inclus.
MAis bon, j'y ai perdu le "centrage automatique".
<html>
<title>Seb - Contact Page - Copyright &copy; 2006</title>
<head>
</head>
<!-- Début -->
<style TYPE="text/css">
html,body{
margin:0;
padding:0;
background-color:#808080;
color:#FFFFFF;
size:0.8em;
}
#form {
position: absolute;
margin-left: 350px;
margin-top: 100px;
height:320px;
width:400px;
background-image:url('fondeau.jpg');
background-repeat: no-repeat;
background-position: center center;
}
#logos {
position: absolute;
margin-top: 100px;
left:100px;
width: 200px;
height:320px;
}
</style>
<!-- Fin -->
  <body>
		<div id="logos">
			<img src="logoseb.jpg" height="160" width="200" alt="Copyright &copy; 2006">
			<img src="contactseb.jpg" height="160" width="200" alt="Copyright &copy; 2006">
		</div>
		
		<div id="form">
			<?php include ('formulaireseb.php'); ?>
		</div>
  </body>
</html>
Et j'ai encore une légère différence entre IE et FF

Posté : 26 janv. 2006, 23:40
par Cyrano
On va arranger ça, mais c'est effectivement nettement mieux :)
<html>
<title>Seb - Contact Page - Copyright © 2006</title>
<head>
</head>
<!-- Début -->
<style TYPE="text/css">
html,body{
    margin:0;
    padding:0;
    background-color:#808080;
    color:#FFFFFF;
    size:0.8em;
}
#page {
    position: absolute;
    top: 0;
    width: 600px;
    left: 50%;
    margin-left: -300px;
}
#logos {
    position: relative;
    margin-top: 100px;
    left:0;
    width: 200px;
    height:320px;
    float: left
}
#form {
    position: relative;
    margin-left: 200px;
    margin-top: 100px;
    height:320px;
    width:400px;
    background-image:url('fondeau.jpg');
    background-repeat: no-repeat;
    background-position: center center;
}
</style>
<!-- Fin -->
  <body>
  <div id="page">
        <div id="logos">
            <img src="logoseb.jpg" height="160" width="200" alt="Copyright © 2006">
            <img src="contactseb.jpg" height="160" width="200" alt="Copyright © 2006">
        </div>
        <div id="form">
            <?php include ('formulaireseb.php'); ?>
        </div>
      </div>
  </body>
</html>
Regarde les changements : centrage automatique aussi, mais j'ai utilisé une astuce : j'ai ajouté un div quand même, mais c'est tout de même largement moins lourd que les tableaux pour le même résultat. Essaye avec ça et reviens pour qu'on ajuste les histoires de background. Si tu as la page en ligne quelque part, ce sera encore plus facile pour voir de quoi il retourne.

Posté : 26 janv. 2006, 23:45
par Ic3Cub3
Avec FF pas de probleme, par contre IE :S

résultat de ta page : http://membres.lycos.fr/nonameyet/index2.php
ma page actuelle : http://membres.lycos.fr/nonameyet/index.php

Posté : 27 janv. 2006, 21:51
par Ic3Cub3
Mon probleme est resolu , merci a toi et puis aussi a MereTheresa et son magnifique post-it ;)

PS : voila pour faire le centrage Vertical ;) => http://www.intensivstation.ch/files/en_ ... emp11.html