My footer is now overlaying both my content and navbar

Question

My footer is now overlaying both my content and navbar

I am facing an issue with my footer. When I test my new footer, it ends up covering the content and navbar. I have been trying to figure out how to solve this problem but haven't had any luck yet. Hopefully, I can find some answers here...

$(".togel.tblmenu").click(function () {
  $(".menu").toggleClass("sh");
});

body {
   min-height: 400px;
   margin-bottom: 100px;
   clear: both;
  background: #eff2f7;
}

a {
  left: -50;
  text-decoration: none;
  color: white;
  display: block;
  transition: 0.3s;
  font-size: 20px
}

a:hover {
  transition: 0.3s;
}

nav {
  position: fixed;
  top: 0;
  left: 20px;
  right: 0;
  background: #1e77b0;
  font-family: Palatino Linotype;
}

.title {
  display: inline-block;
  float: left;
  line-height: 50px;
}

.menu {
  display: inline-block;
  float: left;
}

.menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu ul li {
  display: inline-block;
}

.menu ul li a {
  padding: 0 50px;
  display: block;
  line-height: 50px;
}

.menu li:hover {
  background-color: #009cff;
}

.wrap {
  width: 95%;
  margin: 0 auto;
}

.tblmenubox {
  display: inline-block;
  float: right;
  line-height: 50px;
}

.tblmenu {
  display: block;
  position: absolute;
  width: 25px;
  height: 25px;
  background: #1e77b0;
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
}

.tblmenubox {
  display: none;
  visibility: hidden;
}

.kotakpersegi {
  display: block;
  position: absolute;
  left: -40px;
  width: 250px;
  height: 50px;
  background: #009cff;
  transform: translateY(-50%);
  -webkit-transform: skew(30deg);
  -moz-transform: skew(30deg);
  -o- transform: skew(30deg);
  transform: skew(30deg)
}

.logo {
  position: absolute;
  left: 50px;
}

@media screen and (max-width:1000px) {
  .kotakpersegi {
    width: 150%;
  }
  .logo {
    position: absolute;
    float: center;
    left: 25%;
  }
  .menu {
    display: none;
  }
  .tblmenubox {
    display: block;
    visibility: visible;
  }
  .menu.sh {
    display: block;
    position: absolute;
    top: 50px;
    background: #1e77b0;
    width: 100%;
    left: 0;
  }
  .menu a:hover {
    color: #eff2f7;
   background: #009cff;
  }
  .menu ul li {
    display: block;
    text-align: center;
  }
}  




/*navbar code*/

.footer-bottom {
  text-align: center;
  background-color: #1e77b0;
  width: 100%;
    position: relative;
    bottom: 50%;
}

.Footer-header h3 {
  font-family: 'Roboto Condensed', sans-serif;
  color: white;
  margin: 20px;
  text-align: left;
}

.Footer-Sponsored img {
  height: 128px;
  margin: 10px;
}

hr {
  margin: 20px;
  border: 0.5px solid lightblue;
}

.hr1 {
  margin: 40px;
}

.Footer-deep {
  margin: 30px;
}
.Footer-deep img {
  height: 30px;
  margin: 10px;
}

.Footer-deep h3 {
  color: white;
  font-family: 'Garamond', sans-serif;
  font-size: 100%; 
}
.content-wrapper { /* added a top margin */
  margin-top: 50px; /* We know this is the height because it is applied specifically in CSS */
  padding: 30px;
}

