Discussion :

[brizy]

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 :

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

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 css :

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
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

[NoSmoking]

Bonsoir,
oui mais c'est sans compter la bordure naturelle des éléments INPUT et le white-space qui se glisse entre les deux.
Dans ton code écrit le code à la suite

Code :

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

<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 />

et supprime la border, tout devrait rentrer dans l'ordre.

[brizy]

Merci pour ta réponse, je vais essayer de supprimer le "border" et je te tiens au courant