[Résolu] centrer formulaire d'inscription par FarCry - page 1

Bonjour, je suis entrain de créer un formulaire d'inscription, j'ai déjà crée la mise ainsi que certains champs:

mais le problème c'est que quand je réduis un peu la taille de la page le formulaire ne reste pas à l'intérieur de la box et elle dépasse ce qui est un peu moche : Et pourquoi le contenu de ma page n'occupe t'il pas 100% de la page ? ( j'ai défini volontairement une marge de 120px à gauche et à droite )

et j'ai pourtant appliqué au div qui englobe tout le contenu de ma page une width= 100% mais la partie de droite laisse toujours une trop grande marge et le contenu n'occupe pas 100% de la page : En espérant avoir été assez clair

HTML

<html>
   <head>
       <title> formulaire inscription php </title>
       <link href="test.css" rel="stylesheet" media="all" type="text/css" />
       <meta charset="utf-8">
   </head>


   <body>



<div class="bloc">


  <div class="column-left">
    <div class="title">
      Créer votre compte
     </div> 



     <form action="/ma-page-de-traitement" method="post">


   <div class="forminscription">
     <label for="mail"> Adresse e-mail </label>
     <input class="inscription" type="email" placeholder="Votre mail" id="mail" name="mail"/>
   </div>

   <div class="forminscription">
      <label for="mdp"> Mot de passe </label>
      <input class="inscription" type="password" placeholder="Votre mot de passe" id="mdp" name="mdp"/>
   </div>    

   <div class="forminscription">
     <label for="mdp2"> Confirmation du mot de passe </label>
     <input class="inscription" type="password" placeholder="Confirmez votre mot de passe" id="mdp2" name="mdp2"/>
   </div> 



   
  </div>

<!-- cadre se situant à droite -->
  <div class="column-right">
    <div class="title">
     <div class="title1">
     Déjà client ?
     </div>
    </div> 
  
  </div>
  <!-- Fin cadre -->


  <div class="column-left2">
    <div class="title">
      ► Informations personnelles
    </div>
   
  </div>

   <div class="column-left-invisible">
   
  </div>

  <div class="column-left3">
   <div class="title">
     ► Adresse et téléphone
   </div>
  </div>

 
</div>



 
 
   </body>
</html>

CSS

body{
    margin: 0 120px 0 120px ;   /*  pour centrer le contenu de la page = marge de 120px à gauche et à droite */
}

.bloc{
 
  width: 100%;    /* div qui englobe tout le formulaire ainsi que la mise en forme  */
}
 
.column-left{
 
    display: inline-block;
    border: 2px solid #FF4500;
    width: 45%;
    height: 250px;
    vertical-align: top;
    text-align: center;
}
 
.column-right{
    position: relative;
    display: inline-block;
    border: 2px solid #FF4500;
    width: 45%;
    height: 250px;
    vertical-align: top;
}


.content{
    background-color: red;
    font-family: impact;
    font-size: 20px;
    color: white;
    text-align: center;
}


.column-left2{
 
    display: inline-block;
    border: 2px solid #FF4500;
    width: 45%;
    height: 250px;
    vertical-align: top;
}



.column-left3{
 
    display: inline-block;
    border: 2px solid #FF4500;
    width: 45%;
    height: 250px;
    vertical-align: top;
}

.column-left-invisible{
 
    display: inline-block;
    border: ;
    width: 45%;
    height: 100px;
    vertical-align: top;
}

.title{
    text-align: center;
    font-size: 25px;
    font-family: impact;
    color: #ffffff;
    background-color: #FF4500;
    padding: 5px
}
 

 form{
    margin: 35px
 }

form div.forminscription + div.forminscription {
    margin: 10px;
    margin-top: 1em;
}

label {
    display: inline-block;
    width: 200px;
    text-align: right;
}

input, textarea {
    font: 1.3em arial;
    width: 300px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: 1px solid #999;
    border-radius: 5px;

}

Merci d'avance.

-
Edité par FarCry 14 mars 2018 à 7:38:20

Le problème viens du fait que tu utilise des % et des valeur static en pixel... pour l'écart a droite sa vient du fait que tu dis a tes box de faire 45% sans leur donner de marge alors que tu reduit le body, d'où l'erreur...

body{
    /*  pour centrer le contenu de la page = marge de 120px à gauche et à droite */
}
 
.bloc{
  width: 100%;
  min-width: 100%;    /* div qui englobe tout le formulaire ainsi que la mise en forme  */
  margin-left : 5%;
}

Remplace par ça.

Et pour tes formulaires pareils utilise des % pour la taille.

 form{
 }
 

 
label {
    display: inline-block;
    width: 70%;
    margin-top : 2%;
    text-align: center;
}
 
input, textarea {
    font: 1.3em arial;
    width: 70%;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: 1px solid #999;
    border-radius: 5px;
 
}

Remplace et ça devrais le faire... J'ai pas copié tout le CSS mais ce que j'ai supprimer dans chaque code est volontaire.

-
Edité par Kaidan 14 mars 2018 à 8:09:14

centrer formulaire d'inscription

centrer formulaire d'inscription

Supprimer

Modérer

Signaler le message aux modérateurs