Partage

Problème avec case à cocher "Se souvenir de moi"

Sujet résolu

24 septembre 2020 à 2:34:11

Bonjour à tous,

Je suis débutante en HTML et CSS et j'ai besoin de créer un site avec un formulaire de connexion qui contient Email, Mot de passe et la case à cocher "Se souvenir de moi.

J'ai suivi un tuto pour créer le formulaire et je n'ai eu aucun souci jusqu'à la fameuse case à cocher.

Je n'arrive pas à la placer en une ligne (avec la coche et à côté écrit "Se souvenir de moi") en dessous du bouton de connexion. Elle se place au milieu de mon formulaire et impossible de la déplacer.

Si vous pouviez jeter un œil à mon codage et me dire là où je me suis trompée.

Merci beaucoup.

<?php include("navbar.php"); ?>

<!DOCTYPE html>
<html>
    <head>
		<meta charset="utf-8" />
        <link rel="stylesheet" href="style.css" />
		<link rel="icon" href="images/favicon.ico" />
        <title>Accueil</title>
    </head>

    <body>
		<div class="login-box">
			<h1>Connexion</h1>
			<form action="">
				<p>E-mail</p>
				<input type="email" name="email" placeholder="Saisissez votre adresse e-mail" size=35 required>
				<p>Mot de passe</p>
				<input type="password" name="password" placeholder="Saisissez votre mot de passe" size=20 required>
				<a href="#">Mot de passe oublié ?</a>
				<button type="submit">Me connecter</button>
					<input type="checkbox" name="rememberme" id="remembermecheckbox" /><label for="remembermecheckbox">Se souvenir de moi</label>
			</form>
		</div>
    </body>
</html>

/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v7.0.29,
* Autoprefixer: v9.7.6
* Browsers: last 8 version,ie > 8
*/

/* Image d'arrière plan */

*{
	margin: 0px;
	padding: 0px;
}
		
body{
margin: 9px;
padding: 0px;
box-sizing: border-box;	
background-color: #29abe2;
background-image: url("images/couple1.jpg");
background-repeat: no-repeat;
background-size: 1370px;
box-sizing: border-box;
color: black;
}

/* Barre de navigation */

#menufond{ /*barre de couleur */
width: 101.2%; /*longueur (sur toute la page) */
background-color: #ffffff;
border-radius: 0px 0px 4px 4px; /* bords arrondis*/
overflow : hidden;
height : 110px; /*largeur */
margin-left: -8;
margin-right: -100;
margin-top: -110;
}

#menu{/*liste de menu */
	font-family: "Trebuchet MS";
    display: table;
	margin-right : auto; 
	margin-left : auto; 
	margin-top : 60; /*entre le bouton de connexion et le haut de la page*/
	padding : 0;
}

#menu li{ /*onglets */
    display: table-cell;
	
	-webkit-transition:1s;
	
	-o-transition:1s;
	
	transition:1s;
}

#menu li:hover{
	-webkit-transition:1s;
	-o-transition:1s;
	transition:1s;
}

#menu a{ /*liens */
	position: absolute;
	top: 30px;
	right: 15px;
	border: 2px solid black;
	border-radius: 15px;
	-webkit-box-shadow: 6px 6px 6px black;
	        box-shadow: 6px 6px 6px black; /*ombre*/
	background-color: #29abe2;
	padding: 7px 25px 7px 25px; /*marge intérieure (en haut, à droite, en bas, à gauche*/
	text-decoration : none;
	color : white;
	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
	-webkit-transition : text-shadow,color,background-color 1s;
	-o-transition : text-shadow,color,background-color 1s;
	transition : text-shadow,color,background-color 1s;  	
}

#menu a:hover{ /*liens au survol */
	
	background-color: #75c60a;
	color : white;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
	-webkit-transition : text-shadow,color,background-color 1s;
	-o-transition : text-shadow,color,background-color 1s;
	transition : text-shadow,color,background-color 1s;
}
/* Formulaire de connexion*/

.login-box{
	width: 200px;
	height: 200px;
	background: #c3c8c2;
	position:absolute; /*pour placer l'élément n'importe où (avec top, bottom, left, right)*/
	top: 150px;
	left: 500px;
	color: black;
	padding: 60px;
	opacity: 0.7;
	box-shadow: 10px 10px 30px 10px black; /* droite, bas, haut, gauche*/
	border-radius: 20px;
}
h1{
	margin: -30px;
	padding: 0 0 45px;
	text-align: center;
	font-family: "trebuchet ms";
	font-size: 22px;
}
	
.login-box p{
	margin-left: -20px;
	padding: 2px;
	font-weight: bold;
}

