Блог

Главная - Вопросы по программированию - Страницы моей веб-страницы, расположенные друг на друге

Страницы моей веб-страницы, расположенные друг на друге

#javascript #html #css #image #css-position

#javascript #HTML #css #изображение #css-position

Вопрос:

Я создаю веб-сайт, где на главной странице есть автоматический слайдер изображений, у меня такая проблема, когда другие страницы (служебная страница) перекрываются и остаются прямо на домашней странице. Я попытался исправить эту проблему, установив для домашней страницы значение 100vh, и изображение из сервиса остается прямо сверху.

Я попытался удалить абсолютное позиционирование на слайдере и desc, и это исказило внешний вид. Я попытался заставить код работать, создав фиктивный div и установив высоту, чтобы сдвинуть вниз div служебной страницы, и это вроде сработало, но я хочу, чтобы мой код был как можно более чистым, я знаю, что у кого-то есть лучший способ справиться с этим, пожалуйста, помогите.

Я также хочу, чтобы изображения располагались рядом с каждым как встроенные, и это не работает.

Три картинки, которые вы видите на автоматическом слайдере, представляют собой отдельную страницу, и я пытаюсь установить ее под домашней страницей (автоматический слайдер изображений)

 var slideIndex = 0;
var slides = document.getElementsByClassName("mySlides");
showSlides();

function showSlides() {
  var slideLength = slides.length;

  // Fade in the slide
  setTimeout(function(){
    if(slideIndex == slideLength) {
      slideIndex = 0;
    }
    slides[slideIndex].classList.add("fadeIn");
  }, 10);

  //Fade out the SLide
  setTimeout(function(){
    if(slideIndex == slideLength) {
      slideIndex = 0;
    }
    slides[slideIndex].classList.remove("fadeIn");
  }, 3980);

  slideIndex  ;
  setTimeout(showSlides, 4000);
}  
 .desc-container {
  position: absolute;
  bottom: 25%;
  left: 23%;
}

.desc {
  margin: auto;
  width: 450px;
  height: 250px;
  position: relative;
}

.mySlides {
  -webkit-transition: all 0.5s linear;
  -moz-transition: all 0.5s linear;
  -o-transition: all 0.5s linear;
  transition: all 0.5s linear;
  position: absolute;
  top:0;
  left:0;
  opacity: 0;
}

/*----------------------------------------------------
@Home page
-----------------------------------------------------*/
.main{
  width:calc(100%- 300px);
}

.homePage {
  overflow: auto;
}

.menu {
  text-align: center;
}

.slideshow-container {
  margin: auto;
}

.fadeIn {
  opacity:1;
}


/*----------------------------------------------------
@Service Page
-----------------------------------------------------*/
div .services {
  width:100%;
  overflow: auto;
}

.column {
  float: left;
  width: 350px;
  height: auto;
  overflow-x: hidden;
  padding:10px;
  margin-left: 300px;
}

.row {

}

.row:after {
  content: "";
  clear: both;
  display: table;
}  
 <div class="main">
  <section id="homePage">
    <div class="homePage">
      <div class="slideshow-container">
        <div class="mySlides">
          <img src="Images/eventbg1.jpg" style="width:100%">
          <div class="desc-container">
            <div class="desc p30 whitebg">
              <h6 class="greytxt">Luxury Events</h6>
              <h1 class="blacktxt">WE CREATE BEAUTIFUL EVENTS</h1>
              <p class="greytxt">Join us for a “No Question too Small, Large or Outrageous” Chat about All things Bridal! This is your chance to have two industry experts answer your queries on any topic that is keeping you up at night.</p>
            </div>
          </div>
        </div>
        <div class="mySlides">
          <img src="Images/restaurantbg1.jpg" style="width:100%">
          <div class="desc-container">
            <div class="desc p30 whitebg">
              <h6 class="greytxt">Creating Impact</h6>
              <h1 class="blacktxt"> STRATEGY AND SALES</h1>
              <p class="greytxt"></p>
            </div>
          </div>
        </div>
        <div class="mySlides">
          <img src="Images/memorialbg1.jpg" style="width:100%">
          <div class="desc-container">
            <div class="desc p30 whitebg">
              <h6 class="greytxt">Lasting Memories</h6>
              <h1 class="blacktxt">SERVING WITH LOVE</h1>
              <p class="greytxt"></p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div>
      <span class="dot"></span>
      <span class="dot"></span>
      <span class="dot"></span>
    </div>
  </section>
  <section>
    <div class="services">
      <div class="row">
        <div class="column">
          <img src="Images/eventbg2.jpg" alt="" style="width:100%">
        </div>
        <div class="column">
          <img src="Images/restaurantbg2.jpg" alt="" style="width:100%">
        </div>
        <div class="column">
          <img src="Images/memorialbg2.jpg" alt="" style="width:100%">
        </div>
      </div>
    </div>
  </section>
</div>

Комментарии:

1. Если сайт активен и вы можете поделиться им, ваши шансы на решение, вероятно, возрастут в 10 раз.

2. @Slbox Я добавил прямую ссылку. Пожалуйста, просмотрите и посмотрите, сможете ли вы помочь. Спасибо

3. насколько я знаю, нет аккуратного способа получить высоту от элемента с абсолютным расположением до относительно расположенного родительского элемента, они, как правило, немного взломаны. Я видел, что значительная часть адаптивных слайдеров использует JS для получения высоты, а затем встроенно вводит ее в контейнер слайдов, это был бы наиболее точный результат без изменения того, что у вас есть … или вы могли бы установить эти изображения в качестве фоновых изображений и принудительно установить высоту, подобную 100vh, для всего.

4. Спасибо @Jasmine. Было интересно. На самом деле я создал фиктивный div с высотой, и это принудительно уменьшило другой. Спасибо, я жду других комментариев — если у кого-нибудь есть другая идея о том, как это сделать. Еще раз благодарю Jas