2

Tenho a seguinte página:

<!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>

Tudo funciona corretamente com exceção do posicionamento da logo e da ul  que rodam sobre o Slideshow que não estou conseguindo posiciona-los sobre o 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>

Onde estou errando?

Esse código pode ser visto em :

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

Na página, se derem um ctr+a, poderão notar no canto direito e abaixo do slide,  a ul rodando normalmente. Porém a posição correta dela é no meio do slide e ao centro.

Com relação à logomarca que está escondida atrás do slide, sua posição é acima do slide e acima da ul

1 Resposta 1

1

Carlos vc precisa apenas alterar duas linhas de CSS

Aumente o valor do z-index nessa div .logo-atividades { z-index : 999; } antes era 20

Já na sua UL coloque um left 0 dessa forma para centralizar o texto no slider .atividades ul li { left: 0; }

Abaixo segue seu código completo já com a correção e os comentários no 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>

4
  • Obrigado, era isso mesmo! Commented 24/04/2018 às 13:42
  • Então, até que deu certo. Mas na hora que diminuo o tamanho da tela para 600px por exemplo, por mais que eu mude as porcentagens, pixeus, nunca consigo reduzir o tamanho do texto das uls nem o tamanho da imagem da logo. Pode me ajudar? Por favor, veja aqui: funerariasaopedro.net.br/novo Commented 24/04/2018 às 17:21
  • @CarlosRocha o ideal agora é criar outra pergunta para não bagunçar essa que já está respondida etc. Até pq abrindo outra pergunta mais pessoas poderão ajudar a resolver, 10 cabeças pensam melhor que uma rss. Mas já te adianto que vc vai ter que criar um CSS com alguns media querys @media para tratar o seu header em cada largura de tela. Dei uma olhada rápida no seu CSS e vei que vc está usando só pra telas grandes de 0 a 1023px, vc vai ter que fazer outra quebras tipo em 768px, e 500ps por exemplo pra ficar bom e tratar o CSS nessas medidas
    – hugocsl
    Commented 24/04/2018 às 17:35
  • Sim, mas a minha @media query está correta? Pois reduzi para 320px e a medida só da imagem e da ul não reduz. O resto todo reduz! Commented 24/04/2018 às 18:13

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .