28173 sujets

CSS et mise en forme, CSS3

bonjour,

je désire placer deux blocs l'un à coté de l'autre au sein d'un formulaire.
ces blocs sont de la forme suivante :

<label for="monInput">LABEL</label>
<input id="monInput" value="QQCH" />


j'ai cependant une contrainte d'alignement entre le label et l'input qui suit. cette contraite est exprimée en pourcentage de la div qui contient le tout.

en clair, je désirre faire cela :
|label0    |input0                   |
|label1    |input1                   |
|label2    |input2 |label3    |input3|
|label4    |input4 |label5    |input5|


mais j'obtiens un retour à la ligne entre input2 et label3 (et j'ai pourtant la place). j'ai pourtant

<p>
				<label for="codeBanqueRIB">
					RIB Prélèvement :
				</label>
				<input type="text" id="codeBanqueRIB" name="rib.codeBanque" maxlength="5" value="30003">
			</p>
			
			
			<div class="deuxColonnes">
				<p>
					<label for="dureeAdhesion" class="cont_ligne_intitule_8">Durée d'adhésion :</label>
					<input type="text" id="dureeAdhesion" name="dureeAdhesion" maxlength="2" value="08" readonly="readonly" class="unmodifiabled">ans
				</p>
				<p>
					<label for="dateVersement">Date de versement :</label>
					<input type="text" id="dateVersement" name="dateVersement" maxlength="10" value="19/09/2006" class="date unmodifiabled">
				</p>
			</div>


la CSS :

.deuxColonnes {
	clear: both;
	border: 0;
	padding: 0;
	margin: 0;
}
.deuxColonnes p {
	display: inline;
}


ps : la cible est IE6 Smiley decu
Salut demostene, Smiley cligne

En ce qui concerne ton problème d'aligenement, je te conseillerais la méthode qui suit :
Tu fais flotter les éléments par rapport au bord droit.
D'abord, tu places les input et ensuite, tu places les labels qui leur sont associés.
Pour les input 0 et 1, tu leur affectes une classe et une marge droite de 12% par exemple.
Et pour les input 3 et 5 tu affectes une marge de 5%.
Après, il ne te reste plus qu'à régler les valeur entre les input et les labels.

Voilà,
Cela fonctionne car j'ai eu exactement le même cas de figure pour un client.
Bon script Smiley biggrin