Je code ce site Web comme projet final de mon cours HTML sur freecodecamp et je rencontre deux erreurs que je ne sais pas comment corriger. D'un côté, j'ai une petite ligne blanche entre ma barre de navigation et la première section. D'un autre côté, j'utilise le sélecteur de survol pour rendre gris l'arrière-plan du lien de la barre de navigation tout en gardant une petite ligne sombre en bas.
La ligne blanche ressemble à ceci :
Pour corriger la première ligne blanche, j'ai essayé de supprimer le remplissage et la marge (cela a supprimé une partie de l'espace sur le bord, mais pas l'espace restant entre les deux sections. J'ai également changé tous les arrière-plans CSS en bleu. Quelle partie remplit l'espace , et il ne devient bleu que lorsque je change l'arrière-plan du corps, qui a déjà des marges et un remplissage définis sur 0
.Voici à quoi ressemble la petite ligne noire : Comme vous pouvez le voir, il y a une petite ligne noire sous le fond gris !
Pour cela, j'ai essayé de comprendre l'espace exact occupé par les différents onglets de la barre de navigation (li, ul, a...) mais en vain, je ne comprends vraiment pas comment ces onglets décident de prendre de la place ou non dans la barre de navigation. Je ne trouve aucune étiquette occupant un espace supplémentaire sur la ligne noire.
Voici le HTML :
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Double Team Cooking</title>
<link rel='stylesheet' href='styles.css'>
</head>
<body>
<section id="welcome">
<nav id='navbar'>
<ul>
<li><a href="#whodis">Who Am I?</a></li>
<li><a href="#Projectos">My Projects</a></li>
<li><a href="#hola">Contact</a></li>
</ul>
</nav>
</section>
<section id='Who-Am-I'>
<h2 id='whodis'>Who Am I?</h2>
<p> Hey, I'm Pedro.</p>
<p> A man, a cook, a student, a coder, a business developer, a problem solver.</p>
</section>
<section id='Projects'>
<h2 id='Projectos' class="project-title">My Projects</h2>
<p>So, what am I working on?</p>
<div id="electriccar"></div>
<div id="website"></div>
<div id="TWR"></div>
</section>
<section id="Contact">
<h2 id="hola">Contact Me</h2>
<p>You'd like to reach out? Of course! Feel free to reach out to me through these mediums!</p>
</section>
</body>
</html>
Voici le CSS :
*,
*::after,
*::before {
box-sizing: border-box;
}
body {
width: 100%;
padding: 0px;
margin: 0px;
}
nav {
display: flex;
flex-direction: row;
justify-content: center;
width: 100%;
height: 40px;
background-color: rgb(24,24,24);
}
nav ul {
display: flex;
justify-content: space-evenly;
list-style-type: none;
padding-left: 0px;
width: 100%;
height: 100%;
margin: 0px;
align-items: center;
}
nav li {
display: inline-block;
}
li a {
text-decoration: none;
color: white;
padding: 10px;
}
li a:hover {
background-color: rgb(64,64,64);
}
#Who-Am-I {
height: 100%;
background-color: rgba(0,30,0,0.8);
}
Merci beaucoup pour votre aide !
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Essayez-le
* { padding: 0; margin: 0; }