<!doctype html>
<html>
<head>
<!--Font Link-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
<!--CSS-->
<link href="SQIStyle.css" rel="stylesheet" type="text/css">
<title>Solarquake Studios</title>
<!--favicon-->
<link rel="icon" type="image/ico" sizes="128x128" href="Logo.ico"/>
<style>
</style>
</head>
<h1>SolarQuake Studios</h1>
<header>
<img src="Logo.ico" alt="logo" width="80" height="80">
</header>
<body>
<div class="container">
<div class="left-col">
<div class="scroll-bg">
<div class="scroll-div">
<div class="scroll-object">
<h3><u>Games</u></h3>
<p>Upcoming Projects</p>
<p></p>
</div>
</div>
</div>
</div>
<div class="center-col">
<div class="scroll-bg">
<div class="scroll-div">
<div class="scroll-object">
<h3><u>Esports</u></h3>
<p>The Hog Pen</p>
</div>
</div>
</div>
</div>
<div class="right-col">
<div class="scroll-bg">
<div class="scroll-div">
<div class="scroll-object">
<h3><u>Assets</u></h3>
<p>Game Art & Designs</p>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
© All Rights Reserved.
<p class ="secondary">Follow Us!</p>
<a href="https://www.youtube.com/channel/UChQzAj3OlDO3sqZl7frbY7g"><img src="YTLogo.png"
width="70"
height="70"
alt="logo"></a>
<a href="https://twitter.com/SQdevelopers"><img src="Twitterlogo.png"
width="64"
height="64"
alt="logo"></a>
</div>
</body>
</html>
La barre latérale de gauche n'est pas censée être ici en premier lieu, j'ai utilisé des conteneurs pour ces colonnes et les classes scroll-Div, scroll-BG et scroll-object sans faire de progrès. C'est tout mon code CSS jusqu'à présent. Merci d'avance.
h1 {
font-size: 40px;
line-height: 62px;
font-family: 'Press Start 2P', cursive;
text-align: center;
color: yellow;
}
h2 {
font-size: 40px;
color: white;
font-family: 'Press Start 2P', cursive;
}
h3 {
color: white;
}
header {
text-align: center;
padding-bottom: 10px;
}
.container div {
box-sizing: border-box;
min-height: 250px;
margin-left: 6.5%;
}
.left-col {
width: 25%;
float: left;
text-align: center;
color: floralwhite;
}
.right-col {
width: 25%;
float: left;
text-align: center;
color: floralwhite;
}
.center-col {
width: 25%;
float: left;
text-align: center;
color: floralwhite;
}
.footer {
clear: both;
text-align: center;
box-sizing: border-box;
padding-top: 5px;
color: yellow;
font-size: 7px;
}
body {
font-size: 20px;
font-family: 'Press Start 2P', cursive;
background-color: white;
background-image: url("Space.png");
}
.scroll-bg {
background-color: yellow;
width: 375px;
margin: 10% auto;
text-align: center;
}
.scroll-div {
background: rgb(0, 0, 0);
height: 400px;
overflow: hidden;
overflow-y: scroll;
text-align: center;
}
.scroll-object {
color: white;
font-family: 'Press Start 2P', cursive;
font-size: 15px;
text-align: center;
}
J'ai essayé de supprimer la barre latérale gauche et elle était jaune. Je ne trouve pas sa source dans le code. Entrez la description de l'image ici
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Quel gâchis.
Vous définissez la marge de chaque div à gauche à 6,5%. Remplacez le div .container (ce qui signifie que chaque div à l'intérieur du conteneur aura une marge de 6,5 %) en .container et supprimez la marge. Et ajoutez des marges gauche et droite dans chaque classe de col.
La barre latérale jaune est là car vous avez un div avec class="scroll-bg" Supprimez donc la partie scroll-bg du CSS et supprimez sa référence du HTML.
### Remove #### .scroll-bg { background-color: yellow; width: 375px; margin: 10% auto; text-align: center; }Exemple de travail - https://jsbin.com/wubuqolumo/edit?html, CSS, sortie