Mise en forme "tableau" en css (pas en html)

Version imprimable

Bonjour,

J'aimerai mettre un forme un formulaire, mais sans utiliser de tableau en html, donc juste passer par du CSS.

Voilà en gros ce que j'aimerai obtenir :
http://images4.hiboox.com/images/461...3ece26e72d.png

avec un html ayant pour modèle :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <body> <div class="FIELD_1_CRITERIA"> <div class="FIELD_1_LABEL">Num :</div> <div class="FIELD_1_SIGN"><select id="Select1"><option>></option><option>=</option></select></div> <div class="FIELD_1_CONTROL"><input id="Text1" type="text" /></div> </div> <div class="FIELD_2_CRITERIA"> <div class="FIELD_2_LABEL">Date dispo :</div> <div class="FIELD_2_SIGN"><select id="Select2"><option>Between</option></select></div> <div class="FIELD_2_CONTROL"><input id="Text2" type="text" /></div> <div class="FIELD_2_CONTROL"><input id="Text3" type="text" /></div> </div> [...] <div class="FIELD_N_CRITERIA"> <div class="FIELD_N_LABEL">Code Rejet :</div> <div class="FIELD_N_SIGN"><select id="Select3"><option>></option><option>=</option></select></div> <div class="FIELD_N_CONTROL"><input id="Text4" type="text" /></div> </div> </body>
J'ai essayé un paquet de solution, mais rien qui ne convienne...

Mettre les labels en float:left, les controls en float:right, et centrer les signes. Le problème c'est que les signes ne sont alors plus alignées les uns par rapport aux autres.

J'ai donc pensé à les centrer avec le css suivant :
Code:

1 2 3 4 5 6 7 8 9 position:absolute; top:50%; left:50%; width:80px; margin-left: -40px; height:24px; margin-top: -12px;
mais la solution n'est pas idéale, car ils sont au milieu du champs, et non centrés entre les labels et les controls.

Je ne peux pas utiliser de taille fixe, parce que le code html est généré dynamiquement en fonction de donnée dans une base. Je ne peut donc pas savoir à priori ce qu'il va y avoir dans ma page exactement.

La longueur du texte des labels est très variable, tout comme la taille des controls qui ne seront pas uniquement des textInputs, mais qui peuvent être des controls personnalisés variés

Je suis ouvert à toute piste intéressante!!

Merci pour votre aide

16/11/2010, 18h41
franculo_caoulene

Salut,

Une petite recherche avant de poster aurait été la bienvenue : Contribuez à la galerie CSS
16/11/2010, 21h36
toopac

Merci pour le lien, mais avant de poster j'ai fais quand même quelques recheches, et je connais bien la galerie pour l'avoir parcouru plusieurs fois.
Seulement il n'y a aucun exemple de mise en forme de formulaire qui correspond à mon problème.
Il sont tous en taille fixe, et n'ont que deux "colonnes".

Ce que je voudrais c'est d'aligner les "labels" à gauche des "signes" et les "controls" à droite (des signes toujours), le tout sans jamais avoir a fixer une taille.
17/11/2010, 11h31
franculo_caoulene

Salut,

Comment veux-tu aligner les colonnes sans les dimensionner? Ce n'est pas possible.
Par contre, on voit bien qu'il y a une colonne de libellés, puis d'opérateurs, puis de champs de saisie. Ce sont donc bien des données tabulaires, l'utilisation d'un tableau est justifiée.

Citation:

Envoyé par franculo_caoulene

Comment veux-tu aligner les colonnes sans les dimensionner? Ce n'est pas possible.

je ne suis qu'un débutant, donc je venais ici pour savoir si c'était possible. Apparemment non, donc je suis partit sur une autre voie.

j'ai utilisé un coup de javascript pour donner à mes div la bonne taille.

Et maintenant ça fonctionne, sans utiliser un tableau. L'intérêt c'est que les critères s'affichent sur 1, 2, 3, ... colonnes en fonction de la taille de la fenêtre.