.login-box input{
	width: 120%;
	margin-left: -20px;
	margin-bottom: 7px;
	padding: 6px;
	font-size: 15px;
}

.login-box button{
	position: absolute;
	bottom: 50px;
	right: 97px;
	height: 40px;
	background: #29abe2;
	color: white;
	font-size: 18px;
	border-radius: 20px;
	width: 135px;
}

.login-box button:hover{
	cursor: pointer;
	background: #75c60a;
	color: white;
}

.login-box a{
	position: absolute;
	bottom: 105px;
	left: 95px;
	text-decoration: underline;
	font-size: 14px;
	color: purple;
}

.login-box a:hover{
	color: blue;
}

#remembermecheckbox{
position: absolute;
bottom: 70px;
left: 70px;
}

AbcAbc6

24 septembre 2020 à 3:23:19

Bonsoir, qui a-t-il dans navbar.php??? un menu de navigation? Si c'est le cas tu ne peux pas l'afficher avant le doctype!

Pourquoi utilise tu le label pour la checkbox et pas pour le reste. Utilise toujours un label quand tu veux afficher du texte en rapport avec un input.

Lire 67 - Chaque champ de formulaire est associé dans le code source à une étiquette qui lui est propre. et le cours de ce site et la doc MDN

Pour ce qui est du CSS: Ceci c'est NON :

*{
    margin: 0px;
    padding: 0px;
}

Pas besoins de supprimer toutes les marges surtout pour les éléments qui n'en ont pas.

Supprime toutes les positions absolute, tu n'en à pas besoin ici. C'est une erreur de débutant que de croire que l'on positionne les éléments d'une page avec la propriété position.

Observe ton site avec une largeur de non navigateur plus petite (ou les outils de développement de ton navigateur pour l'affichage mobile), tu verras que le contenu ne s'y adapte pas et que en mobile c'est invisible sans utiliser la barre de scrolle latérale.

L35 à L37 il te manque les unités. Utilise le validateur CSS pour voir tes erreurs.

Et enfin la propriété transitions n'as plus besoin d'être préfixée : https://caniuse.com/css-transitions

Si après modification tu as encore des soucis, reposte ton nouveau code.

-
Edité par AbcAbc6 24 septembre 2020 à 3:37:37

joannai

24 septembre 2020 à 22:54:54

Bonsoir AbcAbc6,

Tout d'abord merci d'avoir pris le temps de me répondre.

Oui, dans navbar.php c'est bien mon menu de navigation.

J'ai corrigé les erreurs que vous avez mentionnées et également relu les cours sur les formulaires.

Je pense avoir mieux compris le principe des class et id que j'ai appliqués dans mon formulaire avec les label, mais si vous pouviez encore jeter un œil à mon code pour me dire si tout est ok maintenant.

Merci beaucoup.

<!DOCTYPE html>
<?php include("navbar.php"); ?>
<html>
    <head>
		<meta charset="utf-8" />
        <link rel="stylesheet" href="style.css" />
		<link rel="icon" href="images/favicon.ico" />
        <title>Accueil</title>
    </head>

    <body>
		<div id="container">
			
			<form method="post" action="#">
				
				<h1><b>Connexion</b></h1>
					
					<div class="email">
						<label for="email"><b>E-mail</b></label>
						<input type="email" name="email" id="email" placeholder="Saisissez votre adresse e-mail" name="email" size=35 required>
					</div>
					
					<div class="mdp">
						<label for="mdp"><b>Mot de passe</b></label>
						<input type="password" name="mdp" id="mdp" placeholder="Saisissez votre mot de passe" name="password" size=20 required>
					</div>
					
					<div class="rememberme">
						<input type="checkbox" name="rememberme" id="remembermecheckbox" /><label for="remembermecheckbox">Se souvenir de moi</label>
					</div>
					
					<div class="mdpoublie">
						<a href="#">Mot de passe oublié ?</a>
					</div>	
						
						<input type="submit" id='submit' value='Me connecter'>										
			</form>
		</div>
    </body>
</html>

/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v7.0.29,
* Autoprefixer: v9.7.6
* Browsers: last 8 version,ie > 8
*/

/* Image d'arrière plan */
		
body{
margin: 9px;
padding: 0px;
box-sizing: border-box;	
background-color: #29abe2;
background-image: url("images/couple1.jpg");
background-repeat: no-repeat;
background-size: 1370px;
box-sizing: border-box;
color: black;
}

/* Barre de navigation */

#menufond{ /*barre de couleur */
width: 101.2%; /*longueur (sur toute la page) */
background-color: #ffffff;
border-radius: 0px 0px 4px 4px; /* bords arrondis*/
overflow : hidden;
height : 110px; /*largeur */
margin-left: -8px;
margin-right: -100px;
margin-top: -110px;
}

#menu li{ /*onglets */
    display: table-cell;
	transition:1s;
}

#menu li:hover{
	transition:1s;
}

#menu a{ /*liens */
	position: absolute;
	top: 30px;
	right: 15px;
	border: 2px solid black;
	border-radius: 15px;
	-webkit-box-shadow: 6px 6px 6px black;
	        box-shadow: 6px 6px 6px black; /*ombre*/
	background-color: #29abe2;
	padding: 7px 25px 7px 25px; /*marge intérieure (en haut, à droite, en bas, à gauche*/
	text-decoration : none;
	color : white;
	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
	transition : text-shadow,color,background-color 1s;  	
}

#menu a:hover{ /*liens au survol */
	
	background-color: #75c60a;
	color : white;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
	transition : text-shadow,color,background-color 1s;
}

/* Formulaire de connexion*/

#container{ /*fond + formulaire*/
	width: 300px;
	margin: auto; /*centrer sur la page*/
	margin-top:4%;
}

form { /*formulaire*/
    width:90%;
	padding: 40px; /*centrer sur la page*/
	background: #c3c8c2;
	color: black;
	opacity: 0.7;
	box-shadow: 10px 10px 30px 10px black; /* droite, bas, haut, gauche*/
	border-radius: 20px;
}

#container h1{ /* titre "connexion"*/
    width: 43%;
    margin: auto;
    padding-bottom: 25px;
	font-family: "trebuchet ms";
	font-size: 22px;
	font-weight: bold;
	text-decoration: underline;
}

input[type=email], input[type=password]{ /*champs*/
    width: 90%; /*longueur des champs*/
	padding: 5px 7px; /*largeur*/
	margin: 8px -3px; /* espacement des champs*/
	margin-top: 2px;
	display: inline-block;
	border: 1px solid #ccc;
    box-sizing: border-box; /*pour que les champs ne dépassent pas du fond*/
	font-size: 15px;
}

input[type=submit]{ /*bouton "me connecter"*/
    
    padding: 10px 15px; /*largeur*/
	margin: 10px 65px;
	background: #29abe2;
	color: white;
	font-size: 15px;
	border-radius: 20px;
	width: 135px;
	cursor: pointer;
	font-weight: bold;
}

input[type=submit]:hover {
    background: #75c60a;
	color: white;
}

.email{
	margin-left: 25px;
}

.mdp{
	margin-left: 25px;
}


.mdpoublie {
	text-align: right;
	margin-right: -20px;
	margin-top: -16px;
	font-size: 14px;
	color: purple;
}

.mdpoublie:hover a{ /* mot de passe oublié*/
	color: blue;
}

.rememberme{
	margin-top: 10px;
	margin-left: -27px;
}

Aurélien10!

24 septembre 2020 à 23:10:29

Bonsoir

Déplace ta ligne 2 à la ligne 13.

Il va falloir aussi relire le cours sur la structure html (^_^)

Pour certains de tes "input", tu as deux fois l'attribut "name=", il n'en faut qu'un

Je te conseil de passer ton code au W3C Validator

Activer les erreurs PDO / (julp) htmlspecialchars / FAQ PHP / Pas d'aide par MP

joannai

25 septembre 2020 à 3:26:21

Bonsoir Aurélien.C,

J'ai essayé de déplacer la ligne 2 à la ligne 13, mais en faisant ça, le fond de ma barre de navigation ne s'affiche plus, le logo est complètement décalé, il y a juste l'onglet du menu qui ne bouge pas.

Par contre, si je mets l'include à la ligne 11 juste avant <div id="container"> ou bien entre les balises <head>, ma barre ne navigation reste intact.

Je peux faire comme ça plutôt ?

-
Edité par joannai 25 septembre 2020 à 3:51:50

AbcAbc6

25 septembre 2020 à 3:55:58

Bonsoir, c'est déjà mieux, suis les recommandations de Aurélien.

>> Oui, dans navbar.php c'est bien mon menu de navigation.

Dans ce cas tout ce qui est de l'affichage DOIT ce trouver entre <body> et </body>. Pour le validateur HTML voici l'URL => https://validator.w3.org/

Pour éviter de la redondance avec la propriété box-sizing tu peux utiliser le sélecteur universel:

* {box-sizing: border-box}

Mouais, pour le positionnement de mdpoublie et rememberme j'aurais, plutôt que d'utiliser un margin négatif, utilisé un display inline-block ou un display flex pour afficher les deux div l'une à coté de l'autre. (bien qu'un <span> aurait fait de même)

Bonne continuation