[resolu]Page html non centrée sous ie 7 et ok sous mozilla

Question

jeromei

2 Sep 2008 à 20:41

Bonjour, j'ai cette page don.html
http://jeromei.phpnet.org/rebondir/don.html
qui est centrée sous mozilla mais pas sous IE7 . elle aura l'extension php plus tard mais je pense pas que ça vienne de là?

par contre la page http://jeromei.phpnet.org/rebondir/index.html
avec les mêmes css est bien centrée.

je ne comprend pas.

voila dans l'ordre mon code php

<?php
if(isset($_POST['email'])){
	$nom=$_POST["nom"];
	$prenom=$_POST["prenom"];
	$email=$_POST["email"];
	$message=$_POST["message"];
	
	$dest="contact@cafelafee.fr";
	$titre="Mail depuis le site  http://www.cafelafee.fr/";
 
	$corps="Vous avez reçu un nouveau message en provenance du site :  http://www.cafelafee.fr/\n";	 
	$corps.="Nom : ".$nom."\n";
	$corps.="Prenom : ".$prenom."\n";
	$corps.="Email : ".$email."\n";
	$corps.="Son message est : ".$message."\n";
	$entete="From: ".$nom."<".$email.">\r\n";
	$entete.="Reply-To: ".$email."\r\n";
	
	if (mail($dest,$titre,$corps,$entete)){
		$resultat= "merci pour votre mail";
		
	}else{
		$resultat= "Il y a eu un probleme lors de l'envoi du message, veuillez réessayer.";
	}
} else {
	
	$nom='';
	$prenom='';
	$ville='';
	$email='';
	$message='';
	$resultat='';
}
?>

mon code html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta name="keywords" content="association; rebondir; mini-ferme; pédagogique; enfant; enfants; eprouves; malade; malades
vaux le penil; rêves; reves; souhaits; loisirs; parent; parents; salle; location; animaux; dauphins; fête; kangourou; 
kangourous; fêtes; parc animalier,"/>
<title>Les dons</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-15" />
<meta name="keywords" content="rebondir...au-delà de ses rêves | rebondir  | association | reves | souhaits | enfants | loisirs | location | rêves d'enfants | mini ferme | pédagogique | respect,"/>
<meta name="description" content=" rebondir  | association | reves | souhaits | enfants | loisirs | location | rêves d'enfants | mini ferme | pédagogique | respect,"/>
<meta name="dc.keywords" content=" rebondir  | association | reves | souhaits | enfants | loisirs | location | rêves d'enfants | mini ferme | pédagogique | respect,"/>
<meta name="subject" content="rêves d'enfants | mini ferme | location, " />
<meta name="author" content="jerome LORIOT" />
<meta name="publisher" content="jerome LORIOT" />
<meta name="identifier-url" content="http://www.rebondir.fr" />
<meta name="date-creation-ddmmyyyy" content="15/07/2008" />
<meta name="Robots" content="all" />
<meta name="verify-v1" content="12817KlIGloauTTEBvo8B2q4umLgeon2EDuPYfv/2sg=" />
<meta name="Classification" content="rebondir  | association | reves | souhaits | enfants | loisirs | location | rêves d'enfants | mini ferme | pédagogique | respect,"/>
<meta http-equiv="content-Language" content="fr" />
<meta name="location" content="France, FRANCE" />
<meta name="expires" content="never" />
<meta name="Audience" content="General" />
<link rel="shortcut icon" href="favicon.ico" >
<link rel="icon" href="animated_favicon1.gif" type="image/gif" >
<link type="text/css" href="style/txt.css" rel="stylesheet" />	
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript" src="js/swfintegrator.js"></script>
<script type="text/javascript" src="js/prototype.js" ></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects" ></script>
<script type="text/javascript" src="js/lightbox.js" ></script>



<!--  SCRIPT DE LIGHTBOX -->

