Discussion :

[yaya0057]

Bonsoir,
Tout d'abord le code:

Code :

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

1
2
3
4
5
6
7
 
<div id='principal'>
	<div class='field'>
		<div class='lib'>Nom :</div>
		<div class='val'><input type='text' name='nom' value='".$row['nom_entreprise']."' disabled></div>
	</div>
</div>

Je désire que le champs <div class='lib'> et le <div class='val'> se suivent, c'est à dire qu'il soit l'un derrière l'autre dans la page web.
Le css ci dessous le permet, mais je n'arrive pas à dimensionner les div class='lib' et class='val'

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
 
#principal {
border:1px solid #CC3300;
margin-left:10px;
width:430px;
}
 
.field {
border:1px solid #FFFFFF;
font-weight:bold;
height:25px;
padding-top:5px;
width:430px;
}
 
.lib {
border:1px solid #000000;
display:inline;
width:200px;
}
 
.val {
border:1px solid #0000FF;
margin-left:130px;
margin-top:-20px;
width:175px;
}

Merci

[blueice]

Quelle est ta question ?

[Kerod]

Il y a éventuellement cette solution avec l'utilisation de span :

Code html :

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

1
2
3
4
5
<div id='principal'>
    <div class='field'>
        <span class='lib'>Nom :</span>
        <span class='val'><input type='text' name='nom' value='".$row['nom_entreprise']."' disabled /></span>
    </div>

et css :

Code css :

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
#principal {
border:1px solid #CC3300;
margin-left:10px;
width:430px;
}
 
.field {
border:1px solid #FFFFFF;
font-weight:bold;
height:25px;
padding-top:5px;
width:430px;
}
 
.lib {
border:1px solid #000000;
width:200px; 
display:block;
float: left;
}
 
.val {
border:1px solid #0000FF;
width:175px;
display:block;    
float: left;
}

Il te restera plus qu'à mettre un espace entre les deux blocs si tu le souhaites

[_Mac_]

Je fais un truc plus ou moins similaire en ce moment :

Code :

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

1
2
3
4
5
6
<div id='principal'>
  <div class='field'>
    <label>Nom :</label>
    <input type='text' name='nom' value='".$row['nom_entreprise']."' disabled />
  </div>
</div>

Avec un 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
#principal {
    border:1px solid #CC3300;
    margin-left:10px; width:430px;
}
 
.field {
    border:1px solid #FFFFFF;
    font-weight:bold;
    height:25px;
    padding-top:5px;
    width:430px;
}
 
.lib label {
    border:1px solid #000000;
    width:200px;
    float: left;
}
 
.lib input {
    border:1px solid #0000FF;
    width:175px;
}

L'intérêt c'est que t'es pas obligé de donner une classe pour le libellé et l'input.

[mLk92]

c'est moi où vous avez oubliez que la balise

Code :

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

<p></p>

existe ?

essai

Code :

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

1
2
3
4
5
6
<div id='principal'>
  <div class='field'>
    <p><label accesskey='N'>Nom :<input type='text' name='nom' value='".$row['nom_entreprise']."' disabled /></label></p>
  </div>
</div>

le accesskey te permettra d'aller à ton champ via un alt+N, ca semble un peu gadget mais c'est utile si t'a plusieurs champ.

En espérant que ça t'aide

[Kerod]

On a pas oublié qu'elle existe. Mais c'est bien de préciser que l'on peut également l'utiliser. Mais dans son cas il va falloir rajouter un effet de style sur cette dite balise pour retirer les effets de marge qui lui sont propre

[mLk92]

vi c'est exacte, Mac tu peux essayé ceci pour évité les effets de marge :

Code :

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

p.field{ margin: 0; }

[speedev]

De mon côté je préconise comme _Mac_ ce type de code:

Code :

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

1
2
3
 
<label for="id_texte1">texte1</label>
<input type="text" id="id_texte1" name="chp_texte1" />

Et d'ailleurs...

Petit à petit j'avoue considérer un formulaire comme un concentré de données "tabulaires" et à commencer à les REstructurer en tableaux. Jusque ici et depuis longtemps je suis un fondu du FULLCSS avec des tableaux utilisés uniquement pour les données tabulaires (statistiques dirais-je).

Je pense que j'aime bien l'hétérogénéité du code pourvu qu'on distingue correctement les Blocs structurés (pour l'interface) des Tableaux (pour les données tabulaires). Après une loooongue cure de FULLCSS, les tableaux me sont très agréables à REmanipuler pour des formulaires de saisie, moyennant du CSS nickel et aucun attributs polluant les balises, ne soyons pas idiot non plus! ^^

Tout un débat...comme d'hab...chacun son truc..

a+