Positioning of div over Slideshow

Asked

Viewed 68 times

2

I have the following page:

<!doctype html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Slider</title>
      <meta name="viewport" content="width=device-width">
      <link rel="stylesheet" href="_css/aos.css">
      <link rel="stylesheet" type="text/css" href="_css/jquery.cycle2.css">
      <script type="text/javascript" src="_js/jquery.js"></script>
      <script type="text/javascript" src="_js/jquery.cycle2.min.js"></script>
      <style>
         @import url('http://fonts.googleapis.com/css?family=Open+Sans');
         * {
         font-family: 'Open Sans';
         margin: 0;
         padding: 0;
         box-sizing: content-box;
         }
         img {
         border: 0;
         max-width: 100%;
         }
         ul {
         list-style: none;
         }
         ul li {
         display: inline;
         }
         .aos-all {
         width: 1000px;
         max-width: 98%;
         margin: 10vh auto 0 auto;
         }
         .aos-item {
         display: inline-block;
         float: left;
         width: 40%;
         height: 300px;
         padding: 20px;
         }
         .aos-item__inner {
         position: relative;
         width: 100%;
         height: 100%;
         float: left;
         background: #1da4e2;
         line-height: 260px;
         text-align: center;
         color: #fff;
         }
         @media screen and (max-width: 800px) {
         .aos-item {
         width: 50%;
         }
         }
         .logo {
         width : 432px;
         -webkit-animation : logo-anim 1s;
         -moz-animation : logo-anim 1s;
         -o-animation : logo-anim 1s;
         animation : logo-anim 1s;
         }
         @-webkit-keyframes logo-anim {
         0% {
         opacity : 0;
         transform : translateY(-50px);
         -webkit-transform : translateY(-50px);
         -moz-transform : translateY(-50px);
         -o-transform : translateY(-50px);
         -ms-transform : translateY(-50px);
         }
         100% {
         opacity : 1;
         transform : translateY(0px);
         -webkit-transform : translateY(0px);
         -moz-transform : translateY(0px);
         -o-transform : translateY(0px);
         -ms-transform : translateY(0px);
         }
         }
         @-moz-keyframes logo-anim {
         0% {
         opacity : 0;
         transform : translateY(-50px);
         -webkit-transform : translateY(-50px);
         -moz-transform : translateY(-50px);
         -o-transform : translateY(-50px);
         -ms-transform : translateY(-50px);
         }
         100% {
         opacity : 1;
         transform : translateY(0px);
         -webkit-transform : translateY(0px);
         -moz-transform : translateY(0px);
         -o-transform : translateY(0px);
         -ms-transform : translateY(0px);
         }
         }
         @-o-keyframes logo-anim {
         0% {
         opacity : 0;
         transform : translateY(-50px);
         -webkit-transform : translateY(-50px);
         -moz-transform : translateY(-50px);
         -o-transform : translateY(-50px);
         -ms-transform : translateY(-50px);
         }
         100% {
         opacity : 1;
         transform : translateY(0px);
         -webkit-transform : translateY(0px);
         -moz-transform : translateY(0px);
         -o-transform : translateY(0px);
         -ms-transform : translateY(0px);
         }
         }
         @keyframes logo-anim {
         0% {
         opacity : 0;
         transform : translateY(-50px);
         -webkit-transform : translateY(-50px);
         -moz-transform : translateY(-50px);
         -o-transform : translateY(-50px);
         -ms-transform : translateY(-50px);
         }
         100% {
         opacity : 1;
         transform : translateY(0px);
         -webkit-transform : translateY(0px);
         -moz-transform : translateY(0px);
         -o-transform : translateY(0px);
         -ms-transform : translateY(0px);
         }
         }
         .logo-atividades {
         position : absolute;
         top : 0;
         center : 0;
         width : 100%;
         height : 500px;
         text-align : center;
         overflow : hidden;
         z-index : 20;
         }
         .atividades {
         color : #FFF;
         height : 115px;
         overflow : hidden;
         position : absolute;
         top : 80%;
         margin-top : -176px;
         width : 100%;
         pointer-events : none;
         text-align : center;
         z-index : 10;
         }
         .atividades a {
         text-decoration : none;
         }
         .atividades ul {
         list-style : none;
         padding : 0;
         margin : 10px 0 0;
         position : relative;
         height : 100px;
         font-size : 36px;
         font-weight : 300;
         text-align : center;
         font-family : 'Lato', sans-serif;
         letter-spacing : 5px;
         text-transform : uppercase;
         z-index : 100;
         }
         .atividades ul li {
         width : 100%;
         text-align : center;
         position : absolute;
         opacity : 0;
         top : 85px;
         line-height : 100px;
         -webkit-transition : all 0.5s ease-in-out;
         -moz-transition : all 0.5s ease-in-out;
         -o-transition : all 0.5s ease-in-out;
         transition : all 0.5s ease-in-out;
         transition-timing-function : ease;
         -webkit-transition-timing-function : ease; /* Safari and Chrome */
         }
         .atividades ul li.ativa {
         opacity : 1;
         top : 0;
         -webkit-transition : all 1s ease-in-out;
         -moz-transition : all 1s ease-in-out;
         -o-transition : all 1s ease-in-out;
         transition : all 1s ease-in-out;
         transition-timing-function : ease;
         -webkit-transition-timing-function : ease; /* Safari and Chrome */
         }
         }
      </style>
   </head>
   <body>
      <div class="cycle-slideshow"
         data-cycle-fx=fadeout
         data-cycle-timeout=5000
         data-cycle-pause-on-hover="true"
         data-cycle-slides="div.slide">
         <div class="logo-atividades">
            <div style="margin-top: 100px;">
               <a href="http://www.funerariasaopedro.net.br"> 
               <img class="logo" src="_img/logoFuneraria.png" alt="Logo"/> 
               </a>
               <div class="atividades">
                  <ul>
                     <li class="ativa">Agência Funerária</li>
                     <li>Funerais</li>
                     <li>Cremações</li>
                     <li>Trasladações</li>
                     <li>Tanatopraxias</li>
                     <li>Exumações</li>
                     <li>Artigos Religiosos</li>
                     <li>Atendimento 24h</li>
                  </ul>
               </div>
            </div>
         </div>
         <!-- prev/next links -->
         <div class="cycle-prev"></div>
         <div class="cycle-next"></div>
         <div class="cycle-pager"></div>
         <div class="slide"> <img  src="_img/_banner/_site/1.png" /> </div>
         <div class="slide"> <img  src="_img/_banner/_site/2.png" /> </div>
         <div class="slide"> <img  src="_img/_banner/_site/3.png" /> </div>
         <div class="slide"> <img  src="_img/_banner/_site/4.png" /> </div>
      </div>
      <div class="aos-item" data-aos="fade-right">
         <div class="aos-item__inner">
            <h3>Esquerda</h3>
         </div>
      </div>
      <div class="aos-item" data-aos="fade-left">
         <div class="aos-item__inner">
            <h3>Direita</h3>
         </div>
      </div>
      <div class="aos-item" data-aos="fade-up">
         <div class="aos-item__inner">
            <h3>Baixo Cima</h3>
         </div>
      </div>
      <div class="aos-item" data-aos="fade-down">
         <div class="aos-item__inner">
            <h3>Cima Baixo</h3>
         </div>
      </div>
      <div class="aos-item" data-aos="fade-in">
         <div class="aos-item__inner">
            <h3>Baixo Cima</h3>
         </div>
      </div>
      <div class="aos-item" data-aos="fade-in">
         <div class="aos-item__inner">
            <h3>Cima Baixo</h3>
         </div>
      </div>
      <script>
         function homeTitleAnimation(){
             var interval;
             var counter = 1;
             var myFunc = function() {
                 var cur = $('.atividades ul li').length;
                 if(cur == counter) {
                     $('.atividades ul li.ativa').removeClass('ativa');
                     $('.atividades ul li').first().addClass('ativa');
                     counter = 1;
                 } else {
                     counter++;
                     $('.atividades ul li.ativa').removeClass('ativa').next().addClass('ativa');

                 }
             };
             interval = setInterval(myFunc, 4000);
         }

         homeTitleAnimation();  
      </script>
      <script src="_js/aos.js"></script> 
      <script>
         AOS.init({
           easing: 'ease-in-out-sine'
         });  
      </script> 
   </body>