<script type="text/javascript"> function SWFDelegate(url,caption) { var objLink = document.createElement('a');
 objLink.setAttribute('href',url); objLink.setAttribute('rel','lightbox'); objLink.setAttribute('title',caption); Lightbox.prototype.start(objLink); }
 </script>


</head>

<body>


	<div id="container">
	
	
			<!--le header-->
	
    	<div id="entete">	
	
	<object type="application/x-shockwave-flash" width="776" height="120" data="flash/header.swf">
	<param name="movie" value="flash/header.swf" /></object>
	
	</div>
	
	<!--fin du header-->
	
	
	<!--menu inclus dans  header-->
	
	<div id="menu">
			
	
	
        <div id="nav">
		
        <ul>
			
            	<li><a href="index.html" class="nonHighLight">Accueil</a></li>
                <li><a href="reves.html" class="nonHighLight">R&#234;ves d&#146;enfants</a></li>
                <li><a href="don.html" id="highlight">Dons</a></li>
                <li><a href="evenement.html"class="nonHighLight">Ev&#232;nements</a></li>
				<li><a href="partenaires.html" class="nonHighLight">Partenaires</a></li>
                <li><a href="contact.html" class="nonHighLight">Contact</a></li>
               
              
            </ul>
       
		</div> <!--fin div nav-->
   
   </div><!--fin div menu-->
   
			
				<!--fin du menu inclus dans  header-->
				
				
				
				<!--debut du bandeau flash presentation rebondir-->
   
   
  	<div id="banner">	
	
	<object type="application/x-shockwave-flash" width="776" height="220" data="flash/photomilieudon.swf">
	<param name="movie" value="flash/photomilieudon.swf" /></object>
	
	</div>
	
						<!--fin du bandeau flash presentation rebondir-->
						
						
							<!--debut du texte central et donc div centre-->
						

		<div class="centre">
		<br />          	
            
            				 	<div class="loisirimg2">
								
								<h1>Donner</h1><br />

               <img src="images/coeur.jpg" alt="donate" title="donate" align="right";/></div>
			   
			   	<p>Les dons permettent l&#146;aide &#224; la r&#233;alisation de voeux d&#146;enfants et d&#146;adolescents tr&#232;s &#233;prouv&#233;s &#130; 
			   notamment par<br />
			   de graves maladies avec pour seul objectif de les &#147 soutenir &#147;dans l&#146;&#233;preuve douloureuse 
			   qu&#146;ils traversent.</p><br />
		
				<p>Les dons permettent la r&#233;alisation et l&#146;entretien d&#146;un parc animalier (faune australienne + mini-ferme) en cr&#233;ant un 
				endroit de d&#233;tente&#130; particuli&#232;rement attrayant et sympathique&#130; en milieu naturel&#130; pour l&#146;accueil 
				d&#146;enfants<br />
				venant passer un s&#233;jour de convalescence/ou de vacances au sein de l&#146;association et satisfaire 
				leurs d&#233;sirs d&#146;approcher des animaux .</p><br />
			
				<p>Les dons permettent l&#146;aide au financement d&#146;interventions chirurgicales dans le domaine cardiaque
				(par le biais de l&#146;Association &#147; Chaîne de l&#146;Espoir &#147; ).</p><br />
				
				<p>Les dons permettent de d&#233;velopper l&#146;&#233;quith&#233;rapie  en utilisant des ânes.</p><br />

				

<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input id="paypal"type="image" src="https://www.paypal.com/fr_FR/FR/i/btn/x-click-butcc-donate.gif" border="0" name="submit" alt="PayPal - la solution de paiement en ligne la plus simple et la plus s&#233;curis&#233;e !" align="center"; />
<img alt="" border="0" src="https://www.paypal.com/fr_FR/i/scr/pixel.gif" width="1" height="1">
<input type="hidden" name="encrypted" value="-----BEGIN PKCS7-----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-----END PKCS7-----
">
</form>
      
	
	   
	   	<span class="alignement"><p>Une question, un renseignement, contactez nous</p></span><br /><br />
						 
		 <?php echo $resultat; ?>

<form method="post" action="don.html">



		<h3>Formulaire de Contact:</h3><br />
        
             <fieldset>
 
		<label for="nom">Votre Nom :</label>
	<input id="nom" type="text" name="nom" value="<?php echo $nom; ?>"/>
	
	<label for="nom">Votre Prenom :</label>
	<input id="prenom" type="text" name="prenom" value="<?php echo $prenom; ?>"/>
	
			<label for="nom">Votre Ville de résidence :</label>
	<input id="ville" type="text" name="ville" value="<?php echo $ville; ?>"/>
	
	<label for="email">Votre Adresse Email :</label>
	<input id="email" name="email" type="text" value="<?php echo $email; ?>"/>
	
	<label for="message">Votre Message :</label>
	<textarea id="message" name="message" rows="5" cols="5"  ><?php echo $message; ?></textarea>
          
          <input id="envoyer" type="texte"value="Envoyer" />
		 
		 
         </fieldset> 
		 	 	
		 
      </form>	<br />
				
					
					 	<span class="alignement"><a href="index.html" >Retour à l'accuei</a></span>
						
							<div id="footer">
		
			<a href="mail6.php">Copyright©2008</a>
			<a href="index.html">Accueil</a>
			<a href="charte.html">R&#234;ves d&#146;enfants</a>
			<a href="mentions.html">Mentions l&#233;gales </a> 
			<a href="mail.php">Contact</a>
	
   </div>
	</div>	<!--fin du container-->
	
	


</body>
</html>

et pour finir mes css:

a { outline:none } /* Gets rid of Firefox's dotted borders */


ul{
  list-style:none;
}

a img{
  margin:0;
  border:0;
}

*{
	margin:0;
	padding:0;
}


body {

	font-family:Arial, Helvetica, sans-serif;

	font-size:12px;

	color:#535353;

	background:url(../images/fonds.jpg) repeat-x #D4EEF0;

}


#container{

	width:776px;

	margin:0 auto;

}


