Halaman CSS saya membuat seluruh bagian body saya menghilang. Segala sesuatu di header tampak seperti seharusnya, tetapi secara harfiah apa pun yang saya masukkan ke dalam tubuh tidak akan muncul.

Jika saya mengeluarkan halaman CSS, itu baik-baik saja. Tapi begitu saya mengembalikan halaman CSS, badan itu menghilang. Saya hanya mencoba p, h*, div, p bersarang di div. Semuanya ditutup dengan benar; debugger tidak dapat menemukan sesuatu yang salah dengan kode.

html {
    font-family: "Source Sans Pro", "Staatliches," Arial, sans-serif;
    font-size: 16px;
    color: #000000;
}

/* links */
    a {
        color:#000000;
        font-weight: bold;
    }
    a:visited {
        color:#000000;
        font-weight: bold;
    }
    a:hover {
        color:#98ff98;
        font-weight: bold;
    }   
    a:active {
        color:#000000;
        font-weight: bold;
    }

/* header */
header {
    background-color: #98ff98;
    font-family: "Source Sans Pro", Arial, Helvetica, sans-serif;
    border-bottom: 1px solid #98ff98;
    width: 100%;
    top: 0;
    padding: 0;
    position: absolute;
}

#name {
    float: right;
    margin-right: 20px;
}
.name {
    text-transform: uppercase;
    font-family: "Staatliches", "Arial Black", sans-serif;
}

#nav {
    text-align: center;
    padding: 0 20px; 
   /* removed margin: 30px auto; b/c it looked weird */
}

li {
    display: inline-block;
    border: 1px solid #c8cfc8;
    border-radius: 55px;
    padding: 10px 10px;
    background-color: #c8cfc8;
}

/* body? */
body {
    background-color: #c8cfc8;
    color: #000000;
    font-family: "Source Sans Pro", "Staatliches," Arial, sans-serif;
}
<!DOCTYPE html>
    <html> 
      <head>
        <title>website</title>
        <link href="resources/css/index.css" type="text/css" rel="stylesheet">
        <link rel="preconnect" href="https://fonts.gstatic.com">
        <link href="https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700&family=Source+Sans+Pro:wght@400;700&family=Staatliches&display=swap" rel="stylesheet">
      </head>
      <header>
          <div id="nav">
              <ul>
                  <li class="link"><a href="/index">Home</a></li>
                  <li class="link">Contact</li>
                  <li class="link">About</li>
              </ul>
          </div>
          <div id="name">
            <h1 class="name">Username</h1>
            <h4 class="minibio">tag line/one sentence bio</h4>
          </div>
        </header>
     <body>
       <p>test</p>
    
       <h1>test</h1>
    
       <div>test</div>
    
       <div>
         <p>also test</p>
      </div>
     </body>
     </html>
0
Maria 10 Januari 2021, 07:41

3 jawaban

Jawaban Terbaik

Jawaban sederhana di sini. Teks berada di belakang header, jadi kita hanya perlu menggeser teks ke bawah. Kita dapat melakukan ini dengan menambahkan margin ke bagian atas teks.

Yang harus Anda lakukan adalah menambahkan margin-top berikut:

body {
  background-color: #c8cfc8;
  color: #000000;
  font-family: "Source Sans Pro", "Staatliches," Arial, sans-serif;
  margin-top: 150px;
}
0
Dominic van der Pas 10 Januari 2021, 04:54

postion: absolute di header Anda melakukan ini. Ini memungkinkan tubuh untuk pergi di belakang header, sehingga tubuh masih ada, tapi di belakang warna latar belakang hijau.

Mengganti position: absolute untuk ketinggian yang diinginkan dapat melakukan pekerjaan seperti yang saya lihat.

html {
    font-family: "Source Sans Pro", "Staatliches," Arial, sans-serif;
    font-size: 16px;
    color: #000000;
}

/* links */
    a {
        color:#000000;
        font-weight: bold;
    }
    a:visited {
        color:#000000;
        font-weight: bold;
    }
    a:hover {
        color:#98ff98;
        font-weight: bold;
    }   
    a:active {
        color:#000000;
        font-weight: bold;
    }

/* header */
header {
    background-color: #98ff98;
    font-family: "Source Sans Pro", Arial, Helvetica, sans-serif;
    border-bottom: 1px solid #98ff98;
    width: 100%;
    top: 0;
    padding: 0;
    height: 200px;
    /*position: absolute;*/
}

body {
   display: absolute;
}

#name {
    float: right;
    margin-right: 20px;
}
.name {
    text-transform: uppercase;
    font-family: "Staatliches", "Arial Black", sans-serif;
}

#nav {
    text-align: center;
    padding: 0 20px; 
   /* removed margin: 30px auto; b/c it looked weird */
}

li {
    display: inline-block;
    border: 1px solid #c8cfc8;
    border-radius: 55px;
    padding: 10px 10px;
    background-color: #c8cfc8;
}

/* body? */
body {
    background-color: #c8cfc8;
    color: #000000;
    font-family: "Source Sans Pro", "Staatliches," Arial, sans-serif;
}
<!DOCTYPE html>
<html> 
  <head>
    <title>website</title>
    <link href="resources/css/index.css" type="text/css" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700&family=Source+Sans+Pro:wght@400;700&family=Staatliches&display=swap" rel="stylesheet">
  </head>
  <header>
      <div id="nav">
          <ul>
              <li class="link"><a href="/index">Home</a></li>
              <li class="link">Contact</li>
              <li class="link">About</li>
          </ul>
      </div>
      <div id="name">
        <h1 class="name">Username</h1>
        <h4 class="minibio">tag line/one sentence bio</h4>
      </div>
    </header>
 <body>
   <p>test</p>

   <h1>test</h1>

   <div>test</div>

   <div>
     <p>also test</p>
  </div>
 </body>
 </html>
2
Isabella Riquetti 10 Januari 2021, 04:54

Seperti yang dikatakan Isabelle, sundulan Anda sekarang berada di depan tubuh. Namun, hal lain yang perlu diperhatikan adalah elemen header Anda harus di dalam badan. Elemen tubuh harus berisi semua elemen lainnya. Buat elemen div dengan konten seperti id untuk digunakan sebagai "tubuh" halaman dan atur beberapa bantalan ke atasnya.

<!DOCTYPE html>
<html> 
    <head>
    </head>
    <body>
        <header>
            <div id="nav">
                <ul>
                    <li class="link"><a href="/index">Home</a></li>
                    <li class="link">Contact</li>
                    <li class="link">About</li>
                </ul>
            </div>
            <div id="name">
                <h1 class="name">Username</h1>
                <h4 class="minibio">tag line/one sentence bio</h4>
            </div>
        </header>
        <div id="content">
            <p>test</p>    
            <h1>test</h1>    
            <div>test</div>
        </div>
    </body>
</html>

Dan tambahkan beberapa padding

#content {
    padding-top: 200px;
}
0
Alissa French 10 Januari 2021, 05:03