Ce site utilise des cookies pour améliorer uniquement votre expérience utilisateur.
Vous pouvez lire à tout moment comment nous utilisons les cookies sur le site.
Problème taille input
Résolu
Bonjour, Bonsoir,
Les champs de texte (inputs) de mon site dépassent toujours la taille maximale ( voir img )
Et cela fait au total 4h que je cherche la solution....
Code HTML :
<div class="container">
<form class="form fakeform">
<h1 class="title" text="size-lg center">Log in</h1>
<div class="separator"></div>
<div class="form fakeform">
<input type="text" text="size-md" w="4/4">
</div>
</form>
</div>
Code CSS :
.form {
background-color: rgba(255, 255, 255, 0.45);
border-radius: 5px;
margin: 20px;
padding: 10px 0px 10px 0px;
}
.form input {
padding: 10px;
border: 1px solid black;
border-radius: 0px;
}
.form input[type="text"] {
border-radius: 5px;
}
.form input[type="submit"] {
cursor: pointer;
}
/***********************/
*[w="4/4"] {
width: 100%;
}
Merci d'avance de l'aide que vous m'apporterez ^^
Re @Space001,
Au final j'ai utilisé bootstrap pour regarder le code source et non l'utiliser.
Et je me suis rendue compte de border-sizing: border-box; avec un width: 100%; est ça a résolu mon problème ^^.
Bonne continuation. 😁
Re @Space001,
Voici le code complet :
login.php :
<?php
session_start();
include_once('src/db/connexion-db.php');
if(isset($_POST['login']) AND !empty($_POST['login'])){
$valid = (boolean) true;
if(isset($_POST['username']) AND !empty($_POST['username'])){
$usn = $_POST['username'];
$verifUser = $BDD->query('SELECT * FROM users WHERE username = "'.$usn.'"');
while($vu = $verifUser->fetch()){
$userId = $vu['id'];
$userPassword = $vu['password'];
}
if(!isset($userPassword) OR empty($userPassword)){
$valid = false;
$err['general'] = "Invalid username or password !";
}
}else{
$valid = false;
$err['username'] = "This field must not be empty !";
}
if(isset($_POST['password']) AND !empty($_POST['password'])){
if(isset($userPassword) AND !empty($userPassword)){
$cryptedPasswordTyping = $_POST['password'];
if(!password_verify($cryptedPasswordTyping, $userPassword)){
$valid = false;
$err['general'] = "Invalid username or password !";
}
}else{
$valid = false;
$err['general'] = "Invalid username or password !";
}
}else{
$valid = false;
$err['password'] = "This field must not be empty !";
}
if($valid){
$getSession = $BDD->query('SELECT * FROM users WHERE id = "'.$userId.'"');
while($gs = $getSession->fetch()){
$_SESSION['id'] = $gs['id'];
$_SESSION['username'] = $gs['username'];
$_SESSION['email'] = $gs['email'];
$_SESSION['admin'] = $gs['administrator'];
header('Location: /account');
exit;
}
}
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/png" sizes="16x16" href="./imgs/logo.png">
<link rel="stylesheet" href="./src/css/style-base.css">
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
<title>Log in</title>
</head>
<body>
<!-- MENU DE NAVIGATION -->
<?php
require_once('auto/nav.php');
?>
<div class="container">
<form class="form fakeform" method="POST">
<h1 class="title" text="size-lg center">Log in</h1>
<div class="separator"></div>
<div class="form fakeform">
<input type="text" text="size-md" w="4/4" placeholder="Username" name="username">
<?php if(isset($err['username'])){ ?><label color="red"><?= $err['username']; ?></label><?php } ?>
<div class="separator"></div>
<input type="password" text="size-md" w="4/4" placeholder="Password" name="password">
<?php if(isset($err['password'])){ ?><label color="red"><?= $err['password']; ?></label><?php } ?>
<div class="separator"></div><div class="separator"></div>
<input type="submit" tetx="size-md" w="4/4" value="Log in !" name="login">
<?php if(isset($err['general'])){ ?><label color="red"><?= $err['general']; ?></label><?php } ?>
</div>
</form>
</div>
</body>
</html>
style-base.css :
/***********/
/* BASES */
/***********/
html, body {
margin: 0;
padding: 0;
/*background-image: url("../../imgs/fond.png");
background-color: rgba(120, 176, 213, 1);*/
background: linear-gradient(to right, #e66465, #9198e5);
/*background-repeat: no-repeat;
background-size: 100%;*/
}
/***************/
/* CONTAINER */
/***************/
div.container {
display: block;
}
@media screen and (max-width: 779px) {
div.container {
width: 100%;
}
}
@media screen and (min-width: 780px) and (max-width: 1099px) {
div.container {
padding-left: 7%;
width: 86%;
}
}
@media screen and (min-width: 1100px) {
div.container {
padding-left: 14%;
width: 72%;
}
}
/***********/
/* FORMS */
/***********/
.form {
background-color: rgba(255, 255, 255, 0.45);
border-radius: 5px;
margin: 20px;
padding: 10px;
}
.form input {
padding: 10px;
border: 1px solid black;
border-radius: 0px;
}
.form input[type="text"], .form input[type="password"], .form input[type="email"] {
border-radius: 5px;
}
.form input[type="submit"] {
cursor: pointer;
}
textarea {
padding: 5px;
min-height: 80px;
border-radius: 5px;
resize: vertical;
overflow: none;
}
.code {
min-height: 150px;
background-color: rgba(56, 56, 56, 1);
color: gold;
font-family: Menlo,Consolas,Monaco,"Lucida Console",Monospace;
}
select {
padding: 10px;
border-radius: 5px;
}
div.separator {
height: 0px;
width: 100%;
padding-bottom: 10px;
}
@media screen and (min-width: 560px) {
.form input.search[type="text"] {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.form input.search[type="submit"] {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
}
@media screen and (min-width: 561px) {
.form input.search[type="text"] {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.form input.search[type="submit"] {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
}
/***********/
/* CARDS */
/***********/
div.card {
background-color: white;
border-radius: 5px;
margin: 5px;
}
div.card-container {
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-around;
}
div.card-cut{
background-color: rgba(255, 255, 255, 0.65);
width: 100%-20px;
height: 2px;
margin: 10px;
}
@media screen and (max-width: 560px) {
div.card-container {
flex-direction: column;
align-content: center;
}
}
/**************/
/* ARTICLES */
/**************/
div.article-group {
display: flex;
flex-wrap: nowrap;
flex-direction: column;
border-radius: 5px;
border: 2px solid grey;
}
div.article {
display: flex;
background-color: rgba(255, 255, 255, 0.6);
}
div.article:hover {
opacity: 0.65;
cursor: pointer;
}
.article-assignment, .article-icon {
font-weight: 400;
}
/*************/
/* BUTTONS */
/*************/
.btn {
padding: 5px;
border-radius: 5px;
cursor: pointer;
transition: opacity 0.4s;
}
.btn:hover {
opacity: 0.9;
transition: opacity 0.4s;
}
.btn.red {
border: 2px solid #BC1E10;
background-color: white;
}
.btn.red.fill {
background-color: #BC1E10;
}
.btn.blue {
border: 2px solid #3345AF;
background-color: white;
}
.btn.blue.fill {
background-color: #3345AF;
}
.btn.yellow {
border: 2px solid #DABF16;
background-color: white;
}
.btn.yellow.fill {
background-color: #DABF16;
}
.btn.green {
border: 2px solid #15C31A;
background-color: white;
}
.btn.green.fill {
background-color: #15C31A;
}
/************/
/* COLORS */
/************/
*[color="white"] {
color: white;
}
*[color="light-gray"] {
color: lightgray;
}
*[color="gray"] {
color: gray;
}
*[color="dark-gray"] {
color: darkgray;
}
*[color="black"] {
color: black;
}
*[color="red"] {
color: red;
}
*[bgcolor="white"] {
background-color: white;
}
*[bgcolor="light-gray"] {
background-color: lightgray;
}
*[bgcolor="gray"] {
background-color: gray;
}
*[bgcolor="dark-gray"] {
background-color: darkgray;
}
*[bgcolor="black"] {
background-color: black;
}
*[bgcolor="red"] {
background-color: red;
}
/**********/
/* TEXT */
/**********/
*[text~="center"] {
text-align: center;
}
*[text~="left"] {
text-align: left;
}
*[text~="right"] {
text-align: right;
}
*[text~="size-xs"] {
font-size: 10px;
}
*[text~="size-sm"] {
font-size: 14px;
}
*[text~="size-md"] {
font-size: 18px;
}
*[text~="size-lg"] {
font-size: 24px;
}
/**********/
/* SIZE */
/**********/
@media screen and (min-width: 620px) {
*[w="1/4"] {
width: 25%;
}
*[w="2/4"] {
width: 50%;
}
*[w="3/4"] {
width: 75%;
}
*[w="4/4"] {
width: 100%;
}
}
@media screen and (max-width: 619px) {
*[w="1/4"] {
width: 100%;
}
*[w="2/4"] {
width: 100%;
}
*[w="3/4"] {
width: 100%;
}
*[w="4/4"] {
width: 100%;
}
}
Re @CrafterHide,
Pourrais-tu nous envoyer le design complet du formulaire en question (css + html) ?
Le code présent dans la description de ton topic n'affiche pas les arrières plans 😉
Re @Space001,
C'est bien ça. Car mon css fait que ca le fait a chaque fois avec un input de type text alors qu'un input type submit est parfait
Bonsoir @CrafterHide 😎
D'apres ce que j'ai compris, tu souhaites que ton champ "input" ne dépasse pas la petite zone blanche transparente ? 🤔
Ce site utilise des cookies pour améliorer uniquement votre expérience utilisateur.
Vous pouvez lire à tout moment comment nous utilisons les cookies sur le site.