0

Refer to the grid-areas I have used below in the CSS code. "item1" is the header, with the navigation bar, "item2" is the menu aka the company logo I am trying to stick throughout the whole page, with its own column.

My CSS is the following, short and sweet for now until I figure this out:

<style>

.item1 {grid-area: header;}
.item2 {grid-area: menu;}
.item3 {grid-area: main;}
.item4 {grid-area: right;}
.item5 {grid-area: footer;}

.item1 {
  z-index: 2;
  font-size: 28px; 
  padding: 0px 10px;
  border: 10px solid black;
  float: right;
  position: relative;
}

li {
 display: inline-block;
}

.item2 {
  width: auto;
  position: fixed;
  z-index: 1;
  top: 20px;
  left: 10px;
  background: #eee;
  /*overflow-x: hidden;*/
 display:inline-block;
       float:left;
}

.grid-container {
 display: grid;
 grid-template-areas:
  'header header header header header header'
  'menu main main main right right'
  'menu footer footer footer footer footer';
 grid-gap: 5px;
 padding: 10px;
}

.grid-container > div {
 background-color: rgba(255, 255, 255, 0.8);
 text-align: center;
 padding: 20px 0;
}

</style>
<!DOCTYPE html>
<html lang="en">
<head>
  
  <!--  Meta  -->
  <meta charset="UTF-8" />
  <title>Landing Page for freeCodeCamp.com</title>
  
  <!--  Styles  -->
  <link rel="stylesheet" href="styles.css">
</head>
 
 <div class="grid-container">
  <div class="item2"> <!--menu fixed, at top-->

        <div id="logo">
    <img id="header-img" src="https://www.designevo.com/res/templates/thumb_small/blue-circle-and-broom.png" alt="Gemini Cleaning Services"/>
         </div>
   </div> <!--end of menu fixed, at top-->
       <div class="item1"> <!--header-->
    <nav id="nav-bar">
      <ul style="list-style: none;">
       <li><a class="nav-link" href="#">About</a></li>
       <li><a class="nav-link" href="#">Locations</a></li>
       <li><a class="nav-link" href="#">Contact</a></li>
     </nav>
     </div>  <!--end of header section-->
     

   
   <div class="item3"> <!--main section-->              
              
            <div class="grid">
             <div class="icon">
              <i class="fa fa-3x fa-fire"></i>
             </div>
    <div class="desc">
     <h2>Quality Guaranteed</h2>
     <p>We are not only reliable and consistent, but we guarantee your satisfaction.</p>
             </div> </div>
               <div class="grid">
            <div class="icon">
             <i class="fa fa-3x fa-fire"></i>
            </div>
    <div class="desc">
     <h2>Family-Owned</h2>
     <p>We're a company you can trust because we work together.</p>
    </div>
                  </div>
                  
   
         
    <iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/GBwELzvnrQg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
   
          <h3>If you've ever felt like this, <strong>let us help!</strong></h3>
    <br><h4>Enter your email below for a quote<br>and we'll get back to you shortly</h4>
         
  
         
          <div id="formdiv">
  <form id="form" action="https://www.freecodecamp.com/email-submit" method="get">
    <input type="email" id="email" placeholder="Email" required>
    <input type="submit" id="submit" value="Quote Me!" class="btn"></input>
  </form>
          </div>
   </div> <!--div for main aka item3-->
  
  <div id="item4"><!--right section-->
  </div><!--end of right section-->
  <div id="item5"><!--footer-->
  </div><!--end of footer-->
   
   
   
   </div>

   

</html>

Please help! Thanks!

Gabriella Ferreira
  • 1

2 Answers2

0

I think you mean item1 is the menu as it has the nav inside and item2 is the header with the logo. First you had the groups mis-named.

.item1 {grid-area: menu;}
.item2 {grid-area: header;}

Then you had position: fixed on your item1 which was causing the overlap with the above mis-naming. With these two removed and based on the way you defined your grid:

grid-template-areas:
        'header header header header header header'
        'menu main main main right right'
        'menu footer footer footer footer footer';

This should be what is correct.

<style>

.item1 {grid-area: menu;}
.item2 {grid-area: header;}
.item3 {grid-area: main;}
.item4 {grid-area: right;}
.item5 {grid-area: footer;}

.item1 {
  z-index: 2;
  font-size: 28px; 
  padding: 0px 10px;
  border: 10px solid black;
  position: relative;
}

