Bilah putih muncul di bagian atas halaman untuk bagian yang dimaksudkan untuk memuat gambar. Dengan menghapus berbagai bagian halaman web, saya menemukan bahwa menghapus label pembuka dan penutup memperbaikinya, tetapi saya masih perlu memasukkannya. Juga, menghapus bootstrap juga memperbaiki masalah tetapi sekali lagi, saya akan membutuhkan bootstrap nanti. Saya benar-benar tidak tahu apa yang menyebabkan masalah ini.

Ini dokumen index.html saya my

!doctype html>
<html lang="en" dir="ltr">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
    <link href="css/style.css" rel="stylesheet">
    <title>Tyler Wong Portfolio</title>
  </head>
  <body>

    <input type="checkbox" id="check">
    <label for="check">
      <i class="bi bi-list" id="menu-open"></i>
      <i class="bi bi-x" id="menu-close"></i>
    </label>
    <div class="sidebar">
      <header>Tyler Wong</header>
      <ul>
        <li> <a href="#"> <i class="bi bi-house-door"></i> Home </a> </li>
        <li> <a href="#"> <i class="bi bi-person"></i> About </a> </li>
        <li> <a href="#"> <i class="bi bi-code-square"></i> Projects </a> </li>
        <li> <a href="#"> <i class="bi bi-mailbox"></i> Contact </a> </li>

      </ul>
    </div>

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

    <section></section>

  </body>
</html>

Ini adalah dokumen style.css saya

*{
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
}
body{
  font-family: 'Raleway', sans-serif;
}
.sidebar{
  top:0;
  position: fixed;
  left: -250px;
  width: 250px;
  height: 100%;
  background: rgb(4,11,20);
  transition: all .5s ease;
}
.sidebar header{
  font-size: 22px;
  color: white;
  text-align: center;
  line-height: 70px;
  background: rgb(4,11,20);
  user-select: none;
}
.sidebar ul a {
  display: block;
  height: 100%;
  width: 100%;
  line-height: 65px;
  font-size: 20px;
  color: white;
  padding-left: 40px;
  transition:0.3s;
  opacity: 0.8;
}
ul li:hover a{
  padding-left: 45px;
  opacity: 1;
}
.sidebar ul a i{
  margin-right: 8px;
}
#check{
  display: none;
}
label #menu-open,label #menu-close{
  position: absolute;
  cursor: pointer;
}
label #menu-open{
  left: 40px;
  top: 15px;
  font-size: 35px;
  color: black;
  padding: 6px 12px;
  transition: all .5s;
}

label #menu-close{
  z-index: 1111;
  left: 195px;
  top: 15px;
  font-size: 30px;
  color: white;
  padding: 4px 9px;
  opacity: 0;
  transition: all .5s;
  transition-delay: .5s;
}
#check:checked ~ .sidebar{
  left:0;
}
#check:checked ~ label #menu-open{
  left: 250px;
  opacity: 0;
  pointer-events: none;
}
#check:checked ~ label #menu-close{
  opacity:1;
}


section{
  background: url("../assets/background.png") no-repeat;
  background-position: center;
  background-size: cover;
  height: 100vh;
  transition: all .5s;
}

Picture of the webpage currently.

0
Tyler Wong 12 Mei 2021, 05:49

3 jawaban

Jawaban Terbaik

Masalahnya adalah <label for="check"> Anda menempatkan elemen ini di atas sebagai inline-block, solusi sederhana adalah mengubahnya menjadi

<label for="check" style="display: inline;">

* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
}
body{
  font-family: 'Raleway', sans-serif;
}
.sidebar{
  top:0;
  position: fixed;
  left: -250px;
  width: 250px;
  height: 100%;
  background: rgb(4,11,20);
  transition: all .5s ease;
}
.sidebar header{
  font-size: 22px;
  color: white;
  text-align: center;
  line-height: 70px;
  background: rgb(4,11,20);
  user-select: none;
}
.sidebar ul a {
  display: block;
  height: 100%;
  width: 100%;
  line-height: 65px;
  font-size: 20px;
  color: white;
  padding-left: 40px;
  transition:0.3s;
  opacity: 0.8;
}
ul li:hover a{
  padding-left: 45px;
  opacity: 1;
}
.sidebar ul a i{
  margin-right: 8px;
}
#check{
  display: none;
}
label #menu-open,label #menu-close{
  position: absolute;
  cursor: pointer;
}
label #menu-open{
  left: 40px;
  top: 15px;
  font-size: 35px;
  color: black;
  padding: 6px 12px;
  transition: all .5s;
}

label #menu-close{
  z-index: 1111;
  left: 195px;
  top: 15px;
  font-size: 30px;
  color: white;
  padding: 4px 9px;
  opacity: 0;
  transition: all .5s;
  transition-delay: .5s;
}
#check:checked ~ .sidebar{
  left:0;
}
#check:checked ~ label #menu-open{
  left: 250px;
  opacity: 0;
  pointer-events: none;
}
#check:checked ~ label #menu-close{
  opacity:1;
}

section {
  background: red no-repeat;
  background-position: center;
  background-size: cover;
  height: 100vh;
  transition: all .5s;
}
<!doctype html>
<html lang="en" dir="ltr">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
    <!-- Ignore for Code Snippet -->
    <!-- <link href="css/style.css" rel="stylesheet"> -->
    <title>Tyler Wong Portfolio</title>
  </head>
  <body>

    <input type="checkbox" id="check">
    <label for="check" style="display: inline;">
      <i class="bi bi-list" id="menu-open"></i>
      <i class="bi bi-x" id="menu-close"></i>
    </label>
    <div class="sidebar">
      <header>Tyler Wong</header>
      <ul>
        <li> <a href="#"> <i class="bi bi-house-door"></i> Home </a> </li>
        <li> <a href="#"> <i class="bi bi-person"></i> About </a> </li>
        <li> <a href="#"> <i class="bi bi-code-square"></i> Projects </a> </li>
        <li> <a href="#"> <i class="bi bi-mailbox"></i> Contact </a> </li>

      </ul>
    </div>

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

    <section></section>

  </body>
</html>
3
Blaztix 12 Mei 2021, 03:19

Saya telah menjalankan kode yang sama di lokal saya, masalahnya sepertinya ada di sini

label {
     display: inline-block;
 }

Itu memperbaiki kesalahan komentar properti tampilan ini dan melihatnya akan mencerminkan

1
Gopal Oswal 12 Mei 2021, 06:18

Jika Anda memindahkan <section> ke atas html itu harus pergi lakukan untuk aliran html. Pilihan Anda yang lain adalah memberinya posisi negatif negative

background: {
  position: relative;
  top:-25px;
}
1
Justin 12 Mei 2021, 03:21