Partage

Modification de l'affichage

omsisi77

14 octobre 2018 à 20:20:36

Bonjour, j'ai un soucis je n'arrive pas a modifier le visuel de mon formulaire,

- impossible d'étirer le bouton sur toutes la ligne

- quand je change la taille des valeurs <div class"col-md-6"> des champs rien ne change !

ce n'est pas centrer

malgres le css

merci

voici mon formulaire .php :

<?php
$firstname = $name = $email = $phone = $message = "";
$firstnameError = $nameError = $emailError = $phoneError = $messageError = "";
if ($_SERVER["REQUEST_METHOD"] == "POST")
 {
  $firstname = verifyInput($_POST["firstname"]);
  $name = verifyInput($_POST["name"]);
  $email = verifyInput($_POST["email"]);
  $phone = verifyInput($_POST["phone"]);
  $message = verifyInput($_POST["message"]);

if(empty($firstname))
{
  $firstnameError ="Je veux connaitre ton prénom !";
}
if(empty($name))
{
  $nameError ="Je veux connaitre ton nom !";
}


if(empty($message))
{
  $messageError ="Je veux connaitre ton message !";
}
if(!isEmail($email))
{
$emailError = "Ceci n'est pas un email !";
}


}

function isEmail($var)
{
  return filter_var($var, FILTER_VALIDATE_EMAIL);
}

function verifyInput($var)
{
  $var = trim($var);
  $var =stripslashes($var);
  $var = htmlspecialchars($var);

  return $var;
}
 ?>
<!DOCTYPE html>
<html>
<head>
<title>Conctactez-moi !</title>
<meta charset="utf-8" />
<meta name="viewport" content="with=device-width,initial-scale=1">
<!---jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!---bootsrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<!---police -->
<link href="http://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
<!---mon css -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
  <div class="divider"></div>
  <div class="heading">
    <h2> Contactez-moi </h2>
  </div>
    <div class="row">
      <div class="col-lg-6 col-lg-offset-1">
      <form id="contact-form" method="post" action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']); ?>" role="form">
  <div class="row">
    <div class"col-md-6">
<label for="firstname">Prénom <span class="blue">*</span></label>
<input type="text" id="firstname" name="firstname" class="form-control" placeholder="Votre prénom" value"<?php echo $firstname; ?>">
<p class="comments"><?php echo $firstnameError;?></p>
    </div>


    <div class"col-md-6">
      <label for="name">Nom <span class="blue">*</span></label>
      <input type="text" id="name" name="name" required class="form-control" placeholder="Votre nom"value"<?php echo $name; ?>">
      <p class="comments"><?php echo $nameError;?></p>
    </div>


    <div class"col-md-6">
      <label for="email">Email <span class="blue">*</span></label>
      <input type="email" id="email" name="email" required class="form-control" placeholder="Votre email" value"<?php echo $email; ?>">
      <p class="comments"><?php echo $emailError;?></p>
    </div>


    <div class"col-md-6">
      <label for="phone">Téléphone </label>
      <input type="tel" id="phone" name="phone"  class="form-control" placeholder="Votre téléphone" value"<?php echo $phone; ?>">
      <p class="comments">Message d'erreur</p>
    </div>


    <div class"col-md-12">
      <label for="message">Message <span class="blue">*</span></label>
      <textarea id="message" name"message" required class="form-control" placeholder="Votre Message" rows="4"value"<?php echo $message; ?>"></textarea>
      <p class="comments"><?php echo $messageError;?></p>
    </div>



    <div class"col-md-12">
      <p class="blue"><strong>* Ces informations sont requises </strong></p>
    </div>


    <div class"col-md-12">
      <input type="submit" class="button1" value="Envoyez">
    </div>
</form>
<p class="thank-you">Votre message a bien été envoyé.</p>

    </div>
</div>
  </div>


    </div>



</body>
</html>

mon css :

body
{
font-family: "Lato",sans-serif;
margin: 70px 0px;
background: #0069d6;
}
.divider
{
  width: 100px;
  height: 2px;
background: #ffa500;
margin: 0 auto;
}
.heading
{
  text-align: center;
  margin-bottom: 60px;
}
h2
{
  text-align: center;
  text-transform: uppercase;
  font-weight: bold;
  color: #fff;
}
#contact-form
{
  font-size: 20px;
  background: #fff;
  padding: 40px;
  border-radius: 10px;
}
.blue
{
  color:  #0069d6;
}
.form-control
{
  height: 50px;
  font-size: 18px;
}
.comments
{
  font-style: italic;
  font-size: 18px;
  color: #d82c2e;
  height: 25px;
}
#contact-form input[type=submit]
{
  margin: 40px auto 0px;
  display: block;
}
.button1
{
  border: 1px solid #ddd;
  background: #ffa500;
  color: #fff;
  width: 100%;
  font-weight : bold;
  text-transform: uppercase;
  padding: 18px;
  border-radius: 5px;
  transition: all 0.3s ease-in 0s;
}
.button1:hover
{
  background: #333;
  border-color: #ffa500;
}
.thank-you
{
  text-align: center;
  margin-top: 15px;
  font-weight: bold;
  font-size: 22px;
}

