Publicado em 1 de jan.

[Resolvido] Slade com texto e link

#desenvolvimento-frontend

Olá galera,

Como faço para colocar legenda, texto nos slades desta pagina: http://www.slunnbrazil.com.br/

É como se fosse deste slade aqui: http://www.r7.com/

Fico no aguardo, vlw

Patrickpc

Discussão (5)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Nícolas Luís Huber· 1 de jan.

Segue como seria o código de uma legenda no estilo do r7.com:

<div id="slideshow">
<div class="slider-item"><a href="#"><img src="images/sl1.jpg" alt="icon" width="917" height="640" border="0" /><div class="legenda">aqui legenda</div></a></div>
</div>
<div class="clr"></div>

Basta fazer uma formatação CSS para a class .legenda, certo?

PatrickPC· 1 de jan.

>
Segue como seria o código de uma legenda no estilo do r7.com:

<div id="slideshow">
<div class="slider-item"><a href="#"><img src="images/sl1.jpg" alt="icon" width="917" height="640" border="0" /><div class="legenda">aqui legenda</div></a></div>
</div>
<div class="clr"></div>

Basta fazer uma formatação CSS para a class .legenda, certo?

.....................

Nicolas,

Inicialmente está dando certo,

A questão é que não estou conseguindo ajustar o texto para ficar em cima da imagem no slade.

E parece estar dando tipo um bug na imagem do slade.

Poderia dar uma verificada ai mano,

vlw

www.slunnbrazil.com.br/

Nícolas Luís Huber· 2 de jan.

Mas no slide do r7.com a legenda da imagem fica abaixo da imagem. Mas se preferir colocar em cima da imagem você vai ter seguir a ideia do código exemplo abaixo:

html

<div class="slide-item">
 <div class="slide-legenda">

Fusce non massa facilisis velit fringilla dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

 </div>
 <img src="http://i.i.com.com/cnwk.1d/i/tim/2012/11/29/imac27inch_35440705_01_1_620x433.jpg" width="620" height="433" alt="">
</div>

css

.slide-item {
 width: 620px;
 margin: 0 auto;
 padding: 10px;
 background: #000;
 position: relative;
}
.slide-legenda {
 position: absolute;
 bottom: 10px;
 padding: 5px;
 background: rgba(0,0,0,0.6);
 color: #f90;
}

Como consequência, no plugin jCycle irá ter de mudar o seletor!

PatrickPC· 2 de jan.

Nícolas Luís Huber,

Fiz la, acho que deuu certo,

Com relação ao seletor no jcycle, não mechi em nada... se puder da uma olhada pra mim pra ver se está td ok beleza.

Abraço e vlw por ajudar!

www.slunnbrazil.com.br

Nícolas Luís Huber· 2 de jan.

Pelo que pude ver está funcionado certinho. Eu falei do seletor, pois aquei que você iriam trocar o a do link, pela div. Mas está funcionado certinho!