input dans un display:table-cell

Version imprimable

11/05/2013, 17h20
theo17

input dans un display:table-cell
Bonjour,
Je voudrais faire ce formulaire de saisie qui suit, les tirets et les points ne sont là que pour remplacer des blancs qui ne s'affichent pas dans les messages du forum afin de ne pas avoir de décalage dans ma présentation.
Il n'y a que les traits horizontaux et verticaux autour des Select et Zones input qui doivent être des cadres.
```
---------------------------------------------------------------------------
|............................Titre caption ...............................|
---------------------------------------------------------------------------
|.................|...|.....Titre saisie 1.....|...|....Titre saisie 2....|
|--------------------------------------------------------------------------
| --------------- |...| ---------------------- |...| -------------------- |
| | Select 1a ..| |...| | Zone 1a input .....| |...| | Zone 2a input ...| |
| | Select 1b ..| |...| | Zone 1b input .....| |...| | Zone 2b input ...| |
| --------------- |...| | Zone 1c input .....| |...| | Zone 2c input ...| |
|.................|...| | Zone 1d input .....| |...| | Zone 2d input ...| |
|.................|...| | Zone 1d input .....| |...| | Zone 2d input ...| |
|.................|...| ---------------------- |...| | Zone 2e input ...| |
|.................|...| ...................... |...| | Zone 2f input ...| |
| Bouton 1 .......|...| ...................... |...| | Zone 2d input ...| |
| Bouton 2 .......|...| ...................... |...| -------------------- |
---------------------------------------------------------------------------
```
J'ai commencé par faire des div afin de positionner en css tous ces éléments, mais après avoir fait différents essais avec les block, inline, float, etc ... c'est la vrai galère et je n'y arrive pas.

Alors j'ai essayé les display: table, table-row et table-cell, et là j'ai pu obtenir, en les matérialisant avec des cadres provisoires, le bon emplacement de chacun des éléments avec leur largeur et hauteur
correspondantes à ce que j'ai déclaré dans le css, donc là tout va bien.

J'ai pu également placer le Titre caption et les Titre saisie où je voulais.

Mais lorsque j'ai voulu placer un select sur la colonne gauche et/ou un input sur la colonne du milieu, ces zones se placent automatiquement au milieu vertical de la pseudo cellule !! et de plus ma pseudo cellule se
retrouve avec une hauteur plus importante que celle que j'ai déclaré.

J'ai tout essayé avec des margin: 0, vertical-align: top, rien n'y fait.

Avez vous une idée pour placer ces premières zones tout en haut de la cellule ?? (note : un input suivant se place bien à la suite du précédent)

Et peut on faire un cadre tracé dans une cellule ?

Sinon je vais tout reprendre avec des position:absolute, mais je pense que ce n'est pas une bonne solution.
Merci de vos réponses.

Bon apparemment mon "dessin" ne s'affiche pas comme je le souhaitais, j'espère que vous comprendrez, 2 lignes en haut puis une troisième avec 3 colonnes

Et voilà le code que j'ai écrit :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
	<div id='conteneur'>
	  <div id='titrentete'>Titre entête
	  </div> 
	  <div id='titrechoix'>
            <div id='choixgauche'>
            </div>   
            <div id='choixintergauche'> 
            </div>  
            <div id='choixcentre'>Titre saisie 1 
            </div>  
            <div id='choixinterdroit'> 
            </div> 
            <div id='choixdroit'>Titre saisie 2
            </div> 
	  </div>   
	  <div id='saisiechoix'> 
            <div id='saisiegauche'> 
              <p><label id='enhaut' class='lab_gauche' for='type'>Type : </label> 
	      <select id='type' name=type>
                <option>toto</option>     
              </select></p>
	      <p><label class='lab_gauche' for='test'>Test : </label>
              <input id='test' name='test'>
            </div>
            <div id='saisieintergauche'> 
            </div> 
            <div id='saisiecentre'> 
		<p><label class='lab_gauche' for='test'>Test : </label> 
                <input id='test' name='test'> 
            </div> 
            <div id='saisieinterdroit'> 
            </div> 
            <div id='saisiedroit' 
            </div>");   
	  </div>
	</div>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