#entete{
	width:776px;
	height:120px;
	}
	
	
	
#entete object{/*permet d'aligner mon menu sous le bandeau flash notamment sous firefox*/

  vertical-align:bottom;
  
	}
	
/*navigation style*/

#nav ul{

	padding:11px 0px 10px 40px;/*descend le menu*/
	margin: 0;/*permet d'aligner mon menu sous le bandeau flash notamment sous firefox*/
	text-align: center;/*centre le menu*/

}



#nav li{

 	display:inline;

	list-style:none;	

	margin-right:33px;/*eloigne mes onglets de menu les uns des autres*/

}



#nav li a.nonHighLight{

	font-family:Arial, Helvetica, sans-serif;

	color:#FFFFFF;

	font-size:15px;

	text-decoration:none;

}



#nav li a.nonHighLight:hover{

	color:#B7E3E6;

}



#nav a#highlight{

	font-family:Arial, Helvetica, sans-serif;

	font-size:15px;

	text-decoration:none;

	color:#B7E3E6;

}
	
	

#nav{

	width:776px;

	height:41px;
	
	margin-bottom:10px;

	background:url(../images/nav_bg1.jpg) #66A3A8 repeat-x;

}
#banner object{/*permet d'aligner mon bandeau imagem notamment sous firefox*/

  vertical-align:bottom;
  
	}

/* debut div centrale avec tous les elements dedans*/
	
	
.centre{
 
  width:776px;
  
	

}

	/* debut image bandeau lien bas avec legende*/

#centre1{
 
 	 width:776px;
	height:148px;
	background-color:#c5e8ea;
	margin-top:15px;


}

.imagebas{

 	float: left;
	margin:10px;
 }

 
 
.imagebas p {
		text-align: center;
		background-color: #0b6bb8;
		font-style:bold;
		margin-left:10px;
		margin-top:-3px;
		
  }
  	
	
