Sujet Précédent Sujet Suivant

Boutons qui s'affichent mal

Fermé
kiki184 Messages postés 24 Date d'inscription jeudi 4 mai 2017 Statut Membre Dernière intervention 29 mars 2023 - 29 mars 2023 à 18:02
txiki Messages postés 6597 Date d'inscription mercredi 30 janvier 2002 Statut Contributeur Dernière intervention 22 février 2024 - 30 mars 2023 à 07:25

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 */

1 réponse

Réponse 1 / 1
txiki Messages postés 6597 Date d'inscription mercredi 30 janvier 2002 Statut Contributeur Dernière intervention 22 février 2024 517
30 mars 2023 à 07:25

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
0

Discussions similaires

Pourquoi je n'arrive plus à voir les anniversaires de mes amis sur Facebook ?
Utilisateur anonyme -
Aurelied -

33 réponses
mon pc capte mal en wifi
soprano2706 -
aghiles11 -

20 réponses
Mes smiley de s'affiches pas
Macha -
Framboise -

6 réponses
impossible de voir les photos et videos sur une conversation messenger
cortomaltese83 -
Oceii -

4 réponses
mettre a l'heure ma montre casio
alain85200 -
Kalyadu57 -

31 réponses