[Résolu] Alignement de 2 champs de formulaire

Bonjour,
J'ai des problèmes pour aligner deux champs

Dans le lien http://dev.meteo-magazine.com/test-forum

Comment aligner le champ de saisi pour le montant avec la case à cocher "don"?
J'essaie de m'y retrouver avec Firebug, mais sans succès.
Que dois-je ajouter dans ma feuille de style?
Modifié par sahuni (29 Oct 2011 - 16:13)

Est-ce que si je mets un display inline sur l'élément montant, ça règlerait mon problème?
Comment cibler cet élément?

bonjour Sahuni,

regardes ton code :

d'un montant de </label>

</div>
</div>
</div>
<div class="form-item webform-component webform-component-textfield" id="webform-component-montant">
 <input type="text" id="edit-submitted-montant" name="submitted[montant]" value="" size="6" maxlength="6" class="form-text" />
</div>

l'élément input est naturellement "en ligne" et non "block". y a pas moyen de nettoyer tous ces "div" dont la plupart sont d'ailleurs...vides?

Merci pour ton aide,

Il s'agit d'un thème créé avec le logiciel Artisteer, et si ça facilite la création du thème, c'est la croix et la bannière pour s'en servir. J'exporte pour Drupal. Je crois bien que c'est la dernière fois que j'utilise Artisteer car il faut tout le temps revenir au css, et comme ce n'est pas propre, je sue! Ah, j'aimerais maitriser!

Alors c'est impossible à faire?
Ou c'est plutôt un float left dont j'ai besoin? Que mettre dans mon CSS pour atteindre ce champ?

humm....pourquoi vouloir corriger les css quand le code html est déjà malade?

sans toucher aux css :

<div class="art-postcontent">
<form class="webform-client-form" enctype="multipart/form-data" action="/test-forum" method="post" id="webform-client-form-62" accept-charset="UTF-8"><div><div class="form-item webform-component webform-component-checkboxes" id="webform-component-don">
 <div id="edit-submitted-don" class="form-checkboxes"><div class="form-item form-type-checkbox form-item-submitted-don-1">
 <input type="checkbox" id="edit-submitted-don-1" name="submitted[don][1]" value="1" class="form-checkbox" />  <label class="option" for="edit-submitted-don-1">Je fais un don d'un montant de </label>
 <input type="text" id="edit-submitted-montant" name="submitted[montant]" value="" size="6" maxlength="6" class="form-text" />
</div>

même si le code passe au validateur w3c, qui n'est qu'un outil et rien d'autre, il faut aussi de visu regarder sa "sémantique", non?

les bouts de code de ta page là sont sûrement à revoir ou bien? enfin simplifier quoi....

<div class="form-actions form-wrapper" id="edit-actions"><span class="art-button-wrapper"><span class="art-button-l"></span><span class="art-button-r"></span><input type="submit" id="edit-submit" name="op" value="Submit" class="form-submit art-button" /></span></div></div></form>
</div>
<div class="cleared"></div>

</div>

		<div class="cleared"></div>
    </div>
</div>

</div>
	</div>  </div>
  </div>
</div>

ou encore?

<div class="more-link">
  <a href="/news">
    En savoir plus  </a>
</div>
  
  
  
</div> 
	
		</div>
				<div class="cleared"></div>
		    </div>
		</div>
		

				<div class="cleared"></div>
		    </div>
		</div>
		
	</div>  </div>
</div>
        </div>
    </div>
</div>
<div class="cleared"></div>

la <div> bouteille, peut importe le flacon pourvu qu'on ait l'ivresse

sans parler des multiples feuilles de styles et JavaScript pour une page relativement simple.
Modifié par FloydinBremen (29 Oct 2011 - 14:44)

Pour parvenir à mes fins, j'ai mis ma phrase "je fais un fon de..." comme label et non comme un bouton radio, ce qui me permet d'avoir l'alignement. C'était une erreur de conception qui me compliquait la vie.

Le code est généré par le module webform de drupal, moins pur que du codage PHP maison. Si en plus je me complique la vie en créant mes champs de formulaire, ça devient impossible.

Merci pour les remarques justifiées
Bonne fin de semaine
Sahuni