Slideshow - Jquery Cycle

[K3lv!N 0]

Boa tarde pessoal.

Estou tendo problemas comm um Slideshow feito em Jquery Cycle e CSS, e gostaria da ajuda de vocês...

 

O efeito do slide está funcionando corretamente. O problema na verdade é os Botoezinhos de paginação que eu criei.Segue um Print:

São esses 3 ai,

 

Voltando ao problema, Eles contem um link pra cada imagem que tem no slide, no total 3. Só que eles funcionam de vez em quando...

Especificando:

Eu clicko neles e nada acontece, mais se eu atualizar a pagina algumas vezes eles funcionam.

Outra coisa, Em vez de o link pegar o Quadradinho todo do Botão, ele pega só um pedaço de baixo; Print:

Disso aqui, quando ele resolve pegar o link funciona só essa parte que está em vermelho; Print:

 

HTML

<div id="destaques">
               	<div id="noticias_destaque">     
                   	<ul>
                         <li>
                   <img src="uploads/noticias/01.JPG" alt="" width="500px" height="300px"  />
                   <p>
                   <a href="#">
                   <h1>Lorem ipsum dolor sit amet 01</h1>
                   consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut                    laoreet dolore magna aliquam erat volutpat.
                   </a>
                   </p>
                   	</li>

                       <li>
                   <img src="uploads/noticias/01.JPG" alt="" width="500px" height="300px"  />
                   <p>
                   <a href="#">
                   <h1>Lorem ipsum dolor sit amet 02</h1>
                   consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
                   laoreet dolore magna aliquam erat volutpat.
                   </a>
                   </p>
                   	</li>

                       <li>
                   <img src="uploads/noticias/01.JPG" alt="" width="500px" height="300px"  />
                   <p>
                   <a href="#">
                   <h1>Lorem ipsum dolor sit amet 03</h1>
                   consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
                   laoreet dolore magna aliquam erat volutpat.
                   </a>
                   </p>
                   	</li>
                     </ul>
                   </div> <!-- NOTICIAS DESTAQUE -->
                   <span id="pager" class="pager"></span>
               </div> <!--DESTAQUES-->

 

CSS

 

#noticias{
width:900px;
}
#destaques{
width:500px;
float:left;
background:#EBEBEB;
margin:5px;
padding:5px;
overflow:hidden;
}
#noticias_destaque{
width:500px;
height:366px;
}
.pager{
width:500px;
text-align:right;
float:left;
}
.pager a{
padding:5px;
text-decoration:none;
color:#069;
background:#FFF;
margin:0 1px;
}
#noticias_destaque ul{
list-style:none;
}
#noticias_destaque h1{
font:16px Georgia, "Times New Roman", Times, serif;
color:#333;
font-weight:bold;
text-shadow:1px 1px 1px #999;
}
#noticias_destaque h1:hover{
text-shadow:1px 1px 1px #069;
}
#noticias_destaque p{
font:14px "Trebuchet MS", Arial, Helvetica, sans-serif;
margin:0 0 10px 0;
}
#noticias_destaque a{
color:#333;
text-decoration:none;
}
#noticias_destaque a:hover{
color:#000;
text-decoration:underline;
}

 

Jquery

 

$(function(){
$("#noticias_destaque ul").cycle({
	fx:'fade',
	speed: 1500,
	timeout: 5000,
	pager: '#pager'
})
})

 

Então essa é minha duvida!!! ja fiz isso umas duas vezes e sempre dá o mesmo problema, nesses benditos...

Agradeço a atenção!!!

[William Bruno 1501]

Seu problema é css amigo.

 

aplique um display: block; na tag <a>

[K3lv!N 0]

Aqui você fala?

 

 

Apliquei o Display-Block e ficou da seguinte maneira:

[William Bruno 1501]

isso ai.

 

defina a largura, e então use float para manter um item ao lado do outro.

conhece o valor inline-block; ?

[K3lv!N 0]

isso ai.

 

defina a largura, e então use float para manter um item ao lado do outro.

conhece o valor inline-block; ?

 

Conheço não...Vo tentar aqui!!!

 

Rapaz...Não deu certo, o engraçado é que eu usei o script da aula que estava acompanhando e também não deu certo... copiei html e CSS pra ver se era o meu que tava errado, mais n era... e o Cara da video aula não teve esse problema...

[William Bruno 1501]

então faça a primeira coisa que eu disse.

 

deixe o #pager a{} com display: block, defina uma largura e use float neles.

 

se tiver duvidas, poste um link online desse trecho.

[K3lv!N 0]

Consegui fazer aqui,o tamanho da certinho... só que assim se eu atualizar no navegador, já não funciona mais...daí tenho que abrir a pagina novamente...No caso digitar o endereço dela. pra funcionar novamente.

[William Bruno 1501]

Aperte Ctrl+Shif+J no Firefox, e verifique se há erros, se houver corrija.

 

caso não consiga resolver, poste um link para esse trecho online.

[K3lv!N 0]

Eu uso o Chrome como padrão...Abri com o Firefox e me gerou este erro aki:

 

Se serve de ajuda...não notei nenhuma diferença entre os dois navegadores...

 

Poderia me explicar como posso postar o link online por favor...