Slide de fotos

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

Resolvido Slide de fotos

Mensagem por matadorct6 em 23/02/13, 07:23 pm

Qual é minha questão:
Como criar um slide de fotos com texto ao lado.
Como o deste forum: http://master-publicitario.forumeiros.com

Endereço do meu fórum:
http://braziliancrazycoin.forumeiros.com

Versão do fórum:
PHPBB3
avatar

matadorct6
Nível 5

Masculino
Inscrito dia : 03/11/2012
Mensagens : 42
Pontos Ativos : 93

Ver perfil do usuário http://braziliancrazycoin.forumeiros.com/

Resolvido Re: Slide de fotos

Mensagem por iPrompt em 23/02/13, 07:38 pm

Olá,

Aqui esta o código do Slide

Código:
<style>.contentslider {
  top: 27px;
  width: 700px;
  height: 250px;
  padding: 0;}

.cs_wrapper, .cs_article {background:#;}

.cs_leftBtn, .cs_rightBtn {width:48px;}

.cs_article h2 {
  font-weight: normal;
  text-shadow: 1px 1px 5px black;
  font-size: 32px;
  line-height:1.125em;}

.cs_article h2 a {
  font-family: 'Lobster';
  color: white;}

.cs_article p {
  text-shadow: 1px 1px 1px black;
  font-size: 15px;
  line-height:1.5em;
  color: white;}

.cs_article .readmore {
  border-bottom: 1px solid #b2d266;
  padding: 3px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  background: darkgreen;
  font-size: 12px;
  text-shadow: 1px 1px 1px black;
  color: white;}
 
.contentslider {
  position:relative;
  display:block;
  width:700px;
  height:250px;
  margin:0 auto;
  overflow:hidden;}

.cs_wrapper {
  position:relative;
  display:block;
  width:100%;
  height:100%;
  margin:0;
  padding:0;
  overflow:hidden;}

.cs_slider {
  position:absolute;
  width:10000px;
  height:100%;
  margin:0;
  padding:0;}

.cs_article {
  float:left;
  position:relative;
  top:0;
  left:0;
  width: 700px;
  height: 250px;
  display:block;
  margin:0 auto;
  padding:0;}

.cs_article h2 {
  display:block;
  width:26%;
  margin:10px 26px 5px 55%;
  text-align:left;}

.cs_article img {
  border: 1px solid white;
  -moz-box-shadow: 0px 0px 10px 0px #000;
  -webkit-box-shadow: 0px 0px 10px 0px #000;
  box-shadow: 0px 0px 10px 0px #000;
  position: absolute;
  top: 5px;
  left: 70px;
  width: 43%;
  -ms-interpolation-mode: bicubic;
  height: 90%;
  margin: 5px;}

.cs_article p {
  display:block;
  width: 30%;
  margin:0 26px 5px 55%;
  padding:0;
  border:0;}

.cs_article .readmore {
  display: block;
  width: 10%;
  margin: 0 10% 1% 56%;
  text-align: center;
  float: right;}

.cs_leftBtn, .cs_rightBtn {
  position:absolute;
  top:0;
  height: 250px;
  padding:10px 0;
  z-index: 999;}

.cs_leftBtn {
  left:0;
  outline:0;}

.cs_rightBtn {
  right:0;
  outline:0;}

.cs_leftBtn img, .cs_rightBtn img {
  border:0;
  position:relative;
  top: 0px;
  margin:0;
  margin-top: -25px;}

.cs_rightBtn img{right: 13px;}</style>
<div id="slider"><div id="two" class="contentslider"><div class="cs_wrapper"><div class="cs_slider"><!--
 ARTICLE --><div class="cs_article"><h2> <a>Bem Vindo(a)</a> </h2><img src="http://img255.imageshack.us/img255/1476/masterra.jpg"/><p>Seja Bem Vindo(a), ao fórum Master Publicitário - O teu fórum de Publicidade, aqui poderás conviver em grande e fazer novas e grandes amizades, aproveita já enquanto dura, temos um óptimo serviço de ajuda para vocês, podem divulgar a vontade e não têm problemas nenhum, não se esqueçam tudo isto é grátis.</p></div><!--
 End ARTICLE --><!--
 ARTICLE --><div class="cs_article"><h2> <a>Regulamento </a> </h2><img src="http://i12.servimg.com/u/f12/18/05/64/66/master11.jpg"/><p>Acabastes de chegar a este grande fórum ? Então peço que leia o nosso Regulamento, para não ser punido, sei que é chato ler mas não custa nada e ajuda sempre o fórum.</p><a href="http://master-publicitario.forumeiros.com/f10-regulamento" class="readmore">Regulamento</a></div><!--
 End ARTICLE --><!--
 ARTICLE --><div class="cs_article"><h2> <a>Staff </a> </h2><img src="http://i12.servimg.com/u/f12/18/05/64/66/master12.jpg"/><p>Conheça a nossa equipe do fórum, e também te podes candidatar a esta grande equipe, tamos todos dispostos para o ajudar em tudo o que for necessário, não isite e ajude o fórum.</p><a href="http://master-publicitario.forumeiros.com/f12-staff" class="readmore">Staff</a></div><!--
 End ARTICLE --><!--
 ARTICLE --><div class="cs_article"><h2> <a>Publicidade </a> </h2><img src="http://i12.servimg.com/u/f12/18/05/64/66/master13.jpg"/><p>Tens um fórum,rádio,blog,site ou outro tipo de web ? Então estás no sítio certo para divulgar sem problemas nenhum, aqui poderás divulgar o teu fórum,rádio,blog,site e muito mais e tudo isto é grátis.</p><a href="http://master-publicitario.forumeiros.com/f1-publicidade" class="readmore">Publicidade</a></div><!--
 End ARTICOL --></div><!--
 End cs_slider -->  </div>

Adiciona aonde deseja que o Side fique

Até
avatar

iPrompt
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 10/02/2012
Mensagens : 5364
Pontos Ativos : 6851

Ver perfil do usuário http://webskins.forumeiros.com/

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum