Problème alignement CSS
Louis_09 Le 10 octobre 2016 à 21:13 (Édité le 25 janvier 2019 à 17:52)
Voici le code de mon formulaire :
<html>
<head>
<meta charset="UTF-8">
<title>Connexion</title>
<link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
</head>
<body>
<span href="#" class="button" id="toggle-login">Avancement de votre site</span>
<div id="login">
<div id="triangle"></div>
<h1>Connexion</h1>
<form method="post" action="secret.php" />
<p>
<input type="password" name="mot_de_passe" placeholder="Code d'accès" />
<input type="submit" value="Valider" />
</p>
</form>
</div>
<script src='http://codepen.io/assets/libs/fullpage/jquery.js'></script>
<script src="js/index.js"></script>
</body>
</html>
Et voici le code CSS de mon formulaire :
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300,400,700);
*{margin:0;padding:0;}
body{
background:#FFFF;
font-family:'Open Sans',sans-serif;
}
.button{
width:100px;
background:#0074D9;
display:block;
margin:0 auto;
margin-top:1%;
padding:10px;
text-align:center;
text-decoration:none;
color:#fff;
cursor:pointer;
transition:background .3s;
-webkit-transition:background .3s;
}
.button:hover{
background:#0074D9;
}
#login{
width:400px;
margin:0 auto;
margin-top:8px;
margin-bottom:2%;
transition:opacity 1s;
-webkit-transition:opacity 1s;
}
#triangle{
width:0;
border-top:12x solid transparent;
border-right:12px solid transparent;
border-bottom:12px solid #0074D9;
border-left:12px solid transparent;
margin:0 auto;
}
#login h1{
background:#0074D9;
padding:20px 0;
font-size:140%;
font-weight:300;
text-align:center;
color:#fff;
}
form{
background:#f0f0f0;
padding:6% 4%;
}
input[type="email"],input[type="password"]{
width:92%;
background:#fff;
margin-bottom:4%;
border:1px solid #ccc;
padding:4%;
font-family:'Open Sans',sans-serif;
font-size:95%;
color:#555;
}
input[type="submit"]{
width:100%;
background:#0074D9;
border:0;
padding:4%;
font-family:'Open Sans',sans-serif;
font-size:100%;
color:#fff;
cursor:pointer;
transition:background .3s;
-webkit-transition:background .3s;
}
input[type="submit"]:hover{
background:#2288bb;
}
Est-ce que quelqu'un pourrait m'aider à résoudre ce problème ?
Balatharas Le 12 octobre 2016 à 18:27
les balises codes, parce que là mes yeux saignent.
Balatharas Le 15 octobre 2016 à 21:25
TheOldNoob Le 16 octobre 2016 à 18:00
Ton input type password fait 92% de largteur (widht) alors que tes input submit font 100%