DeveloppeurBrut

14 octobre 2018 à 20:39:59

Il te manque le = derrière l'attribut class.

omsisi77

14 octobre 2018 à 20:46:22

En effet mince, une erreur d'inattention! merci,

et si je veux centrer le tous comment faire?

car pour le moment ça s'affiche comme ceci

DeveloppeurBrut

14 octobre 2018 à 20:47:00

Margin : 0 auto ; sur le container ?

-
Edité par DeveloppeurBrut 14 octobre 2018 à 20:47:09

omsisi77

14 octobre 2018 à 20:50:47

.container

{

margin: 0 auto;

}

j'ai donc crée, ça na pas fonctionné

Je tante de mettre margin: 0 auto; dans .form-control mais pareil

dans #contact-form ne fonctionne pas non plus

-
Edité par omsisi77 14 octobre 2018 à 20:52:58

DeveloppeurBrut

14 octobre 2018 à 20:52:12

https://www.w3schools.com/css/css_align.asp

Retire le 0 et applique lui une taille.

-
Edité par DeveloppeurBrut 14 octobre 2018 à 20:52:58

omsisi77

14 octobre 2018 à 20:55:23

merci, même en appliquant des tailles au hasard rien ne bouge avec le .container

DeveloppeurBrut

14 octobre 2018 à 20:56:50

Met la classe sur l'élement parent de container et pas sur container.

omsisi77

14 octobre 2018 à 20:58:19

.container

{

margin: auto;

width: 50%;

border: 3px solid green;

padding: 10px;

}

regarde en fessant ça on peux voir que container est bien centrer mais que le formulaire reste a gauche

screen :

DeveloppeurBrut

14 octobre 2018 à 20:59:32

Alors met le margin auto sur le formulaire ?

omsisi77

14 octobre 2018 à 21:01:53

C'est bien ce que je n'arrive pas a faire :/ c'est a dire sur le formulaire dans quel class de mon css ?

DeveloppeurBrut

14 octobre 2018 à 21:03:09

.centered{

margin : 0 auto;

width :80%

}

omsisi77

14 octobre 2018 à 21:06:26

ça a seulement réduis la taille du formulaire mais toujours rien n'est centré

je remets le code :

<?php
$firstname = $name = $email = $phone = $message = "";
$firstnameError = $nameError = $emailError = $phoneError = $messageError = "";
if ($_SERVER["REQUEST_METHOD"] == "POST")
 {
  $firstname = verifyInput($_POST["firstname"]);
  $name = verifyInput($_POST["name"]);
  $email = verifyInput($_POST["email"]);
  $phone = verifyInput($_POST["phone"]);
  $message = verifyInput($_POST["message"]);

if(empty($firstname))
{
  $firstnameError ="Je veux connaitre ton prénom !";
}
if(empty($name))
{
  $nameError ="Je veux connaitre ton nom !";
}


if(empty($message))
{
  $messageError ="Je veux connaitre ton message !";
}
if(!isEmail($email))
{
$emailError = "Ceci n'est pas un email !";
}


}

function isEmail($var)
{
  return filter_var($var, FILTER_VALIDATE_EMAIL);
}

function verifyInput($var)
{
  $var = trim($var);
  $var =stripslashes($var);
  $var = htmlspecialchars($var);

  return $var;
}
 ?>
<!DOCTYPE html>
<html>
<head>
<title>Conctactez-moi !</title>
<meta charset="utf-8" />
<meta name="viewport" content="with=device-width,initial-scale=1">
<!---jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!---bootsrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<!---police -->
<link href="http://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
<!---mon css -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
  <div class="divider"></div>
  <div class="heading">
    <h2> Contactez-moi </h2>
  </div>
    <div class="row">
      <div class="col-lg-6 col-lg-offset-1">
      <form id="contact-form" class="centered" method="post" action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']); ?>" role="form">
  <div class="row">
    <div class="col-md-6">
