Discussion :

[Car0le]

Bonsoir à tous,


Je rencontre un petit problème que voici:



Donc j'aimerais espacer chacun de mes label+input mais je ne sais pas comment faire, j'ai essayé avec des marge mais je n'ai jamais obtenu ce que je voulais.

Voici mon code HTML:

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
<form method="post" id="myform">
	<fieldset class="cadre">
	<legend>Informations g&eacute;n&eacute;rales</legend>	
	<tr>
    <p class="marge"><label for="nom">Nom de l\'op&eacute;ration :</label>
    <input type="text" name="nom" id="nom" value="" disabled />
	<label for="code10">Code 10 :</label>
    <input type="text" name="code10" id="code10" value="" disabled />
	<label for="prio">Priorit&eacute; globale :</label>
    <input type="text" name="prio" id="prio" value="" disabled /></p>	
	</tr>							
	<tr>
	<p class="marge"><label for="inge">Ing&eacute; radio :</label>
    <input type="text" name="inge" id="inge" value="" disabled />
	<label for="CDPN">CPD N&eacute;go :</label>
    <input type="text" name="CDPN" id="CDPN" value="" disabled/>	
	<label for="CDPN">CPD Travaux :</label>
    <input type="text" name="CDPN" id="CDPN" value="" disabled/></p>
	</tr>
	<tr>
	<p class="marge"><label for="lotGSM">Lot GSM ADDOO :</label>
    <input type="text" name="lotGSM" id="lotGSM" value="" disabled />
	<label for="lotUMTS">Lot UMTS ADDOO :</label>
    <input type="text" name="lotUMTS" id="lotUMTS" value="" disabled/>	
	<label for="lotLTE">Lot LTE ADDOO :</label>
    <input type="text" name="lotLTE" id="lotLTE" value="" disabled/></p>
	</tr>
</fieldset>

Et voici mon 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
28
29
30
31
32
33
34
35
36
37
38
39
40
#bloc{
    display: table;
    table-layout: fixed;
}
#bloc > div{
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
 
.cadre {
    background-color: #ffffff;
    margin: 0 auto 15px auto;
    padding: 10px;
    border: 1.5px solid #9E9E9E;
 
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    behavior: url(border-radius.htc);
 
    background-image: -moz-linear-gradient(top, #ffffff, #f4f4f4);
	display:block;
 
    clear:none;
}
 
legend {
    color: #eeab69;
    font-size: 17px;
	font-weight:bold;
    padding: 0;
}
 
form#myform label { display:inline; }
form#myform input { display:inline; margin-bottom:10px;}
 
.marge {
margin:20px;
}

Désolé si c'est un peu sale mais je débute et j'étais préssé ^^

Merci de votre aide

[pc75]

Bonjour,

Et en insérant des   entre des label+input, ça ne te convient pas ?

[Phoeboe]

Oui tu peux faire comme a dit pc75.

En ce qui me concerne j'aime bien aligner les choses comme ça :

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
<link rel="stylesheet" type="text/css" href="style.css"   />
 
<form method="post" id="myform">
	<fieldset class="cadre">
	<legend>Informations g&eacute;n&eacute;rales</legend>	
        <table>
	<tr>
            <td><p class="marge"><label for="nom">Nom de l\'op&eacute;ration :</label></td>
            <td><input type="text" name="nom" id="nom" value="" disabled />&nbsp;&nbsp;</td>
            <td><label for="code10">Code 10 :</label></td>
            <td><input type="text" name="code10" id="code10" value="" disabled />&nbsp;&nbsp;</td>
            <td><label for="prio">Priorit&eacute; globale :</label></td>
            <td><input type="text" name="prio" id="prio" value="" disabled /></p>&nbsp;&nbsp;</td>	
	</tr>							
	<tr>
            <td><p class="marge"><label for="inge">Ing&eacute; radio :</label></td>
            <td> <input type="text" name="inge" id="inge" value="" disabled />&nbsp;&nbsp;</td>
            <td><label for="CDPN">CPD N&eacute;go :</label></td>
            <td>  <input type="text" name="CDPN" id="CDPN" value="" disabled/>&nbsp;&nbsp;	</td>
            <td><label for="CDPN">CPD Travaux :</label></td>
            <td> <input type="text" name="CDPN" id="CDPN" value="" disabled/></p>&nbsp;&nbsp;</td>
	</tr>
	<tr>
            <td><p class="marge"><label for="lotGSM">Lot GSM ADDOO :</label></td>
            <td><input type="text" name="lotGSM" id="lotGSM" value="" disabled /></td>
            <td><label for="lotUMTS">Lot UMTS ADDOO :</label></td>
            <td>  <input type="text" name="lotUMTS" id="lotUMTS" value="" disabled/></td>	
            <td><label for="lotLTE">Lot LTE ADDOO :</label></td>
            <td> <input type="text" name="lotLTE" id="lotLTE" value="" disabled/></p></td>
	</tr>
        </table>
</fieldset>

[Bovino]

Heu non... désolé pour pc75, mais il ne faut surtout pas faire comme il l'indique !

Faire de la mise en page à grands coups d'espaces insécables est la pire des solutions car elle est beaucoup trop figée, notamment de nos jours où la diversité des appareils susceptibles de lire un document Web explose.
Il faut utiliser les feuilles de style pour ce genre de chose, notamment avec les marges externes, les types de display ou autres.

[sourcilpower]

bonjour,

Je pense qu'en utilisant un tableau html tu devra t'en sortir facilement si tu es débutant sinon penche toi plutot sur le css en jouant avec les tailles

[black-hawk-down]

Non plus, les tableaux ne sont pas prévus pour ça !!!

Tu veux faire quoi exactement ?

Si c'est aligner les label et input, avec display inline-block et width tu devrais t'en sortir.

[sourcilpower]

Certe mais si il est débutant que c'est juste pour ce bout de code les tableau feront très bien l'affaire

[Bovino]

Un autre point de vue serait de considérer qu'un débutant cherche à apprendre et à s'améliorer et que lui conseiller des techniques obsolètes depuis plus de 10 ans ne rend service à personne.

[black-hawk-down]

Certe mais si il est débutant que c'est juste pour ce bout de code les tableau feront très bien l'affaire

C'est justement l'occasion d'apprendre, tu ne crois pas ?!

Parce qu'être débutant toute sa vie parce qu'on a choisi la facilité, ce n'est pas se rendre service.

[sourcilpower]

oui biensur j'ai juste proposer un solution rapide apres pour que ca soit propre il peut attribuer une class a tous ces labels et lui mettre une taille fix