• 0
Sign in to follow this  
Carlos Rocha

Posicionamento de div sobre Slideshow

Question

Bom Dia!

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

Share this post


Link to post
Share on other sites

0 answers to this question

Recommended Posts

There have been no answers to this question yet

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this