Boutons qui s'affichent mal
kiki184
Messages postés
24
Date d'inscription
Statut
Membre
Dernière intervention
-
txiki Messages postés 6596 Date d'inscription Statut Contributeur Dernière intervention -
txiki Messages postés 6596 Date d'inscription Statut Contributeur Dernière intervention -
Bonjour,
Je suis débutante en codage.
Je suis actuellement en train de faire un site et dans mon header j'ai un problème avec les boutons lorsque je diminue la fenêtre. Il se superposent et ne diminue pas. Je suppose donc qu'ils ne sont pas responsive.
Comment puis-je faire ?
Merci d'avance pour vos réponse :)
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Mon cours</title>
<link rel="icon" href="#">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
<link rel="stylesheet" href="connexion.css">
<link rel="stylesheet" href="footer.css">
</head>
<body>
<!-- HEADER -->
<header>
<img src="Images/logo.jpg" alt="" title="logo" href="index.html" id="logo">
<h1 class="titre_0">Studyline</h1>
<div class="btn_header">
<a href="inscription.html" id="inscription">S'inscrire</a>
<a href="connexion.html" id="connexion">Se connecter</a>
</div>
</header>
<!-- BARRE DE NAVIGATION -->
<nav>
<ul>
<li><a href="cours.html">Cours</a></li>
<li><a href="thematiques.html">Thématiques</a></li>
<li><a href="enseignants.html">Enseignants</a></li>
</ul>
<div>
<img src="Images/compte.png" alt="" title="Compte" id="img-compte">
<p id="compte">Mon compte</p>
</div>
</nav>
<!-- CONTENU DE LA PAGE -->
<main>
<section>
<h1 class="titre_1">Connexion</h1>
<form action="connexion.php" method="POST" class="formulaire">
<label>Email</label>
<input type="text" name="email" class="input">
<br>
<br>
<label>Mot de passe</label>
<input type="text" name="password" class="input">
</div>
<br>
<input type="submit" name="bouton_connexion" value="Valider" class="submit">
</form>
<p class="text">
Vous n'avez pas encore de compte ? <span class="bold"><a href="inscription.php">Incrivez-vous</a></span>
</p>
<?php
// Récupérer les données venant de la page HTML
$email = isset($_POST["email"]) ? $_POST["email"] : "";
$password = isset($_POST["password"]) ? $_POST["password"] : "";
// Connexion à la BDD
$database = 'u968632943_studyline';
$db_handle = mysqli_connect('127.0.0.1', 'u968632943_studyline', '4h^uI=gN^w');
$db_found = mysqli_select_db($db_handle, $database);
if ($db_found) {
if (isset($_POST["bouton_connexion"])){
$sql = "SELECT * FROM USER WHERE email='$email' AND password='$password'";
$result = mysqli_query($db_handle, $sql);
if(mysqli_num_rows($result) > 0) {
$data = mysqli_fetch_assoc($result);
echo "<p>Connexion réussie à votre compte, ".$data['name_user'].".</p>";
} else {
echo "<p>Echec lors de la connexion à votre compte, veuillez réessayer.</p>";
}
}
} else {
echo "<p>La base de données n'existe pas.</p>";
}
mysqli_close($db_handle);
?>
</section>
</main>
<!-- FOOTER -->
<div class="footer-dark">
<footer>
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-5 item">
<div class="col item social"> <img src="Images/instagram.png" class="instagram"/> <img src="Images/twitter.png" class="twitter"/><img src="Images/facebook.png" class="facebook" /></div></div>
<div class="col-sm-6 col-md-3 item">
<h3>Contact</h3>
<ul>
<li><a href="#">Mail</a></li>
<li><a href="#">Télephone</a></li>
</ul>
</div>
<div class="col-sm-6 col-md-3 item">
<h3>À propos</h3>
<ul>
<li><a href="#">Mentions légales</a></li>
<li><a href="#">Conditions générales</a></li>
<li><a href="#">Politiques de confidentialité</a></li>
</ul>
</div>
</div>
<p class="copyright">Copyright © Stydyline, 2023</p>
</div>
</footer>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
</body>
</html>
/*FONTS*/
@font-face{
font-family: "BakbakOne-Regular";
src: url('Fonts/BakbakOne-Regular.ttf');
}
@font-face{
font-family: "AmaticSC-Regular";
src: url('Fonts/AmaticSC-Regular.ttf');
}
@font-face{
font-family: "AmaticSC-Bold";
src: url('Fonts/AmaticSC-Bold.ttf');
}
@font-face{
font-family: "Montserrat-Regular";
src: url('Fonts/Montserrat-Regular.ttf');
}
@font-face{
font-family: "Montserrat-Bold";
src: url('Fonts/Montserrat-Bold.ttf');
}
@font-face{
font-family: "Montserrat-Black";
src: url('Fonts/Montserrat-Black.ttf');
}
/*RESET*/
*, ::before, ::after{
box-sizing: border-box;
margin: 0;
padding: 0;
}
/*à garder*/
header{
background-color: #97B797;
height: 10vw;
}
nav{
background-color: grey;
}
main{
margin-top: 500px;
}
.btn-header{
display: flex;
}
#inscription{
font-family: Montserrat-Regular;
color: black;
text-decoration: none;
background-color: #FFFFFF;
border: 1px solid white;
border-radius: 5px;
float: right;
margin-top: -6.75%;
padding: 1% 2.5%;
margin-right: 20vw;
}
#inscription:hover {
text-decoration: underline;
}
#connexion{
font-family: Montserrat-Regular;
color: black;
font-weight: bold;
text-decoration: none;
background-color: #FFFFFF;
border: 1px solid white;
border-radius: 5px;
float: right;
margin-top: -6.75%;
margin-left: 70%;
padding: 1% 2%;
margin-right: 7vw;
}
#connexion:hover{
text-decoration: underline;
}
img{
cursor: pointer;
}
nav ul li a {
color: black;
display: inline-block;
}
#logo{
height: 100%;
margin-left: 1vw;
}
#compte{
margin-top: -7.5vh;
margin-left: 92vw;
}
#img-compte{
margin-top: -10vh;
width: 5vh;
margin-left: 89vw;
}
.titre_0 {
font-family: Montserrat-Bold;
text-transform: uppercase;
font-size: 4.5vw;
text-align: center;
float: right;
margin-top: 2.5%;
margin-right: 60%;
}
.titre_1 {
font-family: BakbakOne-Regular;
font-size: 5vh;
text-transform: uppercase;
text-align: center;
margin-top: -50vh;
}
.titre_2 {
font-family: Montserrat-Bold;
font-size: 5vh;
}
.icon{
width: 3%;
height: 3%;
}
p{
font-family: Montserrat-Regular;
}
.text {
font-family: Montserrat-Regular;
font-size: 2vh;
margin-top: 2vh;
text-align: center;
}
.formulaire {
font-family: Montserrat-Regular;
font-size: 2vh;
margin-top: 3vh;
text-align: center;
}
.input{
height: 5vh;
border: 1px solid black;
background-color: #97B797
}
.submit{
width: 8vw;
height: 5vh;
margin-top: 2vh;
background-color: #97B797;
font-family: Montserrat-Bold;
}
.submit:hover{
width: 8vw;
height: 5vh;
background-color: #FFFFFF;
text-decoration: underline;
}
.bold {
font-weight: bold;
}
.bold a {
text-decoration: none;
color: black;
}
.bold a:hover {
text-decoration: underline;
}
/* Fin */
A voir également:
- Boutons qui s'affichent mal
- A quoi servent les boutons de couleur sur une telecommande - Guide
- Comment réinitialiser un téléphone avec les boutons - Guide
- Application pour reconnaître les boutons - Accueil - Outils
- Pourquoi la tnt fonctionne mal en ce moment - Guide
- Les sous titres ne s'affichent pas sur la télé samsung - Forum Téléviseurs
1 réponse
Salut kiki184,
"j'ai un problème avec les boutons lorsque je diminue la fenêtre": Je n'ai pas regardé ton code mais c'est un problème courant. Pour adapter les tailles sur une page web tu ne dois jamais utiliser des dimensions, px ou autres, mais des pourcentages de largeur d'écran. Ainsi tes boutons s'adapteront a la taille de l'écran.
Ça se défini dans ton CSS.
Il y a longtemps que je n'ai pas codé, j'ai été très malade.
Cdlt
