Discussion :

[reeda]

Bonjour tout le monde,

j'ai visité des dizaines de sites, et lu plusieurs tutoriels, mais j'ai pas arrivé à résoudre mon problème avec CSS,

je voudrais positionner correctement une petit formulaire avec login et password, et une image qui va servir de bouton "Submit". comme suit :


Voici le 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
<div id="gauche_form">
        <!-- Partie Login -->
        <form action="session_login.php" method="post">
            <span class='ligne'>
            	<label>Login : </label>
                <input  type="text" name="login" size="15" maxlength="30" />
            </span>
			<span class='ligne'>
            	<label>Mot de passe : </label>
                <input type="PASSWORD" name="passwd" size="15" maxlength="10" />
                <input type="image" src="images/plan.png"  class="image" value="" />
            </span>
        </form>   
    </div>

et voici le code 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
24
25
26
27
28
 
#gauche_form {
	text-align:left;
	font-size:14px;
	padding-left:6px;
	padding-top:10px;
	padding-bottom:10px;
	font-weight:bold;
}
 
#gauche_form label {
  display: inline;
  float: left;
  width: 100px;
  } 	
 
#gauche_form input {
	border-color:#4F81BD;
	font-family:CALIBRI, Arial, Helvetica, sans-serif;
	color:#4F81BD;
	font-size:14px;
}
 
.image {
	/*padding-right:60px;*/
	float:right;
	display:inline;
}

je ne sais pas quoi faire, ca ne veut pas se positionner comme je veux

Merci d'avance
Bien cordialement

[Erwan31]

Bonsoir,
tu ne précises pas le résultat que tu souhaiterais obtenir mais je suppose que le bouton de validation doit se trouver au dessus du dernier champ.
Voici le code corrigé: le label sans le couple for/id -le for du label doit correspondre à l'id de l'input) n'a aucun sens puisqu'il n'apporte rien à l'utilisateur. Les éléments ne peuvent avoir comme enfant direct que des éléments de niveaux bloc (div, p...)

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
        <form action="session_login.php" method="post">
<div>
            <p class="ligne">
            	<label for="login">Login : </label>
                <input  type="text" name="login" id="login" size="15" maxlength="30" />
            </p>
			<p class="ligne">
            	<label for="passwd">Mot de passe : </label>
                <input type="PASSWORD" name="passwd" size="15" maxlength="10" id="passwd" />
            </p>
                <input type="image" src="images/plan.png"  class="image" value="" alt="valider" />
</div>
        </form>

Le display:inline de .image dans ta CSS est superflu puisque tu n'as pas de margin-right. Des explications (en)
Ne pas oublier d'ajouter un alt à l'input de type image (valider).