javascripthtmlcssslideshow

Slideshow covers up the other dividers

i m basically just getting into the html, css and js. and i have a problem which i have been fighting with for 2 days now... the slideshow covers up the first divider and it s not where it s supposed to be. under the first divider.

So I m really lost here. And I m sure this is not a very nice code. So if there s some advice to make it more compact, I'd be happy to receive the help.

var currentSlide = 0;
var slides = document.querySelectorAll('#slideshow-container img');

function showSlide(index) {
  slides.forEach(function(slide) {
    slide.classList.remove('active');

  });

  slides[index].classList.add('active');

}

function nextSlide() {
  currentSlide = (currentSlide + 1) % slides.length;
  showSlide(currentSlide);
}
setInterval(nextSlide, 3000); // Wechselt alle 3 Sekunden
showSlide(currentSlide);

function toggleMenu() {
  var navList = document.querySelector('.nav-list');
  navList.classList.toggle('active');

  var bars = document.querySelectorAll('.bar');
  bars.forEach(bar => bar.classList.toggle('change'));
}
body {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: larger;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#banner {
  width: 100%;
  display: block;
  align-items: center;
  max-height: 420px;
  background-color: #cc234c;
  object-fit: cover;
}

.navbar {
  background-color: rgba(248, 245, 245, 0.7);
  padding: 10px;
  align-items: center;
  position: absolute;
  z-index: 2;
  width: 100%;
  letter-spacing: 5px;
}

.nav-list {
  list-style-type: none;
  margin: 0;
  padding: 5px 25px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: all 2s ease;
  /* Add transition for smooth animation */
  max-height: 0;
  overflow: hidden;
}

.nav-list.active {
  max-height: 150px;
  /* Adjust the max-height based on your content */
}

.nav-list li {
  margin-bottom: 0px;
}

.nav-list a {
  text-decoration: none;
  color: #cc234c;
  display: block;
  text-transform: uppercase;
  transition: color 0.3s ease;
  padding-left: 50px;
  transition: text-decoration 5s ease;
  margin-right: 40px;
}

.nav-list a:hover {
  text-decoration: overline underline;
}

.menu-toggle {
  cursor: pointer;
}

.bar {
  width: 25px;
  height: 3px;
  background-color: #cc234c;
  margin: 5px 0;
  align-items: center;
  transition: transform 0.5s ease;
}

.bar.change:nth-child(1) {
  transform: rotate(-45deg) translate(-5px, 6px);
}

.bar.change:nth-child(2) {
  opacity: 0;
}

.bar.change:nth-child(3) {
  transform: rotate(45deg) translate(-5px, -6px);
}

@media screen and (min-width: 769px) {
  .nav-list {
    display: flex !important;
    max-height: none !important;
    flex-direction: row;
  }
  .nav-list li {
    margin-right: 20px;
    margin-bottom: 0;
  }
  .menu-toggle {
    display: none;
  }
}

.current {
  text-decoration: underline;
  color: #cc234c;
}

<!--slideshow-->#slideshow-container {
  text-align: center;
  align-items: center;
  margin: auto;
  overflow: hidden;
  border: 2px solid #000;
  align-items: center;
  padding: 0px;
}

#slideshow-container img {
  width: 100%;
  align-items: center;
  object-fit: cover;
  height: 500px;
  display: inline-block;
  transition: opacity 1s ease-in-out;
  opacity: 0;
  position: absolute;
  left: 0px;
  top: 0;
}

#slideshow-container img.active {
  opacity: 1;
  /* Set the opacity to 1 for the active (visible) image */
}
```
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Deine Webseite</title>
  <link rel="stylesheet" href="styles/style.css">

</head>

<body>

  <!-- Banner -->
  <img id="banner" src="images/gesundeSchuhe.jpg" alt="Banner">


  <!-- Navbar -->
  <div class="navbar">
    <div class="menu-toggle" onclick="toggleMenu()">
      <div class="bar"></div>
      <div class="bar"></div>
      <div class="bar"></div>
    </div>
    <ul class="nav-list">
      <li class="current"><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>

  <!-- Slideshow -->

  <div id="slideshow-container">
    <!-- Füge hier deine Slideshow-Bilder ein -->
    <img src="images/test1.jpeg" alt="Slide 1">
    <img src="images/test2.jpeg" alt="Slide 2">
    <img src="images/test3.jpeg" alt="Slide 3">

  </div>



  <script src="script.js">
  </script>

</body>

</html>

Solution

  • Proplem

    I don't mean to be offensive, but it was a little hard to know what your problem is. What I got is that you want to have a banner, the image on top, to stay the first element. Then, the navigations bar follows it. Finally comes the slideshow. Your code currently is putting the slideshow, which is supposed to be the third element, over the other elements.

    First, you have set the container to have no width or height, so it is invisible — you can see it if you set some padding and a background color. Yet, the container stated where expected. The children images are using a position: absolute and are set to top: 0 which will definitely put them on the top.

    Solution

    So, just delete the top: 0 from the #slideshow-container img {} in your CSS. That should fix your problem.

    Adding elements under it will result in hiding them. Therefore, you need to add the elements under them into their special div like...

    <div id="intro">
<!-- Some content...-->
</div>

    And then set the intro, using js, to go a little below the images, using margin or top + relative position — margin is just easier. Your code already targeted the slides in the slides variable. You can get the height of them, one is enough as they all have the same height, by adding the code below...

    var slideHieght = `${slides[0].clientHeight}px`;

var intro = document.querySelector('#intro');
intro.style.marginTop = slideHieght;

    This way, if intro is not absolute or have any other modifications, it should work just fine. For layout tutorials, you can check the links below or just Google "responsive layout design" to see many ways to achieve similar results. Those are just extras for later readings.

    https://www.smashingmagazine.com/2011/01/guidelines-for-responsive-web-design/

    https://www.avidlyagency.com/blog/the-web-page-layout-best-practices-checklist

    https://www.toptal.com/designers/ui/web-layout-best-practices