</html>

Everything works correctly except for the positioning of the logo and the ul  which rotate on the Slideshow I’m failing to position them on the Slideshow.

<div class="cycle-slideshow"
   data-cycle-fx=fadeout
   data-cycle-timeout=5000
   data-cycle-pause-on-hover="true"
   data-cycle-slides="div.slide">
   <div class="logo-atividades">
      <div style="margin-top: 100px;">
         <a href="http://www.funerariasaopedro.net.br"> 
         <img class="logo" src="_img/logoFuneraria.png" alt="Logo"/> 
         </a>
         <div class="atividades">
            <ul>
               <li class="ativa">Agência Funerária</li>
               <li>Funerais</li>
               <li>Cremações</li>
               <li>Trasladações</li>
               <li>Tanatopraxias</li>
               <li>Exumações</li>
               <li>Artigos Religiosos</li>
               <li>Atendimento 24h</li>
            </ul>
         </div>
      </div>
   </div>
   <!-- prev/next links -->
   <div class="cycle-prev"></div>
   <div class="cycle-next"></div>
   <div class="cycle-pager"></div>
   <div class="slide"> <img  src="_img/_banner/_site/1.png" /> </div>
   <div class="slide"> <img  src="_img/_banner/_site/2.png" /> </div>
   <div class="slide"> <img  src="_img/_banner/_site/3.png" /> </div>
   <div class="slide"> <img  src="_img/_banner/_site/4.png" /> </div>