#conteneur {                 /* Conteneur div principal */
   display: table;
   width: 990px;
	height: 600px;
	border: 1px solid black;
	margin: 0 auto;
}
 
#titrentete {                 /* Conteneur div du titre entête */
   display: table-caption;
   width: 990px;
	height: 30px;
/*	border: 1px solid black;*/
	padding-top: 3px;
	padding-bottom: 3px;
	font-family: Mistral;
	font-size: 1.5em;
	text-align: center;
}
 
#titrechoix {                /* Conteneur div titre des choix */
   display: table-row;
   width: 990px;
	height: 20px;
	text-align : center;
/*	vertical-align: bottom;*/
	font-family: Mistral;
	font-size: 1.5em;
/*	border: 1px solid black;*/
	padding-top: 3px;
}
 
#choixgauche {               /* Conteneur div gauche titre des choix */
   display: table-cell;
   width: 250px;
	height: 20px;
/*	border: 1px solid black;*/
}
 
#choixintergauche {          /* Conteneur div inter gauche titre des choix */
   display: table-cell;
   width: 50px;
	height: 20px;
/*	border: 1px solid black;*/
}
#choixcentre {               /* Conteneur div centre titre des choix */
   display: table-cell;
   width: 320px;
	height: 50px;
/*	border: 1px solid black;*/
}
 
#choixinterdroit {           /* Conteneur div inter droit titre des choix */
   display: table-cell;
   width: 50px;
	height: 50px;
/*	border: 1px solid black;*/
}

Merci de vos lumières

11/05/2013, 18h26
theo17

En fait ma question se résume à :

Comment positionner un input ou un select dans une table-cell en css et que cette pseudo cellule conserve sa hauteur déclarée ??

Merci
11/05/2013, 20h47
rodolphebrd

Bonjour,

Je ne suis pas sûr de ne pas comprendre exactement ce que vous-voulez...

Peu-être qu'avec un exemple en ligne ou pris à partir d'un site je pourrais y voir plus clair. Ou épurer le code au maximum pour ne cibler que la question.

Attention un ID ne s'applique qu'à un seul élément, dans votre exemple il y a deux erreurs.

Dans le cadre des bonnes pratiques il est préférable d'utiliser les guillemets (") pour désigner les classes et les identifiants dans le code Html.

Salut,
Au niveau sémantique et accessibilité c'est pas une bonne idée de mettre un formulaire dans une table. D'ailleurs tu utilise des divs dans ton html et tu veux le formater en table dans ton css. C'est horrible. Voilà ton nouveau code html:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<h1>Titre entête</h1>
<form id=monForm>
  <h2>
      Titre saisie 1
  </h2>
  <h2>
      Titre saisie 2
  </h2>
  <label class=selectLabel>Type :
      <select name=typeA>
          <option>toto</option>
      </select>
  </label>
  <label>Test :
       <input name='test2a'>
  </label>
  <label>Test :
       <input name='test1a'>
  </label>
  <label class=selectLabel>Type :
      <select name=typeB>
          <option>toto</option>
      </select>
  </label>
  <label class=lastLabel>Test :
       <input name='test2b'>
  </label>
  <label>Test :
       <input name='test1b'>
  </label>
  <label class=lastLabel>Test :
       <input name='test2c'>
  </label>
  <label>Test :
       <input name='test1c'>
  </label>
  <label class=lastLabel>Test :
       <input name='test2d'>
  </label>
  <label>Test :
       <input name='test1d'>
  </label>
  <label class=lastLabel>Test :
       <input name='test2e'>
  </label>
  <label>Test :
       <input name='test1e'>
  </label>
  <label class=lastLabel>Test :
       <input name='testF'>
  </label>
  <input type=button value="Bouton 1">
  <label class=lastLabel>Test :
       <input name='testG'>
  </label>
  <input type=button value="Bouton 2">