<label for="firstname">Prénom <span class="blue">*</span></label>
<input type="text" id="firstname" name="firstname" required class="form-control" placeholder="Votre prénom" value"<?php echo $firstname; ?>">
<p class="comments"><?php echo $firstnameError;?></p>
    </div>


    <div class="col-md-6">
      <label for="name">Nom <span class="blue">*</span></label>
      <input type="text" id="name" name="name" required class="form-control" placeholder="Votre nom"value"<?php echo $name; ?>">
      <p class="comments"><?php echo $nameError;?></p>
    </div>


    <div class="col-md-6">
      <label for="email">Email <span class="blue">*</span></label>
      <input type="email" id="email" name="email" required class="form-control" placeholder="Votre email" value"<?php echo $email; ?>">
      <p class="comments"><?php echo $emailError;?></p>
    </div>


    <div class="col-md-6">
      <label for="phone">Téléphone </label>
      <input type="tel" id="phone" name="phone"  class="form-control" placeholder="Votre téléphone" value"<?php echo $phone; ?>">
      <p class="comments">Message d'erreur</p>
    </div>


    <div class="col-md-12">
      <label for="message">Message <span class="blue">*</span></label>
      <textarea id="message" name"message" required class="form-control" placeholder="Votre Message" rows="4"value"<?php echo $message; ?>"></textarea>
      <p class="comments"><?php echo $messageError;?></p>
    </div>



    <div class="col-md-12">
      <p class="blue"><strong>* Ces informations sont requises </strong></p>
    </div>


    <div class="col-md-12">
      <input type="submit" class="button1" value="Envoyez">
    </div>
</form>
<p class="thank-you">Votre message a bien été envoyé.</p>

    </div>
</div>
  </div>


    </div>

<br>
<div class="divider"></div>
<h2> Formulaire de Mattéo </h2>

</body>
</html>

css :

body
{
font-family: "Lato",sans-serif;
margin: 70px 0px;
background: #0069d6;
}
.divider
{
  width: 100px;
  height: 2px;
background: #ffa500;
margin: 0 auto;
}
.heading
{
  text-align: center;
  margin-bottom: 60px;
}
h2
{
  text-align: center;
  text-transform: uppercase;
  font-weight: bold;
  color: #fff;
}
#contact-form
{
  font-size: 20px;
  background: #fff;
  padding: 40px;
  border-radius: 10px;
}
.blue
{
  color:  #0069d6;
}
.form-control
{
  height: 50px;
  font-size: 18px;
}
.comments
{
  font-style: italic;
  font-size: 18px;
  color: #d82c2e;
  height: 25px;
}
#contact-form input[type=submit]
{
margin-left: auto;
  margin: 40px auto 0px;
  display: block;
}
.button1
{
  border: 1px solid #ddd;
  background: #ffa500;
  color: #fff;
  width: 100%;
  font-weight : bold;
  text-transform: uppercase;
  padding: 18px;
  border-radius: 5px;
  transition: all 0.3s ease-in 0s;
}
.button1:hover
{
  background: #333;
  border-color: #ffa500;
}
.thank-you
{
  text-align: center;
  margin-top: 15px;
  font-weight: bold;
  font-size: 22px;
}
.centered
{
  margin: 0 auto;
  width: 80%
}

DeveloppeurBrut

14 octobre 2018 à 21:09:08

https://jsfiddle.net/ArthurARMAND/ud8v7Lm1/5/ chez moi c'est centré?

omsisi77

14 octobre 2018 à 21:11:01

Finalement j'ai fais

.centered

{

margin-left: 290px;

width: 100%

}

j'ai ajusté jusqu'a ce que ça centre et voila

mais ça ne marche pas ! quand on réduit la page ça ne réduis pas comme avant

-
Edité par omsisi77 14 octobre 2018 à 21:11:46

WaynePht

6 mai 2020 à 15:50:39

Le problème c'est que tu utilises une class de bootstrap 3 alors que tu as importé bootstrap 4

<div class="col-lg-6 col-lg-offset-1">

le résultat est le suivant

là ce sera centré

Benzouye

6 mai 2020 à 17:29:10

Bonjour,

Déterrage

Citation des règles générales du forum :

Avant de poster un message, vérifiez la date du sujet dans lequel vous comptiez intervenir.

Si le dernier message sur le sujet date de plus de deux mois, mieux vaut ne pas répondre.
En effet, le déterrage d'un sujet nuit au bon fonctionnement du forum, et l'informatique pouvant grandement changer en quelques mois il n'est donc que rarement pertinent de déterrer un vieux sujet.

Au lieu de déterrer un sujet il est préférable :

soit de contacter directement le membre voulu par messagerie privée en cliquant sur son pseudonyme pour accéder à sa page profil, puis sur le lien "Ecrire un message"

soit de créer un nouveau sujet décrivant votre propre contexte

ne pas répondre à un déterrage et le signaler à la modération

Je ferme ce sujet. En cas de désaccord, me contacter par MP.

Seul on va plus vite, ensemble on va plus loin ... A maîtriser : Conception BDD, MySQL, PHP/MySQL

Modification de l'affichage

Déterrage

Supprimer

Modérer

Signaler le message aux modérateurs