En tout cas merci de t'être penché sur mon problème! :ccool:

Voilà donc le code complet si ça peut servir à d'autres.

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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
  <head>
    <title>Test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link rel="stylesheet" media="screen" type="text/css" title="Design" href="test.css" />
    <script type="text/javascript" src="jquery-1.4.4.min.js"></script>
    <script type='text/javascript'>
      var maxLabelWidth = -1;
      var maxSignWidth = -1;
      var maxCriteraWidth = -1;
 
      $(function() {
 
        //récupération de la taille du plus grand label
        $('div[type="label"]').each(function() {
          if ($(this).width() > maxLabelWidth) {
            maxLabelWidth = $(this).width();
          }
        });
        //modification de la taille des labels à la valeur précédement trouvée
        $('div[type="label"]').width(maxLabelWidth + 1); //+1: bug FF
 
        //récupération de la taille du plus grand signe
        $('div[type="sign"]').each(function() {
          if ($(this).width() > maxSignWidth) {
            maxSignWidth = $(this).width();
          }
        });
        //modification de la taille des signes à la valeur précédement trouvée
        $('div[type="sign"]').width(maxSignWidth);
 
        //récupération de la taille du plus grand critère
        $('div[type="critera"]').each(function() {
          if ($(this).width() > maxCriteraWidth) {
            maxCriteraWidth = $(this).width();
          }
        });
        //modification de la taille des critères à la valeur précédement trouvée
        $('div[type="critera"]').width(maxCriteraWidth);
        $('div[type="critera"]').css({ "min-width": maxCriteraWidth });
 
      });
    </script>
  </head>
  <body>
    <div class="SUPER_DIV">
      <div class="Critera" type="critera">
        <div class="label" type="label"><label>Cote Arch :</label></div>
        <div class="sign" type="sign"><select id="Select4"><option>></option><option>=</option></select></div>
        <div class="control"><input id="Text6" type="text" /></div>
      </div>
      <div class="Critera" type="critera">
        <div class="label" type="label"><label>Date dispo :</label></div>
        <div class="sign" type="sign"><select id="Select5"><option>></option><option>=</option></select></div>
        <div class="control"><input id="Text17" type="text" /></div>
      </div>
      <div class="Critera" type="critera">
        <div class="label" type="label"><label>Statut :</label></div>
        <div class="sign" type="sign"><select id="Select6"><option>></option><option>=</option></select></div>
        <div class="control"><input id="Text15" type="text" /></div>
      </div>
      <div class="Critera" type="critera">
        <div class="label" type="label"><label>Code Rejet :</label></div>
        <div class="sign" type="sign"><select id="Select7"><option>Between</option></select></div>
        <div class="control"><input id="Text7" type="text" /></div>
        <div class="control"><input id="Text13" type="text" /></div>
      </div>
      <div class="Critera" type="critera">
        <div class="label" type="label"><label>Etat :</label></div>
        <div class="sign" type="sign"><select id="Select8"><option>></option><option>=</option></select></div>
        <div class="control"><input id="Text8" type="text" /></div>
      </div>
      <div class="Critera" type="critera">
        <div class="label" type="label"><label>Etat :</label></div>
        <div class="sign" type="sign"><select id="Select1"><option>></option><option>=</option></select></div>
        <div class="control"><input id="Text1" type="text" /></div>
      </div>
      <div class="Critera" type="critera">
        <div class="label" type="label"><label>Etat :</label></div>
        <div class="sign" type="sign"><select id="Select2"><option>></option><option>=</option></select></div>
        <div class="control"><input id="Text2" type="text" /></div>
      </div>
    </div>
  </body>
</html>

et le 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
.SUPER_DIV
{
  float:left;
}
 
.Critera
{
  float:left;
}
 
.label
{
  float:left;
  text-align:right;
}
 
.sign
{
  float:left;
  text-align:center;
}
 
.control
{
  float:left;
}