Alignement de champs sur ma page de connexion

**sandaff** · 04/12/2015, 21h20

Bonjour;

j'ai un probleme sur cette page;

-je veux aligner les champs pseudo, mot de passe sur la meme ligne en haut de la page.

-les champ dans la partie inscription en bas et à droite.

- ma photo en bas et à gauche.

voici le code:

Code html :

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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<!DOCTYPE html>
<html lang="fr">
 
    <head>
 
        <meta charset="utf-8">
        <title>Mon site</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="Connexion à mon site">
        <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
        <!-- ci-dessous notre fichier CSS -->
        <link rel="stylesheet" type="text/css" href="/css/app.css" />
        <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans:400,300" />
        <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Lato:400,700,300" />
        <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
        <script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
 
        <link rel="stylesheet" href="css/font-awesome.min.css">
     <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/app.css" rel="stylesheet">
 
    </head>
    <body>
    <div class="container">
<div class="row">
<div class="col-xs-12">
 
    <div class="main">
 
        <div class="row">
        <div class="col-xs-12 col-sm-6 col-sm-offset-1">
        <div class="photo_site">  </div>         
            <h1>Connectez-vous</h1>
 
            <form action="inscrire2.php" name="login" role="form" class="form-horizontal" method="post" accept-charset="utf-8">
                <div class="form-group">
                <div class="col-md-8"><input name="pseudo" placeholder="Idenfiant" class="form-control" type="text" id="pseudo"/></div>
                </div>
 
                <div class="form-group">
                <div class="col-md-8"><input name="mot_de_passe" placeholder="Mot de passe" class="form-control" type="password" id="mot_de_passe"/></div>
                </div>
                <div class="col-md-8"><input type="checkbox" name="connection_automatique" id="connection_automatique"/> <label for="connection_automatique">Connexion automatique</label><br/>
                </div>
                <div class="form-group">
                <div class="col-md-offset-0 col-md-8"><input  class="btn btn-success btn btn-success" type="submit" value="Connexion"/></div>
                </div>
 
            </form>
             <form action="inscrire.php" method="post" name="Inscription">                   
                <fieldset><legend>Vous n'êtes pas inscrit</legend>
                    <label for="pseudo" class="float">Pseudo :</label> <input type="text" name="pseudo" id="pseudo" size="20" value="<?php echo (!empty($_POST['pseudo']))? htmlspecialchars($_POST['pseudo'], ENT_QUOTES): NULL ; ?>" /><br />
                    <label for="mot_de_passe" class="float">Mot de passe :</label> <input type="password" name="mot_de_passe" id="mot_de_passe" size="20" value="<?php echo (!empty($_POST['mdp']))? htmlspecialchars($_POST['mdp'], ENT_QUOTES): NULL ; ?>" /> <br />
                    <label for="mdp_verif" class="float">Mot de passe (vérification) :</label> <input type="password" name="mdp_verif" id="mdp_verif" size="20" value="<?php echo (!empty($_POST['mdp_verif']))? htmlspecialchars($_POST['mdp_verif'], ENT_QUOTES): NULL ; ?>" /><br />
                    <label for="email_personne" class="float">Mail :</label> <input type="text" name="email_personne" id="email_personne" size="20" value="<?php echo (!empty($_POST['mail']))? htmlspecialchars($_POST['mail'], ENT_QUOTES): NULL ; ?>" /> <br />
                    <label for="mail_verif" class="float">Mail (vérification) :</label> <input type="text" name="mail_verif" id="mail_verif" size="20" value="<?php echo (!empty($_POST['mail_verif']))? htmlspecialchars($_POST['mail_verif'], ENT_QUOTES): NULL ; ?>" /><br />
                    <input type="checkbox" name="charte" id="charte"/> <label for="charte">J'accepte les conditions et les règles d'utilisation de ce site.</label><a href="charte.php" style="text-decoration:none">Lire la charte</a><br/>
 
                </fieldset>                  
                <div class="center"><input type="submit" value="Validé" /></div>
                </form>
 
        </div>
        </div>
 
    </div>
</div>
</div>
</div>
    </body>
</html>

le code css:

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
40
41
42
43
44
45
46
body {
    background:rgb(209,181,175);
    font-family: 'Open Sans';
    font-weight: 300;
}
.main {
 
    background-size: contain;
    padding: 80px 20px 20px;
    margin-top: 120px;
    background: white url(../images/daf1.1.jpg) right no-repeat;
}
@media only screen and (max-width : 992px) {
    .main {
       background:rgb(56,7,47);
        margin-top: 5px;
    }
}
.photo_site{
         background: white url(../images/daf1.1.jpg) right no-repeat;
        margin-top: 5px;
    }
h1 {
    font-family: 'Lato', sans-serif;
    font-weight: 300;
    color:red;
    margin-bottom: 0;
}
 
form {
    margin-left: 5px;
}
input.form-control , input[type="submit"] , .btn {
    border-radius: 0px;
}
.btn {
    transition: all ease-in-out 0.2s;
}
.credits {
    margin-top: 100px;
    color: #999;
    font-size: 12px;
}
.credits a {
    color: inherit;
}

merci pour votre aide

**undead001** · 05/12/2015, 19h32

Bonjour,

Je pense que là ce sont les bases du html et css qu'il faudrait reprendre (sans vouloir t’offenser).

En effet le problème vient du caractère block des div.
dans le css pour le pseudo etc sur la même ligne tu peux ajouter par exemple:

Code :

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

1
2
3
form.form-horizontal div {
  display :inline-block;
}

Ensuite pour faire aller a droite des éléments, tu peux ajouter le caractère flottant d'un élément :

Code :

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

float:right;

Cordialement

**sandaff** · 07/12/2015, 14h23

Mais je ne vois pas d'effet;
j'ai un probleme;si je fais une modification, il faut faire 2 ou 3 jours pour voir la modification.
meme tout de suit je viens faire un changement de background:rgb(56,7,47);mais il faut que je observe jusqu'à demain ou apres demain pour voir cette modification.
je ne sais pas ce qui provoque ça.

**autran** · 09/12/2015, 15h44

j'ai un probleme;si je fais une modification, il faut faire 2 ou 3 jours pour voir la modification.

Sur ton serveur LAMP ou WAMP local ????

**sandaff** · 09/12/2015, 18h14

j'ai wamp server.
je n'ai pas vu l'effet de float:right;
mais moi j'ai fait une modification sur background il y a 2 jour et c'est aujoudhui j'ai vue l'effet.

**autran** · 09/12/2015, 19h22

Envoyé par sandaff

Mais moi j'ai fait une modification sur background il y a 2 jour et c'est aujourd'hui j'ai vue l'effet.

Il faut que tu relances ton serveur (stop et start) tu verras ça marche. Quelle que soit la version de ton WAMP

**sandaff** · 10/12/2015, 18h14

je vais faire ça désormais!!

**undead001** · 12/01/2016, 19h43

Bonjour,
ton problème est-il résolu?

Cordialement

**sandaff** · 13/01/2016, 02h23

J'ai pris pose, comme je n y arrivais pas.
Je suis entrain de lire bootstrap de twitter.

**autran** · 13/01/2016, 13h32

BootStrap --> excellent choix
Tu as d'ailleurs d'excellents tuto sur DVP ici http://guikprod.developpez.com/tutor...olio/partie-1/ en plusieurs tomes.

**sandaff** · 15/01/2016, 15h51

Merci pour le tuto

Alignement de champs sur ma page de connexion

Discussions similaires

Partager

Partager