</div>

Where am I going wrong?

This code can be seen in :

http://funerariasaopedro.net.br/novo/

On the page, if you give a Ctr+a, may be noted in the right corner and below the slide,  to ul running normally. But the correct position is in the middle of the slide and downtown.

With respect to the logo that is hidden behind the slide, its position is above the slide and above ul

css html5 css3

1 answer

1


Carlos vc only need to change two lines of CSS

Increase the value of z-index in that div .logo-atividades { z-index : 999; } before it was 20

Already in your UL put a left 0 this way to center the text in the slider .atividades ul li { left: 0; }

Below follows its full code already with the correction and comments in CSS

<!doctype html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Slider</title>
      <meta name="viewport" content="width=device-width">
      <link rel="stylesheet" href="_css/aos.css">
      <link rel="stylesheet" type="text/css" href="_css/jquery.cycle2.css">
      <script type="text/javascript" src="_js/jquery.js"></script>
      <script type="text/javascript" src="_js/jquery.cycle2.min.js"></script>
      <style>
         @import url('http://fonts.googleapis.com/css?family=Open+Sans');
         * {
         font-family: 'Open Sans';
         margin: 0;
         padding: 0;
         box-sizing: content-box;
         }
         img {
         border: 0;
         max-width: 100%;
         }
         ul {
         list-style: none;
         }
         ul li {
         display: inline;
         }
         .aos-all {
         width: 1000px;
         max-width: 98%;
         margin: 10vh auto 0 auto;
         }
         .aos-item {
         display: inline-block;
         float: left;
         width: 40%;
         height: 300px;
         padding: 20px;
         }
         .aos-item__inner {
         position: relative;
         width: 100%;
         height: 100%;
         float: left;
         background: #1da4e2;
         line-height: 260px;
         text-align: center;
         color: #fff;
         }
         @media screen and (max-width: 800px) {
         .aos-item {
         width: 50%;
         }
         }
         .logo {
         width : 432px;
         -webkit-animation : logo-anim 1s;
         -moz-animation : logo-anim 1s;
         -o-animation : logo-anim 1s;
         animation : logo-anim 1s;
         }
         @-webkit-keyframes logo-anim {
         0% {
         opacity : 0;
         transform : translateY(-50px);
         -webkit-transform : translateY(-50px);
         -moz-transform : translateY(-50px);
         -o-transform : translateY(-50px);
         -ms-transform : translateY(-50px);
         }
         100% {
         opacity : 1;
         transform : translateY(0px);
         -webkit-transform : translateY(0px);
         -moz-transform : translateY(0px);
         -o-transform : translateY(0px);
         -ms-transform : translateY(0px);
         }
         }
         @-moz-keyframes logo-anim {
         0% {
         opacity : 0;
         transform : translateY(-50px);
         -webkit-transform : translateY(-50px);
         -moz-transform : translateY(-50px);
         -o-transform : translateY(-50px);
         -ms-transform : translateY(-50px);
         }
         100% {
         opacity : 1;
         transform : translateY(0px);
         -webkit-transform : translateY(0px);
         -moz-transform : translateY(0px);
         -o-transform : translateY(0px);
         -ms-transform : translateY(0px);
         }
         }
         @-o-keyframes logo-anim {
         0% {
         opacity : 0;
         transform : translateY(-50px);
         -webkit-transform : translateY(-50px);
         -moz-transform : translateY(-50px);
         -o-transform : translateY(-50px);
         -ms-transform : translateY(-50px);
         }
         100% {
         opacity : 1;
         transform : translateY(0px);
         -webkit-transform : translateY(0px);
         -moz-transform : translateY(0px);
         -o-transform : translateY(0px);
         -ms-transform : translateY(0px);
         }
         }
         @keyframes logo-anim {
         0% {
         opacity : 0;
         transform : translateY(-50px);
         -webkit-transform : translateY(-50px);
         -moz-transform : translateY(-50px);
         -o-transform : translateY(-50px);
         -ms-transform : translateY(-50px);
         }
         100% {
         opacity : 1;
         transform : translateY(0px);
         -webkit-transform : translateY(0px);
         -moz-transform : translateY(0px);
         -o-transform : translateY(0px);
         -ms-transform : translateY(0px);
         }
         }
         .logo-atividades {
         position : absolute;
         top : 0;
         center : 0;
         width : 100%;
         height : 500px;
         text-align : center;
         overflow : hidden;
         /* aumentar o valor do z-index para 999 */
         z-index : 999;
         }
         .atividades {
         color : #FFF;
         height : 115px;
         overflow : hidden;
         position : absolute;
         top : 80%;
         margin-top : -176px;
         width : 100%;
         pointer-events : none;
         text-align : center;
         z-index : 10;
         }
         .atividades a {
         text-decoration : none;
         }
         .atividades ul {
         list-style : none;
         padding : 0;
         margin : 10px 0 0;
         position : relative;
         height : 100px;
         font-size : 36px;
         font-weight : 300;
         text-align : center;
         font-family : 'Lato', sans-serif;
         letter-spacing : 5px;
         text-transform : uppercase;
         z-index : 100;
         }
         .atividades ul li {
         width : 100%;
         text-align : center;
         position : absolute;
         opacity : 0;
         top : 85px;
         line-height : 100px;
         -webkit-transition : all 0.5s ease-in-out;
         -moz-transition : all 0.5s ease-in-out;
         -o-transition : all 0.5s ease-in-out;
         transition : all 0.5s ease-in-out;
         transition-timing-function : ease;
         -webkit-transition-timing-function : ease; /* Safari and Chrome */
        /* centraliza os textos no slider */
         left: 0;
         }
         .atividades ul li.ativa {
         opacity : 1;
         top : 0;
         -webkit-transition : all 1s ease-in-out;
         -moz-transition : all 1s ease-in-out;
         -o-transition : all 1s ease-in-out;
         transition : all 1s ease-in-out;
         transition-timing-function : ease;
         -webkit-transition-timing-function : ease; /* Safari and Chrome */
         }
         }
      </style>
   </head>
   <body>
      <div class="cycle-slideshow"
         data-cycle-fx=fadeout
         data-cycle-timeout=5000
         data-cycle-pause-on-hover="true"
         data-cycle-slides="div.slide">
         <div class="logo-atividades">
            <div style="margin-top: 100px;">
               <a href="http://www.funerariasaopedro.net.br"> 
               <img class="logo" src="_img/logoFuneraria.png" alt="Logo"/> 
               </a>
               <div class="atividades">
                  <ul>
                     <li class="ativa">Agência Funerária</li>
                     <li>Funerais</li>
                     <li>Cremações</li>
                     <li>Trasladações</li>
                     <li>Tanatopraxias</li>
                     <li>Exumações</li>
                     <li>Artigos Religiosos</li>
                     <li>Atendimento 24h</li>
                  </ul>
               </div>
            </div>
         </div>
         <!-- prev/next links -->
         <div class="cycle-prev"></div>
         <div class="cycle-next"></div>
         <div class="cycle-pager"></div>
         <div class="slide"> <img  src="_img/_banner/_site/1.png" /> </div>
         <div class="slide"> <img  src="_img/_banner/_site/2.png" /> </div>
         <div class="slide"> <img  src="_img/_banner/_site/3.png" /> </div>
         <div class="slide"> <img  src="_img/_banner/_site/4.png" /> </div>
      </div>
      <div class="aos-item" data-aos="fade-right">
         <div class="aos-item__inner">
            <h3>Esquerda</h3>
         </div>
      </div>
      <div class="aos-item" data-aos="fade-left">
         <div class="aos-item__inner">
            <h3>Direita</h3>
         </div>
      </div>
      <div class="aos-item" data-aos="fade-up">
         <div class="aos-item__inner">
            <h3>Baixo Cima</h3>
         </div>
      </div>
      <div class="aos-item" data-aos="fade-down">
         <div class="aos-item__inner">
            <h3>Cima Baixo</h3>
         </div>
      </div>
      <div class="aos-item" data-aos="fade-in">
         <div class="aos-item__inner">
            <h3>Baixo Cima</h3>
         </div>
      </div>
      <div class="aos-item" data-aos="fade-in">
         <div class="aos-item__inner">
            <h3>Cima Baixo</h3>
         </div>
      </div>
      <script>
         function homeTitleAnimation(){
             var interval;
             var counter = 1;
             var myFunc = function() {
                 var cur = $('.atividades ul li').length;
                 if(cur == counter) {
                     $('.atividades ul li.ativa').removeClass('ativa');
                     $('.atividades ul li').first().addClass('ativa');
                     counter = 1;
                 } else {
                     counter++;
                     $('.atividades ul li.ativa').removeClass('ativa').next().addClass('ativa');

                 }
             };
             interval = setInterval(myFunc, 4000);
         }

         homeTitleAnimation();  
      </script>
      <script src="_js/aos.js"></script> 
      <script>
         AOS.init({
           easing: 'ease-in-out-sine'
         });  
      </script> 
   </body>
</html>

  • Thank you, that’s right!

  • So it kind of worked. But the minute I decrease the screen size to 600px for example, no matter how much I change the percentages, pixeus, I can never reduce the text size of the uls or the size of the logo image. Can you help me? Please see here: http://funerariasaopedro.net.br/new/

  • @Carlosrocha the ideal now is to create another question not to mess that is already answered etc. Until pq opening another question more people can help solve, 10 heads think better than an rss. But I can tell you that you will have to create a CSS with some media querys @media to treat your header at each screen width. I took a quick look at your CSS and saw that you are using only for large screens from 0 to 1023px, you will have to do other breaks like 768px, and 500ps for example to get good and treat the CSS in these measures

  • Yes, but is my @media query correct? Because I’ve narrowed it down to 320px and the measure of only the image and ul doesn’t narrow it down. Everything else narrows it down!

Browser other questions tagged css html5 css3

You are not signed in. Login or sign up in order to post.