CODEWITHSUNDEEP
htmlcsslayoutheader
Beau
Beau

Reputation: 11

Can't get my header flush with top of page without ruining the layout

/*==================this is the part that is causing me headaches, I can't get the Header to stay flush with the top without losing the layout*/

header {
  background-image: url("images/song.png");
  background-color: #00020e;
  height: 210px;
  width: 1050px;
  margin: auto;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  top: 180;
  width: 100%;
  height: 40px;
}
li {
  float: left;
}
li a {
  display: block;
  color: #620000;
  text-align: center;
  padding: 10px 10px;
  text-decoration: none;
  font-family: 'oswald', sans-serif;
  font-weight: 600;
}
li a:hover {
  color: white;
}
li a:active {
  color: white;
}
body {
  background-image: url(images/v_bkgd.png);
  Background-repeat: no-repeat;
  background-position: center;
  background-color: #00020e;
}
P {
  font-family: 'roboto condensed', sans-serif;
  font-size: 16px;
  font-weight: 400;
}
#logo {
  float: left;
  padding: 5px 30px;
}
#nav_title {
  color: #620000;
  height: 170px;
  line-height: 170px;
}
#nav_title p {
  display: inline;
  font-size: 36px;
  font-family: 'oswald', sans-serif;
}
section {
  width: 700px;
  background-color: #d1d1d1;
  height: 600px;
  float: left
}
aside {
  width: 300px;
  background-color: #d1d1d1;
  height: 600px;
  float: left;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <style>
    @import url('https://fonts.googleapis.com/css?family=Oswald:200,400,600|Roboto+Condensed:400,400i,700');
  </style>
  <!-- Index.html -->
  <meta charset="UTF-8">
  <link rel="stylesheet" href="stylesheet.css" />

  <title>Lilydale Football Club</title>
</head>

<body>
  <header>
    <div id="fixed_header">
      <a id="logo" href="index.html">
        <img src="images/logo.png" alt="Lilydale Demons Logo" width="142" height="150" class="align-center" />
      </a>
      <div id="nav_title">
        <p style="font-weight:400;">LILYDALE</p>
        <p style="font-weight:200;">FOOTBALL CLUB</p>
      </div>
      <nav>
        <ul>
          <li> <a href="index.html">Home</a> 
          </li>
          <li> <a href="history.html">History</a> 
          </li>
          <li> <a href="players.html">Players</a> 
          </li>
          <li> <a href="sponsors.html">Sponsors</a> 
          </li>
          <li> <a href="news.html">News</a> 
          </li>
          <li> <a href="contact.html">Contact</a> 
          </li>
        </ul>
      </nav>
    </div>
  </header>

  <div id="content">
    <section></section>
    <aside></aside>
  </div>


</body>

</html>
So basically, I can't seem to get the header flush with the top of the page. I can see the background image at the top behind the header, I don't want that. I am clearly new to all of this and this is my first attempt at coding a website.

Here is a screenshot

Upvotes: 1

Views: 2336

Answers (2)

Tajveer Singh Nijjar
Tajveer Singh Nijjar

Reputation: 535

write following on the top of your CSS file (before any other code)

*
{
  margin:0;
  padding:0;
}

Every browser has some default padding and margin. By writing the above lines on the top your css file you are saying that every element (denoted by *) should have margin and padding as 0 when the page loads. I hope this helps

Upvotes: 0

Dylan Stark
Dylan Stark

Reputation: 2395

The reason there is a small gap here is because the standard element styling in many browsers includes automatic value for things like padding and margin. It's a good idea to initialize these CSS values for all elements when starting new projects.

Learn more about CSS resets here.

Adding padding:0 and margin:0 to your body solves the issue. I changed the styling of your header to better illustrate that it is indeed flush with the top of the page now. There is still a small gap between your logo and the top of the page however because of the padding on your logo.

/*==================this is the part that is causing me headaches, I can't get the Header tostay flush with the top without losing the layout it self*/

header {
  background-image: url("images/song.png");
  background-color: white;
  border:1px solid red;
  height: 210px;
  width: 1050px;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  top: 180;
  width: 100%;
  height: 40px;
}
li {
  float: left;
}
li a {
  display: block;
  color: #620000;
  text-align: center;
  padding: 10px 10px;
  text-decoration: none;
  font-family: 'oswald', sans-serif;
  font-weight: 600;
}
li a:hover {
  color: white;
}
li a:active {
  color: white;
}
body {
  padding:0;
  margin:0;
  background-image: url(images/v_bkgd.png);
  Background-repeat: no-repeat;
  background-position: center;
  background-color: #00020e;
}
P {
  font-family: 'roboto condensed', sans-serif;
  font-size: 16px;
  font-weight: 400;
}
#logo {
  float: left;
  padding: 5px 30px;
}
#nav_title {
  color: #620000;
  height: 170px;
  line-height: 170px;
}
#nav_title p {
  display: inline;
  font-size: 36px;
  font-family: 'oswald', sans-serif;
}
section {
  width: 700px;
  background-color: #d1d1d1;
  height: 600px;
  float: left
}
aside {
  width: 300px;
  background-color: #d1d1d1;
  height: 600px;
  float: left;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <style>
    @import url('https://fonts.googleapis.com/css?family=Oswald:200,400,600|Roboto+Condensed:400,400i,700');
  </style>
  <!-- Index.html -->
  <meta charset="UTF-8">
  <link rel="stylesheet" href="stylesheet.css" />

  <title>Lilydale Football Club</title>
</head>

<body>
  <header>
    <div id="fixed_header">
      <a id="logo" href="index.html">
        <img src="images/logo.png" alt="Lilydale Demons Logo" width="142" height="150" class="align-center" />
      </a>
      <div id="nav_title">
        <p style="font-weight:400;">LILYDALE</p>
        <p style="font-weight:200;">FOOTBALL CLUB</p>
      </div>
      <nav>
        <ul>
          <li> <a href="index.html">Home</a> 
          </li>
          <li> <a href="history.html">History</a> 
          </li>
          <li> <a href="players.html">Players</a> 
          </li>
          <li> <a href="sponsors.html">Sponsors</a> 
          </li>
          <li> <a href="news.html">News</a> 
          </li>
          <li> <a href="contact.html">Contact</a> 
          </li>
        </ul>
      </nav>
    </div>
  </header>

  <div id="content">
    <section></section>
    <aside></aside>
  </div>


</body>

</html>

Upvotes: 1

Related Questions