Search code examples
csshtmlmarginpaddingbackground-color

Fill header with background colour

I currently have a heading 1 and logo on the same line of the header, and now I want to have a background colour for the header. I would ideally want this to come down below the nav bar as well. The issue I'm having is that the colour doesnt fill the top part of the page as I thought it would. It only covers the heading and it also covers the logo on the same line.

How would I stop the colour from going over the image and how would I make the colour spread from the top of the page to below the nav bar.

HTML:

.header img {
  float: left;
  background: #555;
}

.header h1 {
  font-family: "Lucida Sans Typewriter",Georgia,Arial;
  position: relative;
  top: 18px;
  left: 10px;
  padding-left: 40%;
  background-color:#D3D3D3;
}

.nav{
  width: 95%;
  margin: auto;
}

.nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  text-align: center;
}

.nav li {
  font-family: "Lucida Sans Typewriter",Georgia,Arial;
  font-size: 16px;
  display: inline;
  height: 40px;
  width: 19.925%;
  float: left;
}

.nav li a {
  display: block;
  color: white;
  text-decoration: none;
}

.nav li a:hover:not(.active) {
  background-color: #111;
}

.active {
  background-color: #4CAF50;
}

.nav li:last-child{
border-right: none;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<title>The Clay Oven Pizzeria</title>
</head>
  <header>
    <div class="header">
      <img src="images/pizzalogo.jpg" alt="logo"/>
      <h1> The Clay Oven Pizzeria</h1>
    </div>
    <br><br>
    <div class="nav">
      <ul>
        <li><a class="active" href="#index"> Home </li>
        <li><a href="#menu">Menu</li>
        <li><a href="#about">About</li>
        <li><a href="#about">Contact Us</li>
        <li><a href="#signup">Sign Up</li>
      </ul>
    </div>
  </header>
<body>
</body>
</html>

EDIT: This is what I mean about the background colour covering the logo: enter image description here

Solution

  • I swapped the HTML header tag to be within the body. Your body tag is where it will house all your html minus the head tag that has your title. Not a big deal since it renders fine, just a best practice. I also changed the css for your header img to have a z-index which places the image on top of the h1 tag and your h1 tag to have a z-index of -100 to always fall to the back.

    Hope this helps.

    .header img {
  float: left;
  background: #555;
  z-index: 100; /* added */
  width: 100px; /* added */
}

.header h1 {
  z-index: -1; /* added */
  font-family: "Lucida Sans Typewriter",Georgia,Arial;
  position: relative;
  top: 18px;
  left: 10px;
  padding-left: 40%;
  background-color:#D3D3D3;
}

.nav{
  width: 95%;
  margin: auto;
}

.nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  text-align: center;
}

.nav li {
  font-family: "Lucida Sans Typewriter",Georgia,Arial;
  font-size: 16px;
  display: inline;
  height: 40px;
  width: 19.925%;
  float: left;
}

.nav li a {
  display: block;
  color: white;
  text-decoration: none;
}

.nav li a:hover:not(.active) {
  background-color: #111;
}

.active {
  background-color: #4CAF50;
}

.nav li:last-child{
border-right: none;
}
    <!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<title>The Clay Oven Pizzeria</title>
</head>
<body>
  <header>
    <div class="header">
      <img src="https://images.template.net/wp-content/uploads/2014/10/28083349/Pick-a-Pizza-Logo-of-your-Own.jpg" 
       alt="logo"/>
      <h1> The Clay Oven Pizzeria</h1>
    </div>
    <br><br>
    <div class="nav">
      <ul>
        <li><a class="active" href="#index"> Home </li>
        <li><a href="#menu">Menu</li>
        <li><a href="#about">About</li>
        <li><a href="#about">Contact Us</li>
        <li><a href="#signup">Sign Up</li>
      </ul>
    </div>
  </header>
</body>
</html>