[Résolu] Problème d'alignement vertical et formulaire

Hello,

J'essaye désespérément d'ajouter une phrase explicative alignée à mes entrées de formulaire.

Le problème : l'alignement vertical n'est pas bon, la phrase se trouve bien après le champ text mais un cran en dessous.

Partie HTML :

        <fieldset id="info_perso_field">                 
            <p>
                <label for="name">Nom :</label>
                <input type="text" name="nom" id="nom" />            
            </p>
            
            <p>
                <label for="prenom">Pr&eacute;nom :</label>
                <input type="text" name="prenom" id="prenom" />            
            </p>   
            
            <p>
                <label for="email">Votre adresse email :</label>
                <input type="text" name="email" id="email" /><span class="small"> (Elle ne sera utilis&eacute; que pour vous r&eacute;pondre)</span> 
            </p>
        </fieldset>

Partie CSS :

fieldset {
	background-color:#F4F5F2;
	border:1px solid #E9EBE6;
	padding:10px 10px 0 10px;;
}

input {
	margin: 0 0 12px 5px;
	height:15px;width:150px;
	border:1px solid #DDDFDA;
	background-color:#F9FAF7;
	padding:3px;
}

label {
	float:left;
	text-align:right;
	width:25%;
}

.small {
	font-size:10px;
}

Screenshot du rendu et problème :
[img=http://img462.imageshack.us/img462/4041/formfy7.th.jpg]

Merci de votre aide.
Modifié par Tong (12 Jun 2007 - 18:33)

Salut.

Sûrement les input qui doivent être en float:left ou en display:inline.

Mais avec juste le code php à disposition, difficile de t'aider...

Non, tout le code y est.
Le php ne fait que générer des inputs mais n'agit pas sur le style.

La seule chose qui est en float:left, ce sont les labels.

Les inputs sont eux en flux normal.

EDIT : j'ai enlevé le code Php, plus d'excuse pour ne pas m'aider
Modifié par Tong (12 Jun 2007 - 16:24)

Re.

Du coup je pencherais plutôt pour le br qui provoque un retour à la ligne. C'est même là sa seule et unique fonction...
Modifié par <nicolas> (12 Jun 2007 - 16:32)

hehe, non c'est une erreur.

J'ai mis le texte en dessous de l'input en attendant de trouver une solution, et j'ai oublié d'enlever ce br en collant le code ici.

Et le float:left ou le display:inline sur l'input ne fonctionnent pas non plus?

Merci.

Ca marche en passant les input en float:left. (donc ce que tu disait dès le premier post )

Je suis du coup obligé de mettre un div en clear:both entre chaque input, c'est pas très élégant et un peu lourd mais ça a le mérite de marcher.

Tong a écrit :
Je suis du coup obligé de mettre un div en clear:both entre chaque input

Oulala ! Tout de suite les grands maux !
1) Le clear tu peux le mettre sur tes <p>, ils existent déjà, donc autant s'en servir.
2) Si tu mets une étiquette après chaque input, t'as même pas besoin de faire quoi que ce soit puisqu'elles ne sont pas floattées.

Ou alors tu ne fais flotter que les input qui ont une raison de flotter, à savoir justement ceux qui ont une étiquette.