A voir également:
- Optimisation pour mobile
- Optimisation pc - Guide
- Chaine tnt gratuite sur mobile - Guide
- Forfait mobile pas cher - Guide
- Optimisation découpe panneau gratuit - Télécharger - Outils professionnels
- Mfacebook.com mobile - Guide
4 réponses
dugenou
Messages postés
6087
Date d'inscription
mercredi 19 janvier 2005
Statut
Contributeur
Dernière intervention
30 juillet 2021
1 451
15 oct. 2019 à 20:36
15 oct. 2019 à 20:36
Bonjour,
Les balises meta doivent être placées dans la partie head de ta page, le chemin de la feuille de style également.
Les balises meta doivent être placées dans la partie head de ta page, le chemin de la feuille de style également.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<title>Connexion</title>
<link href="style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css">
</head>
<body>
<div class="login">
<h1>MYG INFORMATIQUE INC.</h1>
<form action="authenticate.php" method="post">
<label for="username">
<i class="fas fa-user"></i>
</label>
<input type="text" name="username" placeholder="Identifiant" id="username" required>
<label for="password">
<i class="fas fa-lock"></i>
</label>
<input type="password" name="password" placeholder="Mot de passe" id="password" required>
<input type="submit" value="Se connecter ">
</form>
</div>
</body>
</html>
bonjours,
merci pour avoir prix le temps de me répondre et j'en prend note pour éviter des erreurs de ce genre. Par contre même après ce changement, la page ne s'optimise pas pour le mobile. La boîte d'authentification reste toute petite un peu comme sur un site qui n'est pas optimiser pour les mobiles.
Merci
Mike
merci pour avoir prix le temps de me répondre et j'en prend note pour éviter des erreurs de ce genre. Par contre même après ce changement, la page ne s'optimise pas pour le mobile. La boîte d'authentification reste toute petite un peu comme sur un site qui n'est pas optimiser pour les mobiles.
Merci
Mike
jordane45
Messages postés
38138
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 avril 2024
4 649
15 oct. 2019 à 23:25
15 oct. 2019 à 23:25
Bonjour,
Sans voir ce que tu as mis dans ton CSS .... difficile de te dire ce qu'il en est.
A savoir également que tu dois, à chaque modification de fichier css ou Js vider le cache de ton navigateur si tu veux être certain que les modifications soient prises en compte.
NB: Contrairement à ce que t'a dit Dugenou .. les fichiers CSS peuvent être placés en dehors des balises head. (mais doivent être soit dans le head... soit dans le body )
NB² : Les feuilles de styles sont lues dans l'ordre et la dernière chargée est prioritaire à la première...
Donc si jamais un style de ton fichier css est utilisé dans d'autre fichiers css... seul la dernière valeur sera utilisée.
C'est pour ça qu'en général.. les feuilles de styles "perso" sont placées APRES les feuilles de styles des différents plugins/framework que l'on utilise
NB3 : A moins que tu n'aies codé du css en responsive dans ton fichier css .... si tu ne sais pas le faire le plus simple est d'utiliser un framework css tel que bootstrap. Tout y est pour coder proprement un site responsive.
Sans voir ce que tu as mis dans ton CSS .... difficile de te dire ce qu'il en est.
A savoir également que tu dois, à chaque modification de fichier css ou Js vider le cache de ton navigateur si tu veux être certain que les modifications soient prises en compte.
NB: Contrairement à ce que t'a dit Dugenou .. les fichiers CSS peuvent être placés en dehors des balises head. (mais doivent être soit dans le head... soit dans le body )
NB² : Les feuilles de styles sont lues dans l'ordre et la dernière chargée est prioritaire à la première...
Donc si jamais un style de ton fichier css est utilisé dans d'autre fichiers css... seul la dernière valeur sera utilisée.
C'est pour ça qu'en général.. les feuilles de styles "perso" sont placées APRES les feuilles de styles des différents plugins/framework que l'on utilise
NB3 : A moins que tu n'aies codé du css en responsive dans ton fichier css .... si tu ne sais pas le faire le plus simple est d'utiliser un framework css tel que bootstrap. Tout y est pour coder proprement un site responsive.
Merci, j'en apprend a tout les jours. J'ai eu l'aide d'un ami pour tout ce qui est de code je suis encore qu'un débutant, voici le fichier style.css si tu peux m'éclairer un peu je n'arrive pas a mettre le doigt sur le bobo .. :|
box-sizing: border-box;
font-family: -apple-system, BlinkMacSystemFont, "segoe ui", roboto, oxygen, ubuntu, cantarell, "fira sans", "droid sans", "helvetica neue", Arial, sans-serif;
font-size: 16px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
background-color: #1a1a1a;
}
.login {
width: 400px;
background-color: #f2f2f2;
box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.3);
margin: 100px auto;
}
.login h1 {
text-align: center;
color: #5b6574;
font-size: 24px;
padding: 20px 0 20px 0;
border-bottom: 1px solid #dee0e4;
}
.login form {
display: flex;
flex-wrap: wrap;
justify-content: center;
padding-top: 20px;
}
.login form label {
display: flex;
justify-content: center;
align-items: center;
width: 50px;
height: 50px;
background-color: #b30000;
color: #ffffff;
}
.login form input[type="Password"], .login form input[type="text"] {
width: 310px;
height: 50px;
border: 1px solid #dee0e4;
margin-bottom: 20px;
padding: 0 15px;
}
.login form input[type="submit"] {
width: 100%;
padding: 15px;
margin-top: 20px;
background-color: #b30000;
border: 0;
cursor: pointer;
font-weight: bold;
color: #ffffff;
transition: background-color 0.2s;
}
.login form input[type="submit"]:hover {
background-color: #990000;
transition: background-color 0.2s;
}
- {
box-sizing: border-box;
font-family: -apple-system, BlinkMacSystemFont, "segoe ui", roboto, oxygen, ubuntu, cantarell, "fira sans", "droid sans", "helvetica neue", Arial, sans-serif;
font-size: 16px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
background-color: #1a1a1a;
}
.login {
width: 400px;
background-color: #f2f2f2;
box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.3);
margin: 100px auto;
}
.login h1 {
text-align: center;
color: #5b6574;
font-size: 24px;
padding: 20px 0 20px 0;
border-bottom: 1px solid #dee0e4;
}
.login form {
display: flex;
flex-wrap: wrap;
justify-content: center;
padding-top: 20px;
}
.login form label {
display: flex;
justify-content: center;
align-items: center;
width: 50px;
height: 50px;
background-color: #b30000;
color: #ffffff;
}
.login form input[type="Password"], .login form input[type="text"] {
width: 310px;
height: 50px;
border: 1px solid #dee0e4;
margin-bottom: 20px;
padding: 0 15px;
}
.login form input[type="submit"] {
width: 100%;
padding: 15px;
margin-top: 20px;
background-color: #b30000;
border: 0;
cursor: pointer;
font-weight: bold;
color: #ffffff;
transition: background-color 0.2s;
}
.login form input[type="submit"]:hover {
background-color: #990000;
transition: background-color 0.2s;
}