.content-wrapper h1 {
  font-family: Palatino Linotype;
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@1,300&display=swap" rel="stylesheet">
    

    
<!-- Navbar -->
<nav>
  <div class="wrap">
  <div class="title">
         <div class="kotakpersegi">
          <a href="">
            <img class="logo" src="img/logo.png" width="180" height="50">
          </a>
         </div>
  </div>
  <div class="tblmenubox">
    <div class="togel tblmenu">

    </div>
  </div>
  <div class="menu">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">Service</a></li>
      <li><a href="#">Fiture</a></li>
      <li><a href="#">Maps</a></li>
    </ul>
  </div>
  </div>
</nav>

<!-- Navbar -->

<div class="content-wrapper">
  <h1>San Andreas Motor Racing Grand Prix</h1>
</div>

<!-- content stop here -->

<footer class="footer-bottom">
  <div class="Footer-header">
    <h2>San Andreas Motor Racing</h2>
    <hr class="Light-line">
    <h3>Sponsored By</h3>
  </div>
  <div class="Footer-Sponsored">
    <img src="Sponsored/1.jpg">
    <img src="Sponsored/2.png">
    <img src="Sponsored/3.jpg">
  </div>
  <hr class="hr1">
  <div class="Footer-deep">
    <img src="img/logo.png" align="left">
    <h3 align="right">San Andreas Motor Racing Championship</h3>
  </div>
</footer>

I have attempted to change the position to relative, absolute, or whatever else, but it only led to more issues. Maybe someone here can help me fix this problem. Please, I have spent a whole day searching on Google for a solution and still have no clue...

html css

Answer 1

Answer №1

To fix the issue, simply include z-index:10 in the nav css style

body {
   min-height: 400px;
   margin-bottom: 100px;
   clear: both;
  background: #eff2f7;
}

a {
  left: -50;
  text-decoration: none;
  color: white;
  display: block;
  transition: 0.3s;
  font-size: 20px
}

a:hover {
  transition: 0.3s;
}

nav {
  position: fixed;
  top: 0;
  left: 20px;
  right: 0;
  background: #1e77b0;
  font-family: Palatino Linotype;
  z-index:10;
}

.title {
  display: inline-block;
  float: left;
  line-height: 50px;
}

.menu {
  display: inline-block;
  float: left;
}

.menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu ul li {
  display: inline-block;
}

.menu ul li a {
  padding: 0 50px;
  display: block;
  line-height: 50px;
}

.menu li:hover {
  background-color: #009cff;
}

.wrap {
  width: 95%;
  margin: 0 auto;
}

.tblmenubox {
  display: inline-block;
  float: right;
  line-height: 50px;
}

.tblmenu {
  display: block;
  position: absolute;
  width: 25px;
  height: 25px;
  background: #1e77b0;
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
}

.tblmenubox {
  display: none;
  visibility: hidden;
}

.kotakpersegi {
  display: block;
  position: absolute;
  left: -40px;
  width: 250px;
  height: 50px;
  background: #009cff;
  transform: translateY(-50%);
  -webkit-transform: skew(30deg);
  -moz-transform: skew(30deg);
  -o- transform: skew(30deg);
  transform: skew(30deg)
}

.logo {
  position: absolute;
  left: 50px;
}

@media screen and (max-width:1000px) {
  .kotakpersegi {
    width: 150%;
  }
  .logo {
    position: absolute;
    float: center;
    left: 25%;
  }
  .menu {
    display: none;
  }
  .tblmenubox {
    display: block;
    visibility: visible;
  }
  .menu.sh {
    display: block;
    position: absolute;
    top: 50px;
    background: #1e77b0;
    width: 100%;
    left: 0;
  }
  .menu a:hover {
    color: #eff2f7;
   background: #009cff;
  }
  .menu ul li {
    display: block;
    text-align: center;
  }
}  




/*navbar code*/

.footer-bottom {
  text-align: center;
  background-color: #1e77b0;
  width: 100%;
    position: relative;
    bottom: 50%;
}

.Footer-header h3 {
  font-family: 'Roboto Condensed', sans-serif;
  color: white;
  margin: 20px;
  text-align: left;
}

.Footer-Sponsored img {
  height: 128px;
  margin: 10px;
}

hr {
  margin: 20px;
  border: 0.5px solid lightblue;
}

.hr1 {
  margin: 40px;
}

.Footer-deep {
  margin: 30px;
}
.Footer-deep img {
  height: 30px;
  margin: 10px;
}

.Footer-deep h3 {
  color: white;
  font-family: 'Garamond', sans-serif;
  font-size: 100%; 
}
.content-wrapper { /* added a top margin */
  margin-top: 50px; /* We know this is the height because it is applied specifically in CSS */
  padding: 30px;
}

.content-wrapper h1 {
    font-family: Palatino Linotype;
    text-align: center;
}

<!DOCTYPE html>
<html>
<head>
    <title>SA-MR</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- CSS document -->
    <link rel="stylesheet" type="text/css" href="css/SAMRnavbar.css">
    <meta charset="utf-8">
  <!-- font -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@1,300&display=swap" rel="stylesheet">

</head>
<body>

<!-- Navbar -->
    <nav>
      <div class="wrap">
      <div class="title">
             <div class="kotakpersegi">
                <a href="">
                    <img class="logo" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/11/Test-Logo.svg/1175px-Test-Logo.svg.png" width="180" height="50">
                </a>
             </div>
      </div>
      <div class="tblmenubox">
        <div class="togel tblmenu">

        </div>
      </div>
      <div class="menu">
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">Contact</a></li>
          <li><a href="#">Service</a></li>
          <li><a href="#">Fiture</a></li>
          <li><a href="#">Maps</a></li>
        </ul>
      </div>
      </div>
    </nav>
    <script src="js/jquery.min.js"></script>
    <script type="text/javascript">
      $(".togel.tblmenu").click(function () {
      $(".menu").toggleClass("sh");
      });
    </script>
<!-- Navbar -->

<div class="content-wrapper">
  <h1>San Andreas Motor Racing Grand Prix</h1>
</div>

<!-- content stop here -->

<footer class="footer-bottom">
  <div class="Footer-header">
    <h2>San Andreas Motor Racing</h2>
    <hr class="Light-line">
    <h3>Sponsored By</h3>
  </div>
  <div class="Footer-Sponsored">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/11/Test-Logo.svg/1175px-Test-Logo.svg.png">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/11/Test-Logo.svg/1175px-Test-Logo.svg.png">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/11/Test-Logo.svg/1175px-Test-Logo.svg.png">
  </div>
  <hr class="hr1">
  <div class="Footer-deep">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/11/Test-Logo.svg/1175px-Test-Logo.svg.png" align="left">
    <h3 align="right">San Andreas Motor Racing Championship</h3>
  </div>
</footer>

</body>
</html>

Answer 2

To fix the issue, simply include z-index:10 in the nav css style

body {
   min-height: 400px;
   margin-bottom: 100px;
   clear: both;
  background: #eff2f7;
}

a {
  left: -50;
  text-decoration: none;
  color: white;
  display: block;
  transition: 0.3s;
  font-size: 20px
}

a:hover {
  transition: 0.3s;
}

nav {
  position: fixed;
  top: 0;
  left: 20px;
  right: 0;
  background: #1e77b0;
  font-family: Palatino Linotype;
  z-index:10;
}

.title {
  display: inline-block;
  float: left;
  line-height: 50px;
}

.menu {
  display: inline-block;
  float: left;
}

.menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu ul li {
  display: inline-block;
}

.menu ul li a {
  padding: 0 50px;
  display: block;
  line-height: 50px;
}

.menu li:hover {
  background-color: #009cff;
}

.wrap {
  width: 95%;
  margin: 0 auto;
}

.tblmenubox {
  display: inline-block;
  float: right;
  line-height: 50px;
}

.tblmenu {
  display: block;
  position: absolute;
  width: 25px;
  height: 25px;
  background: #1e77b0;
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
}

.tblmenubox {
  display: none;
  visibility: hidden;
}

.kotakpersegi {
  display: block;
  position: absolute;
  left: -40px;
  width: 250px;
  height: 50px;
  background: #009cff;
  transform: translateY(-50%);
  -webkit-transform: skew(30deg);
  -moz-transform: skew(30deg);
  -o- transform: skew(30deg);
  transform: skew(30deg)
}

.logo {
  position: absolute;
  left: 50px;
}

@media screen and (max-width:1000px) {
  .kotakpersegi {
    width: 150%;
  }
  .logo {
    position: absolute;
    float: center;
    left: 25%;
  }
  .menu {
    display: none;
  }
  .tblmenubox {
    display: block;
    visibility: visible;
  }
  .menu.sh {
    display: block;
    position: absolute;
    top: 50px;
    background: #1e77b0;
    width: 100%;
    left: 0;
  }
  .menu a:hover {
    color: #eff2f7;
   background: #009cff;
  }
  .menu ul li {
    display: block;
    text-align: center;
  }
}  




/*navbar code*/

.footer-bottom {
  text-align: center;
  background-color: #1e77b0;
  width: 100%;
    position: relative;
    bottom: 50%;
}

.Footer-header h3 {
  font-family: 'Roboto Condensed', sans-serif;
  color: white;
  margin: 20px;
  text-align: left;
}

.Footer-Sponsored img {
  height: 128px;
  margin: 10px;
}

hr {
  margin: 20px;
  border: 0.5px solid lightblue;
}

.hr1 {
  margin: 40px;
}

.Footer-deep {
  margin: 30px;
}
.Footer-deep img {
  height: 30px;
  margin: 10px;
}

.Footer-deep h3 {
  color: white;
  font-family: 'Garamond', sans-serif;
  font-size: 100%; 
}
.content-wrapper { /* added a top margin */
  margin-top: 50px; /* We know this is the height because it is applied specifically in CSS */
  padding: 30px;
}

.content-wrapper h1 {
    font-family: Palatino Linotype;
    text-align: center;
}

<!DOCTYPE html>
<html>
<head>
    <title>SA-MR</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- CSS document -->
    <link rel="stylesheet" type="text/css" href="css/SAMRnavbar.css">
    <meta charset="utf-8">
  <!-- font -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@1,300&display=swap" rel="stylesheet">

</head>
<body>

<!-- Navbar -->
    <nav>
      <div class="wrap">
      <div class="title">
             <div class="kotakpersegi">
                <a href="">
                    <img class="logo" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/11/Test-Logo.svg/1175px-Test-Logo.svg.png" width="180" height="50">
                </a>
             </div>
      </div>
      <div class="tblmenubox">
        <div class="togel tblmenu">

        </div>
      </div>
      <div class="menu">
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">Contact</a></li>
          <li><a href="#">Service</a></li>
          <li><a href="#">Fiture</a></li>
          <li><a href="#">Maps</a></li>
        </ul>
      </div>
      </div>
    </nav>
    <script src="js/jquery.min.js"></script>
    <script type="text/javascript">
      $(".togel.tblmenu").click(function () {
      $(".menu").toggleClass("sh");
      });
    </script>
<!-- Navbar -->

<div class="content-wrapper">
  <h1>San Andreas Motor Racing Grand Prix</h1>
</div>

<!-- content stop here -->

<footer class="footer-bottom">
  <div class="Footer-header">
    <h2>San Andreas Motor Racing</h2>
    <hr class="Light-line">
    <h3>Sponsored By</h3>
  </div>
  <div class="Footer-Sponsored">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/11/Test-Logo.svg/1175px-Test-Logo.svg.png">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/11/Test-Logo.svg/1175px-Test-Logo.svg.png">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/11/Test-Logo.svg/1175px-Test-Logo.svg.png">
  </div>
  <hr class="hr1">
  <div class="Footer-deep">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/11/Test-Logo.svg/1175px-Test-Logo.svg.png" align="left">
    <h3 align="right">San Andreas Motor Racing Championship</h3>
  </div>
</footer>

</body>
</html>

Answer 3

Answer №2

To fix this issue, try adding 'z-index: -1;' to the footer-bottom class.

If you want to learn more about z-indexing, check out this resource.

When it comes to HTML pages, they can be thought of as two-dimensional in basic cases where elements do not overlap. The z-index property allows you to control the layering of objects during rendering.

Boxes in web design have a "z-axis" in addition to their horizontal and vertical positions, which becomes important when they visually overlap. Learn more here

Answer 4

To fix this issue, try adding 'z-index: -1;' to the footer-bottom class.

If you want to learn more about z-indexing, check out this resource.

When it comes to HTML pages, they can be thought of as two-dimensional in basic cases where elements do not overlap. The z-index property allows you to control the layering of objects during rendering.

Boxes in web design have a "z-axis" in addition to their horizontal and vertical positions, which becomes important when they visually overlap. Learn more here

Answer 5

Answer №3

To improve the layout, adjust the z-order of your elements. Ensure that the z-index of the footer is lower than the z-index of the navbar (you can set z-index: -1 for the footer)

For additional information, please visit: https://developer.mozilla.org/en-US/docs/Web/CSS/z-index

Answer 6

To improve the layout, adjust the z-order of your elements. Ensure that the z-index of the footer is lower than the z-index of the navbar (you can set z-index: -1 for the footer)

For additional information, please visit: https://developer.mozilla.org/en-US/docs/Web/CSS/z-index

My footer is now overlaying both my content and navbar

Answer №1

Answer №2

Answer №3

Similar questions

Issue arises when CSS selectors do not function properly with absolutely positioned divs

Design inspired by dot matrix patterns

Implementing image change on dropdown selection using jQuery click event

Selection pseudo selectors for tooltips are a great way to provide additional

Ways to prevent an array from being reset

When an option is selected, the CSS class associated with that option is removed

Challenges with locating text within the innerHtml property of a VB WebBrowser Object

What is the right way to nest a SCSS rule for a specific selector within a list using the "&" symbol?

Tags that adhere to W3C compliance for struts

Replace the pixel measurements with percentage values

Ensure that all Woocommerce products have consistent height while allowing for variations in width

Steps for displaying an HTML table in Excel by clicking on a button

Is it possible to include a class in a 'label' element?

Retrieve data from an API and store it in a JSON array

What is the best way to create a website where images align perfectly with stacked cards?

Clever method for enabling image uploads upon image selection without needing to click an upload button using JQuery

Adjust the placement of image when changing the size of the window

There seems to be an issue with the functionality of the JavaScript Quiz as it is

Styling with CSS to accentuate the currently active tabs

Unable to access Bootstrap dropdown menu after initial ajax form submission