.imagebas a,
.imagebas a:link,
.imagebas a:visited,
.imagebas a:active,
.imagebas a:hover{
	
	 color:#ffffff;
	text-decoration: none;
	margin-left:10px;
	text-align: center;

}

.imagebas a:hover{
  
	text-decoration:none;

	color:#B7E3E6;
}
 
  	/* fin image bandeau lien bas avec legende*/
	
	  	/* page des dons*/


.loisirimg2 img{/*images page don.html*/


width:160px;
height:120px;

}	

input#paypal{
  
  margin-left:340px;
  width:73px;
  height:44px;
  margin-top:10px; /*descend mon icone paypal / div du dessus*/
  margin-bottom:20px;
}


  
  /*****************************************************
*
*MODULE FORMULAIRE
*
*
*********************************************************/
.alignement {
text-align:center;
font-style:bold;
font-size:16px;
}
	
.alignement a,
.alignement a:link,
.alignement a:visited,
.alignement a:active,
.alignement a:hover{ 
 margin-left:420px;	
 text-align:center;/*centrer mon texte horizontalement dans mon input*/
  border:1px solid #0b6bb8;
}

.alignement a:hover{
  
	text-decoration:none;

	color:blue;
}

h3{
text-align:center;
font-style:bold;
font-size:22px;
}


label{/*nom, prenom etc*/
  display:block;
  font-weight:bold;
  margin-left:250px;
    margin-top:8px;
 
}

input, textarea{/*interieur des champs*/
  width:300px;
  border:1px solid #0b6bb8;
    margin-top:8px;
  background-color:  #b8ffbc;
  margin-left:250px;
	
}

textarea{
  height:200px;
}

fieldset {
  border:0;

}

input#envoyer{
  width:auto;
  padding-bottom:10px;
  padding-top:10px;/*centrer mon texte verticalement dans mon input*/
  text-align:center;/*centrer mon texte horizontalement dans mon input*/
  border:1px solid #0b6bb8;
  margin-left:405px;
  margin-top:18px;
}

#footer{

	width:776px;
	height:17px;
	text-align:center;
	margin-top:5px;	/*descend mon footer*/
	font-weight:bold;
	font-size: 10px;
	font-family: Arial,Verdana,Helvetica,Sans-serif;
	color:#ffffff;	
	background-color: #0b6bb8;	
}


#footer a,
#footer a:link,
#footer a:visited,
#footer a:active,
#footer a:hover{
	
	text-decoration: none;
	color: #ffffff;
	padding-right:5px;/*decale les éléments de menus entre eux*/
	
}

#footer a:hover{
  text-decoration:underline;
  color:#ffffff;
}
		

/*side_nav*/

#side_nav ul{

	list-style:none;

	width:180px;

}



#side_nav ul li a{

	text-decoration:none;

	display:block;

	width:160px;

	height:14px;

	font-family:Arial, Helvetica, sans-serif;

	font-size:13px;

	color:#BDE4E8;

	background-color:#47787C;

	padding:5px 10px 10px 10px;

	border-bottom:1px solid #D5ECE6;

}



#side_nav ul li a:hover{

	background-color:#66A3A8;

}



#side_nav ul li a#side_nav_hightlight{

	background-color:#66A3A8;

}



/*sponsor slideshow*/

#sponsor_slideshow{

	width:180px;

	height:200px;

	margin-top:20px;

}

j'ai essayé de mettre dans les css de mon body

text-align:center;

qui m'a centré toute ma page mais m'a fait perdre la mise en page sur les textes, ceux -ci au lieu d'être à gauche, se retrouvent centrés ce qui fait moche.

merci pour votre aide
Modifié par jeromei (03 Sep 2008 - 00:12)

jeromei

3 Sep 2008 à 00:12

ilfallait effectivement nommé la page don.html en don.php

Sujet clos