</form>

Admet qu'on y voit plus clair ;) Et encore moi j'ai mis tous les éléments...
Puis ton css:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
#monForm{
    width: 650px;
}
 
#monForm h2{
    width: 210px;
    float: right;
}
 
#monForm label{
    width: 250px;
    float: right;
}
 
#monForm label.selectLabel{
    width: 150px;
    float: left;
    clear: both;
}
 
#monForm label.lastLabel{
    clear: right;
}
 
#monForm input[type="button"]{
    float: left;
}

Là encore c'est moins bordélique non?
@+

11/05/2013, 20h59
theo17

Bonsoir,
Merci de votre réponse,

Je n'ai pas de site et donc pas d'exemple en ligne à vous fournir.

Vous avez vu dans mon "dessin" (mal représenté du fait de la police employée) que j'ai plusieurs conteneurs à placer à différents endroits sur l'écran et dans lesquels je place des zones input, select, etc...

Du fait de la complexité de les placer à l'aide des css float, j'ai recouru aux css display:table, table-row et table-cell qui m'ont permis ce placement comme je le souhaitais.

Mais le problème que je trouve, c'est qu'en voulant commencer à mettre mes zones input à l'intèrieur des table-cell, l'essai du placement de la première zone me la place au beau milieu verticalement de la table-cell et de plus m'agrandit cette pseudo cellule, alors que je lui avait donné une hauteur définie.

Vous comprenez mieux mon problème avec ces explications ?
Merci beaucoup.
11/05/2013, 21h05
theo17

Bonsoir,

Merci à BPiero pour ce code que je vais essayer et je te tiens au courant.

J'avais voulu prendre ces css display:table devant la complexité des float left, right, etc pour ces différents blocks placés un peu partout sur l'écran et que je pouvais plus facilement contenir dans ce display:table.

C'est vrai qu'à première vue cela parait plus clair.
Merci et bonne soirée.
11/05/2013, 21h32
BPiero

Bon pour les float c'est simple:
-D'abord regardes bien le code que je t'ai fourni
-Voici les règles principales.
quand il n'y a pas de float on dit que les éléments sont "dans le flux", c'est à dire tout nouvel élément block est en dessous du précédent, et tout nouvel élément inline est à la suite (à droite avec saut de ligne) du précédent.
Un élément float left et "forcé à gauche" c'est à dire qu'il est poussé à fond à gauche dans son conteneur, et l'élément suivant "s'écoule le long" de celui-ci selon la place du conteneur (idem pour le right)
Si l'élément suivant est aussi un float left, alors il est forcé aussi à gauche à côté du premier (idem pour le right).
Pour que le flux redevienne normal, il faut le spécifier à l'élément suivant par un clear left (ou right, ou both pour les 2 en même temps)
Relis bien ce que je viens de te dire et re-relis le code, et tu pourra marquer la discussion comme résolue,
@+
11/05/2013, 21h34
BPiero

~~Les display table ne doivent être utilisées que sur les éléments table~~, qui elles mêmes ne doivent être utilisées que pour présenter des données tabulaires.
@+

Edit: Les display:table peuvent tout à fait être utilisées sur d'autres éléments que les tables (voir post de Candy Girl ci-dessous). Par contre les éléments table ont bien une portée sémantique.
11/05/2013, 22h02
theo17

Merci de ce petit rappel sur les float que j'avais déjà (un peu) assimilé, mais là avec tous ces blocs à placer un peu partout, j'avoue que je suis pommé.
Ils ne se touchent pas et ne sont pas forcément à la suite et non plus de la même hauteur.
Mais je vais m'y relancer, on verra bien.
Merci encore et bonne soirée.
12/05/2013, 12h40
Candygirl

