probléme centrage formulaire sous IE et fire fox

extremenet · 4 Mars 2009

Bonjour,

je viens de faire un formulaire mais celui-ci se centre à peut pret bien sous IE mais pas du tout sous firefox. sous FF il reste à gauche.

Ai je oublé une fonction dans mon CSS.

Voici mon code :

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" />
<title>Document sans titre</title>
<style type="text/css">
div#cadrepagedeposer{
		width:980px;
		top:20px;
		margin-top:20px;
		border-top: solid #620000 2px;
		 border-left: solid #620000 2px; 
		 border-right: solid #620000 2px; 
		 border-bottom: solid #620000 2px;
				 margin:auto;
				 float:left;
		}
        
        
        
        
        
        
        * html .threepxfix{
margin-left: 3px;
padding:0px;
}


.cssformdeposer p{

width: 300px;
clear: left;
margin: 0;
padding: 3px 0 3px 0;
padding-left: 180px; /*width of left column containing the label elements*/
text-align:center;
}

.cssformdeposer label{
font-weight: bold;
text-align:right;
float: left;
margin-left: -160px; /*width of left column*/
width: 180px; /*width of labels. Should be smaller than left column (155px) to create some right margin*/
}

.cssformdeposer input[type="text"]{ /*width of text boxes. IE6 does not understand this attribute*/
width: 245px; 

}
.cssformdeposer input[type="file"]{ /*width of text boxes. IE6 does not understand this attribute*/
width: 245px; 

}

.cssformdeposer select{ /*width of text boxes. IE6 does not understand this attribute*/
width: 250px; 

}

.cssformdeposer textarea{
width: 245px;
height: 50px;
}</style>
</head>

<body>
<div id="cadresprincipal">
<div id="cadrepagedeposer">



<form name="deposer" id="deposer" class="cssformdeposer"  method="POST" action="inscription.php" onSubmit="return validationformulaire(this)" enctype="multipart/form-data">

<h1><div align="center"><br />Déposer un fichier</div></h1> 

<?php if(isset($message2)){ echo "<span style=\"color: #A60000\"> $message2 </span><br />"; } ?>



<p><label for="fichier" class="formulaire1">Fichier </label><input type="file" name="fichierimage"  ></p>

<p><label for="titre" class="formulaire1">Titre</label><input name="titre" type="text" /></p>

<p><label for="tag" class="formulaire1">Tag </label><input name="tag" type="text" /></p>

<p><label for="categorie" class="formulaire1">categorie</label><select name="categorie" >
<option  value="" > Choisir </option>

</select></p>



<p><label for="commentaire" class="formulaire1">Commentaire</label><textarea name="commentaire" cols="" rows=""><?php if ($anneenaissance!="0") {echo"$anneenaissance"; }?></textarea></p>


</form>
</div>


</div>
</body>
</html>

Merci par avance

Babylon · 4 Mars 2009

Salut,

Alors je sais pas si c'est ça que tu cherche puisque en test ton code n'est centré ni sur IE ni sur FF mais bon voila, tu as un float: left qui traine dans div#cadrepagedeposer. Si tu l'enlèves c'est centré sur les 2.

Si c'est pas ca tu trouvera surement ton bonheur ici
http://www.alsacreations.com/article/lire/539-Centrer-les-elements-ou- ... n-CSS.html

Bye

detectimmobilier · 4 Mars 2009

Bonjour,
Si l'adresse de la page est http://www.petitionduweb.com/contact.php, sous FF aucun pb de centrage :wink:

extremenet · 4 Mars 2009

Ce n'est pas sur le site petitionduweb.com mais un nouveau site en conception.

Voici l'adresse de test de mon exemple :
http://www.petitionduweb.com/test.php

Voici le code remodifé mais cela ne marche toujours pas. :

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" />
<title>Document sans titre</title>
<style type="text/css">


body { margin: 0px auto;
padding:0;
background-color: #0C0203;
}
.formulaire1
{ color:#856558;
	font-size : 14px;
	font-family : Tahoma,Verdana,Arial;
	font-weight: bold;
	
	}
div#cadrepagedeposer{
      width:980px;
      top:20px;
      margin-top:20px;
      border-top: solid #620000 2px;
       border-left: solid #620000 2px; 
       border-right: solid #620000 2px; 
       border-bottom: solid #620000 2px;
             margin:auto;
             
      }
            * html .threepxfix{
margin-left: 3px;
padding:0px;
}

em {
width:270px;
position:absolute;
vertical-align:top;
font-style:normal;
display:none;
color:#0000ff;
font-weight:bold;
border:1px solid #ffa500;
background-color:yellow;

}

.cssformdeposer p{

width: 300px;
clear: left;
margin: 0;
padding: 3px 0 3px 0;
padding-left: 180px; /*width of left column containing the label elements*/
text-align:center;
}

.cssformdeposer label{
font-weight: bold;
text-align:right;
float: left;
margin-left: -160px; /*width of left column*/
width: 180px; /*width of labels. Should be smaller than left column (155px) to create some right margin*/
}

.cssformdeposer input[type="text"]{ /*width of text boxes. IE6 does not understand this attribute*/
width: 245px; 

}
.cssformdeposer input[type="file"]{ /*width of text boxes. IE6 does not understand this attribute*/
width: 245px; 

}


.cssformdeposer select{ /*width of text boxes. IE6 does not understand this attribute*/
width: 250px; 

}

.cssformdeposer textarea{
width: 245px;
height: 50px;
}
</style>
</head>

<body><br>
<br>


<div id="cadrepagedeposer">


<form name="deposer" id="deposer" class="cssformdeposer"  method="POST" action="inscription.php" onSubmit="return validationformulaire(this)" enctype="multipart/form-data">




<p><label for="fichier" class="formulaire1">Fichier </label><input type="file" name="fichierimage"  ></p>

<p><label for="titre" class="formulaire1">Titre</label><input name="titre" type="text" /></p>

<p><label for="tag" class="formulaire1">Tag </label><input name="tag" type="text" /></p>

<p><label for="categorie" class="formulaire1">categorie</label><select name="categorie" >
<option  value="" > Choisir </option>

</select><em> Catégorie dans laquelle votre fichier sera disponnible.</em></p>


</form>
</div>




</body>
</html>

Merci de votre aide

Babylon · 4 Mars 2009

Quand je copie/colle le code que tu donne il n'y aucun problème sous IE 7/8 et FF 3.
J'imagine que ta page est un peu plus complète que ça , tu as un bout de code en plus à donner ?

extremenet · 4 Mars 2009

Bon sa y est j'ai reussi. j'ai reussi avec des propositions sur d'autre forum

Je n'avais pas vu que ma balise <form n'etait pas defini dans la feuille de style.

pour ce que ca interresse j'ai ajouté :

.cssformdeposer {

width: 450px;

margin: auto;

text-align:center;
}

et text-align: center; dans le bloc cadrepagedeposer

Merci encore de votre aide