SlideShow sobrepoe texto

Lida 1129 vezes

Córdova

Membro
Olá, estou fazendo um site e tenho um slideshow em jquery, estou fazendo o botão de next e previous somente com texto
Código: [Seleccione]
<div id="btn_next">
<strong> < </strong>
</div>
Quando tento colocar essa div em cima do slideshow ela fica por baixo da imagem, quando deveria fica por cima.

Alguem consegue ajudar? Já tentei z-index.

PedroCruz

Membro
bem, do que sei, assumindo que em vez de id, seria class, é preferível trabalhar em CSS sempre com class e não com ID's. A nível de perfomance, a class é mais rápida (do que li nuns fóruns á tempos atrás):

Código: [Seleccione]
.btn_next strong{
     display: block;
     position: absolute;
     top: 50%; /* Se quiseres centrar a meio*/
     bottom: 50%;
     tranform: translate(-50%,-50%);
     z-index: 900;
}

Acho que assim deve dar! ;)

Córdova

Membro
Deu certo. Mas o problema é que mudando a resolução esse botão muda de lugar também por ser absolute.

Córdova

Membro
Segue a imagem em que mostra bem oq está acontecendo. Aqui o código em HTML
Código: [Seleccione]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link href="css/style.css"  rel="stylesheet" type="text/css" media="screen"/>

<script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>

<script src="js/jquerycycle.js" type="text/jscript"></script>

<title>Games For Kings</title>

</head>

<body>


<script type="text/javascript">
    $(function(){
$('#slide ul').cycle({

fx: 'fade',
speed: '2000',
timeout: '6000',
prev: '#btn_prev',
next: '#btn_next',

});


});
   
   
    </script>


<div id="box">

<div id="barra_top">
    </div><!--barra_top-->
   
    <div id="header">
  <a href="#"><img src="images/logo.png" width="193" height="136" alt="Games Of King" title="Games of King"/></a>
 
<div id="facebook">
    <a href="https://www.facebook.com/hamon.cordova" class="facebook" title="Games for King Facebook"></a>
    </div>
   
    <div id="g">
    <a href="#" class="g" title="Games for King Google+"></a>
    </div>
   
        <div id="twitter">
    <a href="#" class="twitter" title="Games for King Twitter"></a>
    </div>
       
  </div><!--header-->
 
   
   
   
   
    <div id="menu_header_baixo">
   
<div id="menu">   
<ul class="drop_menu">

<li><a href='#'>XBOX ONE</a>
<ul>
<li><a href='#' style="font-family:12px Arial, Helvetica, sans-serif">Exclusivos</a></li>
<li><a href='#'>Terror</a></li>
<li><a href='#'>Tiro</a></li>
<li><a href='#'>FPS</a></li>
<li><a href='#'>Ação</a></li>
</ul>
</li>
<li><a href='#'>XBOX 360</a>
<ul>
<li><a href='#'>Exclusivos</a></li>
<li><a href='#'>Terror</a></li>
<li><a href='#'>Tiro</a></li>
<li><a href='#'>FPS</a></li>
<li><a href='#'>Ação</a></li>
</ul>
</li>
<li><a href='#'>PS3</a>
<ul>
<li><a href='#'>Exclusivos</a></li>
<li><a href='#'>Terror</a></li>
<li><a href='#'>Tiro</a></li>
<li><a href='#'>FPS</a></li>
<li><a href='#'>Ação</a></li>
</ul>
</li>

<li><a href='#'>PS4</a>
<ul>
<li><a href='#'>Exclusivos</a></li>
<li><a href='#'>Terror</a></li>
<li><a href='#'>Tiro</a></li>
<li><a href='#'>FPS</a></li>
<li><a href='#'>Ação</a></li>
</ul>
</li>
<li><a href='#'>PC</a>
<ul>
<li><a href='#'>Exclusivos</a></li>
<li><a href='#'>Terror</a></li>
<li><a href='#'>Tiro</a></li>
<li><a href='#'>FPS</a></li>
<li><a href='#'>Ação</a></li>
</ul>

</li>
<li><a href='#'>WIU</a>
<ul>
<li><a href='#'>Exclusivos</a></li>
<li><a href='#'>Terror</a></li>
<li><a href='#'>Tiro</a></li>
<li><a href='#'>FPS</a></li>
<li><a href='#'>Ação</a></li>
</ul>
</li>
<li><a href='#'>3DS</a>
<ul>
<li><a href='#'>Exclusivos</a></li>
<li><a href='#'>Terror</a></li>
<li><a href='#'>Tiro</a></li>
<li><a href='#'>FPS</a></li>
<li><a href='#'>Ação</a></li>
</ul>
</li>
</ul>
</div>
<div id="pesquisa">
    <form action="#" method="get" name="f_pesquisar">
