Hello les gens,



J'appelle votre aide today pour un problème qui m'embête beaucoup !



Je dois faire un petit formulaire suivant une charte graphique (voir capture).



Je parviens à le créer de cette forme etc, mais je n'arrive pas à faire en sorte que les deux champs (adultes et enfants) suivis du input number restent de la même taille que les champs au-dessus.



Toute ma structure est sous forme de table, table row table cell.



Ma question n'est pas de comprendre pourquoi mon code ne fonctionne pas (car ça je sais) mais de comprendre comment je dois structurer pour que les deux éléments ensembles garde la même taille que les éléments seuls (en gros, que adultes + input number après garde la même taille que le champ DEPART au dessus, lors de responsive)



Je sais que la solution va être avec des table, row et cell, mais je n'arrive pas à imaginer la structure là .-.



Merci à vous !

-
Edité par Haidz 6 juin 2018 à 11:30:52

Bonjour,

Désolé de te décevoir mais la solution est de se passer de la mise en page en tableaux...

En effet c'est une solution qui ne répond plus à aucune norme et est dépréciée depuis le milieu des années 90.

Pour le reste, impossible de t'aider sans voir ton code... 

Hello,

Merci de la réponse .

Comme indiqué, je ne recherche pas une erreur dans le code car il n'y a pas le code.

Je ne vois pas comment structurer cette partie avec l'input et le number qui vont s'adapter ensemble, donc je ne vais pas écrire l'html / css sans imaginer la structure en amont ^^'.

Sans les input number, j'arrivait à faire la structure (en table) mais du coup, si je dois pas utiliser les table, je vois pas comment faire :/

-
Edité par Haidz 6 juin 2018 à 11:42:04

Salut,

Le truc c'est de mettre une taille fixe au number et d'appliquer le même style aux labels et aux inputs.

Pour un meilleur comportement, tu peux passer le groupe des deux en display:flex ou display:table.

Voilà un exemple : https://jsbin.com/foxipavuho/edit?html,css,output

Et voici le code en direct :

  <form action="">
    <div class="form-col">
      <div class="form-group">
        <input class="form-control" type="text" placeholder="Nom & prénom">
      </div>
      <div class="form-group">
        <input class="form-control" type="text" placeholder="Nom & prénom">
      </div>
      <div class="form-group">
        <input class="form-control" type="text" placeholder="Nom & prénom">
      </div>
    </div>

    <div class="form-col">
      <div class="form-group">
        <input class="form-control" type="text" placeholder="Départ">
      </div>

      <div class="form-group form-number">
        <div class="form-number-label">
          <label class="form-control" for="adult">Adulte</label>
        </div>
        <div class="form-number-value">
          <input class="form-control" type="number" id="adult" value="0">
        </div>
      </div>

      <div class="form-group form-number">
        <div class="form-number-label">
          <label class="form-control" for="child">Enfant</label>
        </div>
        <div class="form-number-value">
          <input class="form-control" type="number" id="child" value="0">
        </div>
      </div>
    </div>
  </form>

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  background-color: #f7d5d3;
}

.form-col {
  width: 100%;
  padding: 15px;
}

.form-group {
  width: 100%;
  margin-bottom: 10px;
}

.form-control {
  display: block;
  padding: 10px 5px;
  width: 100%;
  font-size: .75rem;
  font-family: sans-serif;
  text-transform: uppercase;
  color: #000;
  background: #FFF;
  border: 0;
}

::-webkit-input-placeholder {
  color: #CCC;
}
::-moz-placeholder {
  color: #CCC;
}
:-ms-input-placeholder {
  color: #CCC;
}
:-moz-placeholder {
  color: #CCC;
}

label.form-control {
  color: #CCC;
}

.form-control[type=number] {
  text-align: center;
}

.form-number {
  display: table;
}

.form-number-label {
  display: table-cell;
  padding-right: 5px;
}

.form-number-value {
  display: table-cell;
  width: 50px;
  padding-left: 5px;
}

@media(min-width : 450px) {
  .form-col {
    width: 33%;
    float: left;
  }
}

-
Edité par BVGraphiste 6 juin 2018 à 12:18:36

Woua merci ! C'est exactement ce que je cherche à faire (j'ai juste testé et c'est top ! )



Je vais regarder ce que tu as fait et m'aider de ça !



Je reviens une fois que j'ai assimilé le truc pour indiquer où j'en suis :)