dimensions et formulaires
Bonjour à tous,
J'ai un petit soucis avec un formulaire placé dans un header pour la connexion. C'est juste un petit truc pour apprendre et j'ai quelques difficultés.
Je fixe une largeur de 250 px à mon formulaire et aucune marge intérieure. Dans ce formulaire j'ai 2 input côte à côte dont j'ai défini la largeur à 120 px avec un espace de 10 px entre les 2 ce qui donne un total de 250 px.
Pourquoi mes champs input se retrouvent l'un en dessous de l'autre dans ce cas ?
Voici mon code source :
Code:
1
2
3
4
5
6
7
8
9
10
11
| <div id="header">
<img class="logo" src="logo.png" />
<form action="#" method="post">
<input class="pseudo" type="text" name="pseudo" placeholder="pseudo" />
<input class="mot-de-passe" type="password" name="mot-de-passe" placeholder="mot de passe" /><br />
<a href="#">Mot de passe oublié ?</a>
<input class="connexion" type="submit" name="connexion" value="Connexion" />
</form>
</div> |
Code:
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
| body {
margin: 0;
padding: 0; }
#gabarit {
width: 990px;
margin: 0 auto; }
#header {
background-color: #789EB5;
height: 130px; }
#header .logo {
float: left;
background-color: black; }
form {
margin-left: 740px;
background-color: red;
width: 250px;
padding: 0px; }
form a {
font-size: 10px;
margin: 0px;
width: 100px;
background-color: yellow; }
#header form .pseudo {
width: 120px;
margin: 0px; }
#header form .mot-de-passe {
width: 120px;
margin: 0px 0px 0px 10px; }
#header form .connexion {
width: 120px;
margin: 0px 0px 0px 10px; } |
Je vous remercie :)