<input class="text" name="i_pesquisar" type="text" placeholder="Procura algum jogo?"/> <input class="enviar" type="image" src="images/input_submit.png" value="submit">
    </form>
     </div>
   
</div><!--menu_header_baixo-->

 
                 
<script type="text/javascript">
    $(function(){
$('#imagens ul').cycle({

fx: 'fade',
speed: '2000',
timeout: '6000',
prev: '#btn_prev',
next: '.btn_next',

});


});
   
   
    </script>
<div id="slide">

<div id="imagens">
 
    <ul>
      <li><img src="images/capsule_616x353.jpg" alt="#" width="1100px" height="380px"/></li>
        <li><img src="images/maxresdefault.jpg" alt="#" width="1100px" height="380px"/></li>
    </ul>
      <strong class="btn_next">  < </strong>
   
    </div>
   
 
   

</div>

     
 </div><!--BOX-->


</body>
</html>

E aqui o código CSS

Código: [Seleccione]
*{
margin:0px;
padding:0px;
}

body{
text-align:center;
background:#333;
}
/*RESETE*/
div#box{
width:1100px;
height:1900px;
background:#FFF;
margin:0 auto;

}
/*BARRA*/
div#barra_top{
background:#FF9326;
float:left;
width:1100px;
height:45px;
}
/*HEADER*/
div#header {
background:url(../images/bg_header.png) top left repeat;
width:1100px;
height:230px;
}
div#header img {
float:left;
padding:17px 30px;
}
.facebook{
background:url(../images/icon_facebook.png) no-repeat;
float:right;
display:block;
width:38px;
height:38px;
margin:120px 130px;
}
.facebook:hover {
background:url(../images/icon_facebook_hover.png) no-repeat;
}

.g{
background:url(../images/icon_g+.png) no-repeat;
float:right;
display:block;
width:38px;
height:38px;
margin:120px -220px;
}

.g:hover {
background:url(../images/icon_g+_hover.png) no-repeat;

}

.twitter{
background:url(../images/icon_twitter.png) no-repeat;
float:right;
display:block;
width:47px;
height:39px;
margin:120px -280px;
}

.twitter:hover {
background:url(../images/icon_twitter_hover.png) no-repeat;
}

/*MENU ABAIXO DO HEADER*/
div#menu_header_baixo {
width:1100px;
height:45px;
margin: -12px 0px;
}

div#pesquisa {
float:right;
margin:-41px -280px;
}

div#pesquisa input {
    border:2px solid #D96D00;
    border-radius:7px;
    font-size:12px;
font-family:Arial, Helvetica, sans-serif;
    margin-top:-10px;
color:#BABABA;
height:22px;
width:180px;

}
div#pesquisa input:focus {
    outline:none;
    border-color:#D96D00;
    box-shadow:0 0 10px #D96D00;
}
div#pesquisa input.text{
margin:-10px;}
div#pesquisa input.enviar {
width:27px;
height:29px;
border:none;
margin: 0px 3px;
}


/* CSSTerm.com Simple Horizontal DropDown CSS menu */

.drop_menu {
background:#FF9326;
padding:0px;
margin:0px;
list-style-type:none;
height:45px;


}
.drop_menu li { float:left;
 }
.drop_menu li a {
padding:12px 10px;
display:block;
color:#fff;
text-decoration:none;
font:20px arial, verdana, sans-serif;

}

/* Submenu */
.drop_menu ul {
position:absolute;
left:-9999px;
top:-9999px;
list-style-type:none;
}
.drop_menu li:hover { position:relative; background:#FF8306; z-index: 999;
 }
.drop_menu li:hover ul {

left:0px;
top:45px;
background:#5FD367;
padding:0px;
z-index: 999;

}

.drop_menu li:hover ul li a {

text-align:left;
font:14px Arial, Helvetica, sans-serif;
padding:5px;
display:block;
width:120px;
text-indent:9px;
background-color:#FF9326;

}
.drop_menu li:hover ul li a:hover { background:#FFA448; }

/*SLIDE SHOW*/
 
div#slide {
background:#000;
width:1100px;
height:380px;
margin:12px auto;
z-index: 0;
}

div#imagens img {
z-index: 1;
}
div#botoes {
width:100px;
height:40px;
}
div#imagens strong {
margin:-40px;
}
.btn_next{
     display: block;
position:static;
     top: 50%; /* Se quiseres centrar a meio*/
     bottom: 50%;
     tranform: translate(-50%,-50%);
     z-index: 900;
color:#FF7F00;
font: 90px Arial, Helvetica, sans-serif;
}


Por favor me ajudem, estou ficando MALUCO!
Já resolveste?