Probleme de positionnement
Fermé
zak
-
20 mars 2014 à 13:23
cyril1982 Messages postés 110 Date d'inscription vendredi 7 mars 2014 Statut Membre Dernière intervention 19 septembre 2018 - 20 mars 2014 à 16:39
cyril1982 Messages postés 110 Date d'inscription vendredi 7 mars 2014 Statut Membre Dernière intervention 19 septembre 2018 - 20 mars 2014 à 16:39
A voir également:
- Probleme de positionnement
- Exemple test de positionnement greta ✓ - Forum Études / Formation High-Tech
- Dans le document à télécharger, positionnez l'image dans le cadre gris. mettez un espace de 1 cm autour de l'image. comment se prénomme la personne recherchée ? - Forum Word
- Test de positionnement cesi - Forum Études / Formation High-Tech
- Test de positionnement gestionnaire de paie ✓ - Forum Études / Formation High-Tech
- Informations tests CESI - Forum Études / Formation High-Tech
3 réponses
cyril1982
Messages postés
110
Date d'inscription
vendredi 7 mars 2014
Statut
Membre
Dernière intervention
19 septembre 2018
12
20 mars 2014 à 14:40
20 mars 2014 à 14:40
Bonjour,
Pour pouvoir t'aider, il faut que tu donnes plus d'informations et une partie de ton code qui pose problème.
Pour pouvoir t'aider, il faut que tu donnes plus d'informations et une partie de ton code qui pose problème.
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
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
cyril1982
Messages postés
110
Date d'inscription
vendredi 7 mars 2014
Statut
Membre
Dernière intervention
19 septembre 2018
12
20 mars 2014 à 16:39
20 mars 2014 à 16:39
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 ?
