Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Munir

Moldura para Nivo Slider

Recommended Posts

Olá a todos.

 

Estou utilizando em meu site o plugin Nivo Slider.

 

Precisei colocar uma moldura nos slides e gostaria de mudar tambem a posição das setas de direção dos slides (colocá-las no centro).

 

Consegui sobrepor as imagens e coloquei as setas no centro. Mas não está sendo possível clicar sobre elas (apenas aparece a imagem)

 

O CSS está assim

 

 

#flash1{ //esta é a div que contém os slides

position: absolute;

width:980px;

height:342px;

z-index: 1;

 

}

 

#moldura{ //esta moldura fica fixa para todos os slides

z-index: 2;

width:980px;

height:342px;

position: absolute;

background-image: url(../imagens/moldura7.png);

}

 

.nivo-directionNav a{ //estas são as setas de direção

display:block;

width:30px;

height:30px;

background:url(../imagens/arrow5.png) no-repeat;

text-indent: -9999px;

border:0;

position: absolute;

}

 

Tentei colocar um z-index para as setas, mas não esta funcionando.

 

Caso não conheçam o plugin é este aqui: http://nivo.dev7studios.com

 

Obrigado.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Poste um link para a sua implementação, pois o teu problema é css.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Poste um link para a sua implementação, pois o teu problema é css.

 

O link do site é este Clique aqui

 

O banner principal esta em flash (pois o cliente precisava do site com urgencia), logo as setas de transição nao funcionam.

 

Para fazer funcionar estou passando para o Nivo Slider.

 

Não da para mandar o link do que estou fazendo pois está em localhost. E nao posso colocar no ar com os erros.

 

Caso conheça alguma outra maneira de fazer isto (sem ser pelo Nivo) posso mudar.

 

Obrigado

 

Consegui resolver!!

 

mexendo aqui no arquivo nivo-slider.css descobri uma coisa interessante.

 

basta inserir a moldura dentro da classe .nivoSlider a.nivo-imageLink

 

No meu caso ficou assim:

 

.nivoSlider a.nivo-imageLink {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
border:0;
padding:0;
margin:0;
z-index:6;
display:none;
       background-image: url(../imagens/moldura.png);
}

Obrigado pela tentativa =)

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.