Citation:

Envoyé par BPiero

Les display table ne doivent être utilisées que sur les éléments table, qui elles mêmes ne doivent être utilisées que pour présenter des données tabulaires.
@+

Le coupls html/css est formé pour s'occuper respectivement de la forme (sémantique) et de la mise en page (présentation) d'un document.

"display" est une propriété css; elle a donc un usage de mise en page et n'a pas de visée sémantique.

Je ne vois donc pas le problème d'utiliser un display:table sur un autre autre élément html que <table>.

Après, dans le cas précis, je ne me prononcerais pas sur la pertinence de l'utiliser ou non vu que je n'ai a trop capté le rendu final souhaité.
12/05/2013, 16h51
BPiero

Citation:

Envoyé par Candygirl

Le coupls html/css est formé pour s'occuper respectivement de la forme (sémantique) et de la mise en page (présentation) d'un document.

"display" est une propriété css; elle a donc un usage de mise en page et n'a pas de visée sémantique.

Je ne vois donc pas le problème d'utiliser un display:table sur un autre autre élément html que <table>.

Très bonne remarque, j'avoue que ça ne m'a même pas effleuré l'esprit, je pensais bêtement que les display:table n'étaient faits que pour les table. C'est donc plus par habitude de dev que je lui ai conseillé les floats. Je vais revoir mes habitudes...

Citation:

Envoyé par Candygirl

Après, dans le cas précis, je ne me prononcerais pas sur la pertinence de l'utiliser ou non vu que je n'ai a trop capté le rendu final souhaité.

C'était pertinent ou au moins semi pertinent, puisqu'il voulait présenter son formulaire de manière plus ou moins tabulaire. Enfin dans tous les cas, ça lui aura fait revoir les floats, qui restent irremplaçables la plupart du temps. De plus, ça lui aura fait virer tous ces divs inutiles. Merci, @+
12/05/2013, 17h39
theo17

Bonjour,

Je viens de terminer la mise en place de ces blocs et je n'ai employé, suivant votre conseil, que des float left et right et tout est bien en place.

Il faut bien définir auparavant sur un croquis tous ces blocs, même vide, bref faire un quadrillage complet, avec leur nom, leur dimension et leur flottement à faire, et là çà roule.

Donc çà marche avec les float et sans faire appel aux display:table.

Je n'ai plus qu'un petit souci, dans mes blocs où je fais de la saisie avec des input, je mets un label devant et malgré une width définie, les input se collent contre la fin mes textes comme si la largeur définie du label n'était pas pris en compte.

J'ai beau faire, comme j'ai vu sur plusieurs exemples, display:blok; width: **px; et float:left, çà ne marche pas et là de plus l'input se place sous le label.

Pourtant sur un autre programme j'avais tout simplement mis une largeur définie et les input se calaient bien à la fin de cette largeur, et là non, alors pourquoi ? est ce du aux float de tous ces blocs ?

Quel est la solution ?
Merci
12/05/2013, 17h50
BPiero
dans le code html que je t'ai passé j'ai mis les input dans les labels.
Il faut remplacer par

Code:

<label for=monInput><input id=monInput/>

puis en css
Code:

1 2 3 4 5 6 7 8 label{ display:inline-block; } input{ display:inline-block; margin-left:5px; }
Enfin c'est le principe, tu fais ça plus proprement et tu poste ton code
@+
Piero
12/05/2013, 18h05
theo17

Non c'est toujours pareil, les zones input se collent toujours à la fin du texte du label, et si je rajoute un width dans label, les zones input se placent sous le label.
Merci
12/05/2013, 18h20
theo17
Bon çà marche avec
Code:

1 2 3 4 5 label { display: inline-block; width: 100px; padding-left: 10px; }
et sans mettre quelque chose dans l'input,

Je retrouvais ma zone zone input en dessous à cause de la width trop importante !!

Merci encore et bonne soirée