Probleme d'affichage HTML CSS lors de la reduction de la fenetre google
Bonjour, je viens de creer mon premier site web en local mais quan je reduit ma fenetre google le site par n'importe comment, quelqun pourrait t'il m'aider ?
Egalement je peux scroller sur la droite du site alors qu'il n'y a rien. Merci d'avance
Sans les codes on ne peut rien dire.
Rien ne sert de penser, il faut réfléchir avant - Pierre Dac
css : @import url('https://fonts.googleapis.com/css2?family=Lato&display=swap' );
body{
background-color: #141414;
padding: 0;
margin: 0;
color: #fff;
font-family: 'Lato', sans-serif;
width: 100%;
height:100%;
overflow-x: hidden;
}
body page{
margin: 20px 80px;
}
/*Barre de recherche*/
nav{
display:flex;
flex-wrap:wrap;
justify-content: space-between;
position:sticky;
top: 0;
background-color: #141414;
padding: 10px 0px;
z-index:2
}
nav onglets{
display:flex;
flex-wrap:wrap;
margin-top: 5px;
}
nav onglets{
display:flex;
flex-wrap:wrap;
}
nav onglets a {
margin-right: 20px;
cursorointer;
}
nav buttons button{
padding: 13px 20px;
color: #fff;
border:none;
font-size: 15px;
cursor
outline:none;
}
nav buttons login{
background-color: inherit;
margin-right: 10px;
color: #8f8f8f;
}
nav buttons register{
background-color: #f54266;
}
/* fin de la barre de recherche*/
/* Header */
header{
margin-top: 40px;
background: url('https://wallpapercrafter.com/th800/90392-roger-federer-tennis-sports-hd-4k-5k-male-celebrities-boys-monochrome-black-and-white.jpg');
background-repeat: no-repeat;
background-size: 1500px ;
background-position: center;
top:50px
}
header h1{
text-align:center;
font-size: 70px;
padding: 150px;
}
/* Fin Header */
h2{
font-size: 30px;
position: relative;
top: 100px;
}
#Bio_Roger{
position:relative;
top: 100px;
}
#img_roger{
background-repeat: no-repeat;
position:relative;
bottom: 200px;
left: 1450px;
}
#barre{
position:relative;
bottom:216px
}
h3{
font-size: 30px;
position: relative;
bottom: 200px;
}
#Bio_Novak{
position: relative;
bottom: 200px;
}
Code HTML:html : <!doctype html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Fiche BIO Roger FEDERER</title> <link rel="stylesheet" href="style.css"> </head> <body> <section class="page"> <nav> <div class="onglets"> <a>Roger Federer</a> <a>Novak Djokovic</a> <a>Rafael Nadal</a> </div> <div class="buttons"> <button class="login">J'ai déjà un compte</button> <button class="register">S'enregister</button> </div> </nav> <header> <h1> Le tennis, c'est plus qu'un sport.<br> C'est un art, au même titre que la danse.</h1></br> </header> <h2><u>• Roger FEDERER :</u></h2> <div id="Bio_Roger"> <p> Roger Federer grand joueur suisse de tennis cumulant de multiples victoires a <a href="https://fr.wikipedia.org/wiki/Roland_Garros"> Rolland-Garros</a> est un joueur professionel classé a ce jour 17ème mondiale. Devenu professionnel en 1998, à l'âge de 17 ans,<br> il était déjà champion national dans toutes les catégories juniors en Suisse. Cette même année, il finit la saison en tant que numéro un mondial junior sans perdre un seul set au cours du tournoi de <a href="https://fr.wikipedia.org/wiki/Tournoi_de_Wimbledon"> Wimbledon</a>.</p> C'est finalement en 2001-2002 que son statut de champion voit le jour et qu'il commence à enchaîner les victoires. Roger Federer est un joueur de tennis suisse, né le 8 août 1981 à Bâle. <br>Il a commencé sa carrière en tant que professionnel en 1998 et a occupé la première place du classement ATP technique pendant 237 semaines consécutives du 2 février 2004 au 17 août 2008 (record absolu).</p> <p> - Ci dessous quelques biographie du joueur plus détailler :<p> <a href="https://fr.wikipedia.org/wiki/Roger_Federer"> - Wikipedia</a> <br> <a href="https://www.rolandgarros.com/fr-fr/players/2508-r.federer"> - Fiche Classement officiel</a> <br> </div> <div id="img_roger"> <img src="roger_png.png" width="250"/> </div> <hr width="100%" align="left" id="barre"> <h3><u>• Novak Djokovic :</u></h3> <div id="Bio_Novak"> <p>Novak Djokovic est un joueur de tennis serbe. Il est né à Belgrade le 22 mai 1987, il vit avec sa femme et ses 2 enfants à Monte-Carlo [Monaco]. Professionnel depuis 2003,<br> il est actuellement le numéro un mondial au <a href="https://fr.wikipedia.org/wiki/ATP_World_Tour"> classement ATP</a> des joueurs de tennis. Faisant partie, avec Rafael Nadal et Roger Federer, des 3 grands tennismans <br>qui ont régné ces 15 dernières années, il a gagné 86 titres sur le circuit ATP, dont 20 en <a href="https://fr.wikipedia.org/wiki/Grand_Chelem_(tennis)"> Grand Chelem</a>.</p><br> <p>En 2021, en s'imposant pour une seconde fois à Roland-Garros, il devient le premier joueur de l'ère Open et le troisième athlète masculin de l'histoire, après<br> Roy Emerson</a> et <a href="https://fr.wikipedia.org/wiki/Rod_Laver"> Rod Laver</a>, à détenir au moins deux titres dans chaque levée du Grand Chelem.<br> <br>- Son classement en temps réel : <a href="https://www.rolandgarros.com/fr-fr/players/9801-n.djokovic"> - Classement officiel</a></div> <div id="img_djokovic"> <img src="djokovic_img.jpg" width="500"/> </div> <hr width="100%" align="left" id="barre2"> <h4><u>• Rafael Nadal :</u></h4> <div id="Bio_Nadal"> <p>EN PREPARATION</p> </div> </section> </body> </html>
Dites moi aussi les autres problemes Merci
Dernière modification par JPL ; 28/01/2022 à 22h23. Motif: ajout de balises HTML
Et la feuille de style ?
Rien ne sert de penser, il faut réfléchir avant - Pierre Dac
Code CSS :
Code:@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap'); body{ background-color: #141414; padding: 0; margin: 0; color: #fff; font-family: 'Lato', sans-serif; } body .page{ margin: 20px 80px; } /*Barre de recherche*/ nav{ display:flex; flex-wrap:wrap; justify-content: space-between; position:sticky; top: 0; background-color: #141414; padding: 10px 0px; z-index:2 } nav .onglets{ display:flex; flex-wrap:wrap; margin-top: 5px; } nav .onglets{ display:flex; flex-wrap:wrap; } nav .onglets a { margin-right: 20px; cursor:pointer; } nav .buttons button{ padding: 13px 20px; color: #fff; border:none; font-size: 15px; cursor:pointer; outline:none; } nav .buttons .login{ background-color: inherit; margin-right: 10px; color: #8f8f8f; } nav .buttons .register{ background-color: #f54266; } /* fin de la barre de recherche*/ /* Header */ header{ margin-top: 40px; background: url('https://wallpapercrafter.com/th800/90392-roger-federer-tennis-sports-hd-4k-5k-male-celebrities-boys-monochrome-black-and-white.jpg'); background-repeat: no-repeat; background-size: 1500px ; background-position: center; top:50px } header h1{ text-align:center; font-size: 70px; padding: 150px; } /* Fin Header */ h2{ font-size: 30px; position: relative; top: 100px; } #Bio_Roger{ position:relative; top: 100px; } #img_roger{ background-repeat: no-repeat; position:relative; bottom: 200px; left: 1450px; } #barre{ position:relative; bottom:216px } h3{ font-size: 30px; position: relative; bottom: 200px; } #Bio_Novak{ position: relative; bottom: 200px; } #img_djokovic{ background-repeat: no-repeat; position:relative; bottom: 420px; left: 1200px; } #barre2{ position:relative; bottom:430px; } h4{ font-size: 30px; position: relative; bottom: 400px; } #Bio_Nadal{ position: relative; bottom: 400px; }
Dernière modification par JPL ; 28/01/2022 à 22h29. Motif: ajout de la balise Code (#) pour garder l’indentation
Si quelqu'un a la courage de te le débugger tant mieux mais perso, que que je hais profondément le CSS, encore plus que le HTML, j'applique une technique simple dans ces cas là :
- je n'essaie pas de faire marcher une page avec une feuille de style aussi complète
- je regarde le comportement de composants beaucoup plus simples, soit en partant de la page complète vide et en ajoutant des éléments au fur et à mesure, soit en regardant comment chaque div se comporte
la barre de défilement horizontale c'est dû au position de tes images (#img_roger/#img_djokovic paramètre left=1450px/1200) tes images sont à 1450px/1200px de la gauche
et le reste doit aussi être dû au positionnement relatif défini
(même en normal, j'ai les div qui se superposent après redimensionnement sous chrome, sous firefox, c'est plus propre)
