Discussion :

[theo17]

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

[theo17]

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[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

[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.

[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.

[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.

[BPiero]

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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?
@+