CODEWITHSUNDEEP
htmlcss
Maria
Maria

Reputation: 3

CSS makes entire HTML body disappear

My CSS page makes my entire body section disappear. Everything in the header appears like it should, but literally anything I put in the body will not show up.

If I take out the CSS page, it comes in just fine. But once I put the CSS page back, the body disappears. I tried just p, h*, div, p nested in div. Everything is closed properly; the debugger can't find anything wrong with the code.

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>

Upvotes: 0

Views: 633

Answers (3)

Alissa French
Alissa French

Reputation: 56

As Isabelle said, your header is now sitting in front of the body. However, another thing to note is that your header element should be inside the body. The body element should contain all the other elements. Create a div element with an id like content to use as the "body" of the page and set some padding to the top of it.

<!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>

And add some padding

#content {
    padding-top: 200px;
}

Upvotes: 0

Dominic van der Pas
Dominic van der Pas

Reputation: 142

Simple answer here. The text is behind the header, so we just need to shift the text downwards. We can do this by adding a margin to the top of the text.

All you have to do is add the following margin-top:

body {
  background-color: #c8cfc8;
  color: #000000;
  font-family: "Source Sans Pro", "Staatliches," Arial, sans-serif;
  margin-top: 150px;
}

Upvotes: 0

Isabella Riquetti
Isabella Riquetti

Reputation: 425

The postion: absolute in your header is doing this. It's allowing the body to go behind the header, so the body still there, but is behind the green background color.

Replacing the position: absolute for the desired height can do the job as I saw.

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>

Upvotes: 1

Related Questions