li {
 display: inline-block;
}

.item2 {
  width: auto;
  z-index: 1;
  top: 20px;
  left: 10px;
  background: #eee;
  /*overflow-x: hidden;*/
 display:inline-block;
}

.grid-container {
 display: grid;
 grid-template-areas:
  'header header header header header header'
  'menu main main main right right'
  'menu footer footer footer footer footer';
 grid-gap: 5px;
 padding: 10px;
}

.grid-container > div {
 background-color: rgba(255, 255, 255, 0.8);
 text-align: center;
 padding: 20px 0;
}

</style>
<!DOCTYPE html>
<html lang="en">
<head>
  
  <!--  Meta  -->
  <meta charset="UTF-8" />
  <title>Landing Page for freeCodeCamp.com</title>
  
  <!--  Styles  -->
  <link rel="stylesheet" href="styles.css">
</head>
 
 <div class="grid-container">
  <div class="item2"> <!--menu fixed, at top-->

        <div id="logo">
    <img id="header-img" src="https://www.designevo.com/res/templates/thumb_small/blue-circle-and-broom.png" alt="Gemini Cleaning Services"/>
         </div>
   </div> <!--end of menu fixed, at top-->
       <div class="item1"> <!--header-->
    <nav id="nav-bar">
      <ul style="list-style: none;">
       <li><a class="nav-link" href="#">About</a></li>
       <li><a class="nav-link" href="#">Locations</a></li>
       <li><a class="nav-link" href="#">Contact</a></li>
     </nav>
     </div>  <!--end of header section-->
     

   
   <div class="item3"> <!--main section-->              
              
            <div class="grid">
             <div class="icon">
              <i class="fa fa-3x fa-fire"></i>
             </div>
    <div class="desc">
     <h2>Quality Guaranteed</h2>
     <p>We are not only reliable and consistent, but we guarantee your satisfaction.</p>
             </div> </div>
               <div class="grid">
            <div class="icon">
             <i class="fa fa-3x fa-fire"></i>
            </div>
    <div class="desc">
     <h2>Family-Owned</h2>
     <p>We're a company you can trust because we work together.</p>
    </div>
                  </div>
                  
   
         
    <iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/GBwELzvnrQg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
   
          <h3>If you've ever felt like this, <strong>let us help!</strong></h3>
    <br><h4>Enter your email below for a quote<br>and we'll get back to you shortly</h4>
         
  
         
          <div id="formdiv">
  <form id="form" action="https://www.freecodecamp.com/email-submit" method="get">
    <input type="email" id="email" placeholder="Email" required>
    <input type="submit" id="submit" value="Quote Me!" class="btn"></input>
  </form>
          </div>
   </div> <!--div for main aka item3-->
  
  <div id="item4"><!--right section-->
  </div><!--end of right section-->
  <div id="item5"><!--footer-->
  </div><!--end of footer-->
   
   
   
   </div>

   

</html>
jerrylow
  • 2,569
  • 1
  • 15
  • 25
0

To use the grid layout assign the grid-area to a wrapping div element for all the content. To layout within each grid area put the content in another div and then style that accordingly.

Your position:fixed is relative to the document and not the parent, see Fixed position but relative to container 

.item1 { grid-area: header; background: red; }
.item2 { grid-area: menu; background: blue; }
.item3 { grid-area: main; background: green; }
.item4 { grid-area: right; background: pink; }
.item5 { grid-area: footer; background: orange; }

.item1 > div { float: right }

#logo { position: fixed }

.grid-container {
    height: 500px;
    width: 500px;
 display: grid;
 grid-template-areas: 'header header header header header header'
  'menu main main main right right'
  'menu footer footer footer footer footer';
}

.grid-container > div { width: auto; height: auto; color: #FFF; }
<div class="grid-container">
    <div class="item1">       
      <div>header</div>
    </div>
    <div class="item2">
      <div>menu</div>
      <div id="logo">
       <img id="header-img" src="https://www.designevo.com/res/templates/thumb_small/blue-circle-and-broom.png" alt="Gemini Cleaning Services"/>
     </div>
    </div>
    <div class="item3">
      main
    </div>
    <div class="item4">
      right
    </div>
    <div class="item5">
      footer
    </div>
</div>
Dave Anderson
  • 11,836
  • 3
  • 58
  • 79