Probleme de positionnement

zak -  
cyril1982 Messages postés 110 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour,

j'ai un petit soucis avec ma page contact.php que des que j'envoi le formulaire et le message d'envoi s'affiche le footer monte en haut de la page!!!
svp si une personne poura m'aider !!
j'att vos reponses
merci

3 réponses

cyril1982 Messages postés 110 Date d'inscription   Statut Membre Dernière intervention   12
 
Bonjour,

Pour pouvoir t'aider, il faut que tu donnes plus d'informations et une partie de ton code qui pose problème.
0
zak
 
rebonjour,
Voila 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Graphic-cuisines</title>
<link href='http://fonts.googleapis.com/css?family=Abel' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="style.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="animation.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="contact.css" type="text/css" media="screen"/>

<script type="text/javascript" src="jquery-1.11.0.min.js"></script>
</head>

<body>
<header>
<div id="img" ><img src="contact.jpg" />
</div>
</header>
<section>
<aside><img src="images/co.png" /></aside>
<div id="form_contact">
<form action="process.php" id="contact" method="POST">
<p>
<label for="nom" class="nom"></label>
<br /><input id="nom" name="nom" style="color:white" placeholder=" Nom" type="text">
<span id="msg_nom"></span>
</p>
<p>
<label for="prenom" class="prenom"></label>
<br /><input id="Prenom" name="Prenom" style="color:white" placeholder=" Prenom" type="text">
<span id="msg_nom"></span>
</p>
<p>
<label for="tel" class="tel"></label>
<br /><input id="tel" name="tel" style="color:white" placeholder=" Numéro de téléphone" type="text">
<span id="msg_tel"></span>
</p>
<p>
<label for="sujet" class="sujet"></label>
<br /><input id="sujet" name="sujet" style="color:white" placeholder=" Sujet" type="text">
<span id="msg_sujet"></span>
</p>
<p>
<label for="email"></label>
<br /><input id="email" name="email" style="color:white" placeholder=" @email"type="email">
<span id="msg_email"></span>
</p>
<p>
<label for="message"></label>
<br /><textarea id="message" name="message" style="color:white"placeholder=" ---Message içi---" rows="10" cols="80"></textarea>
<span id="msg_message"></span>
</p>
<p>
<input type="submit" value="Envoyer" />
</p>
</form>
<span id="msg_all"></span>
</div>
</section>
<footer>
<ul class="css3rotate">
<li><a href="index.html"><img src="image1.jpg" /></a></li>
<li><a href="localisation.html"><img src="image2.jpg" /></a></li>
<li><a href="contact.html"><img src="image3.jpg" /></a></li>
</li>
<li><a href="cuisine.html"><img src="image4.jpg" /></a></li>
</li>
<li><a href="equipe.html"><img src="image5.jpg" /></a></li>
<li><a href="tel:+33388119917"><img src="image6.jpg" /></a></li>
<li><a href="index.html"><img src="logo g.jpg" /></a>
</li></div>
</ul>
</footer>
<script src="http://code.jquery.com/jquery-1.8.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("#contact").submit(function(event){
var nom = $("#nom").val();
var prenom = $("#prenom").val();
var sujet = $("#sujet").val();
var tel = $("#tel").val();
var email = $("#email").val();
var message = $("#message").val();
var dataString = nom + prenom + tel + sujet + email + message;
var msg_all = 'Merci de remplir tous les champs';
var msg_alert = 'Merci de remplir tous les champs';
if(dataString == '')
{
$('#msg_all').html(msg_all);
}
else if(nom == '')
{
$('#msg_nom').html(msg_alert);

}
else if(prenom == '')
{
$('#msg_prenom').html(msg_alert);

}
else if(tel == '')
{
$('#msg_tel').html(msg_alert);

}
else if(sujet == '')
{
$('#msg_sujet').html(msg_alert);
}
else if(email == '')
{
$('#msg_email').html(msg_alert);
}
else if(message == '')
{
$('#msg_message').html(msg_alert);
}
else
{
$.ajax({
type : "POST",
url: $(this).attr('action'),
data: $(this).serialize(),
success : function(){
$('#contact').html('<p> Formulaire bien envoy </p>');
},
error: function(){
$('#contact').html("<p>Erreur d'appel, le formulaire ne peut pas fonctionner</p>");
}
});
}
return false;
});
});
</script>
</body>
</html>
et ma page css est :
@charset "utf-8";
/* CSS Document */

aside{
float:right;
margin-right:200px;
margin-top:50px;
}
#img {
margin-bottom:40px;
padding-left:390px;}
footer
{margin-top:1%;
position:fixed;
botom: 0;}
section
{

margin-bottom: 15px;
margin-left: 80px;
margin-top: 5px;
text-align: left;
}
label{

font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
font-size:14px;
color:#F5F4F4;}
#nom{
background-image:url(images/c.png);background-position:left;background-repeat:no-repeat;padding-left:28px;width:250px;
border:#444444 2px solid;
background-color:#373737;
font-family:}

#Prenom{
background-position:left;
background-repeat:no-repeat;
padding-left:28px;width:250px;
border:#444444 2px solid;
background-color:#373737;}

#tel{
background-image:url(images/tel.png);background-position:left;background-repeat:no-repeat;padding-left:30px;width:247px;
background-color:#373737;
border:#444444 2px solid;}
#sujet{width:280px;
border:#444444 2px solid;
background-color:#373737;}
#email{
background-position:left;background-repeat:no-repeat;padding-left:28px;width:250px;
background-color:#373737;
border:#444444 2px solid;}
#message{
background-position:left;background-repeat:no-repeat;padding-left:20px;width:320px;
}
input{-moz-border-radius:10px;
-webkit-border-radius:10px;-o-border-radius:10px;
border-radius:10px;
border:#444444 2px solid;}
textarea
{
font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
font-size:14px;
-moz-border-radius:10px;
-webkit-border-radius:10px;

-o-border-radius:10px;
border-radius:10px;
border:#444444 2px solid;
background-color:#373737;}
#form_contact p{color:#CD373A;}
#form_contact input[type="submit"]
{
color:#FFFFFF;
background-color:#313131;
border:#444444 2px solid;
width: 7%;
}
#form_contact input[type="submit"]:hover
{
background-color:#444444;
cursor: pointer;
}
footer
{
width:100%;
padding-bottom:2%;
padding-top:1%;}
merci pr votre repnse
0
cyril1982 Messages postés 110 Date d'inscription   Statut Membre Dernière intervention   12
 
Lors du submit, tu remplaces le contenu de ta balise "form" par une ligne de texte. Le contenu de la balise form est réduit il est donc normal que le footer remonte, non ?
0