Criar Widget que fique imagem lado a lado

3 participantes

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

Tópico resolvido Criar Widget que fique imagem lado a lado

Mensagem por EDU2010 25.08.17 13:42

Detalhes da questão


Endereço do fórum: http://criadoresdepassaros.com
Versão do fórum: phpBB3

Descrição


Quero criar um Widget para colocar no portal onde as imagens fiquem lado a lado como se fosse uma loja , da forma da imagem de exemplo


widget - Criar Widget que fique imagem lado a lado  Lojafo10


Ou seja um codigo onde eu possa adicionar a imagem , link que dirige a imagem e uma descrição da imagem em forma da imagem de exemplo e que eu possa criar varios em um só widget que usarei no portal naquele widget que fica acima como imagem de exemplo . Segue :

widget - Criar Widget que fique imagem lado a lado  Foto10


Obrigado
EDU2010

EDU2010
Hiper Membro

Membro desde : 09/12/2010
Mensagens : 2295
Pontos : 3601

http://passarinhos.forumeiros.com/forum.htm

Ir para o topo Ir para baixo

Tópico resolvido Re: Criar Widget que fique imagem lado a lado

Mensagem por Kyo Panda 25.08.17 14:15

Adicione a um novo Widget personalizado:

Código:
<div class="fa-grid-widget">
   <div class="fa-grid-widget-row">
      <div class="fa-grid-widget-column">
         <a href="#"><img src="https://images.tcdn.com.br/img/img_prod/382594/672_1_20140830093952.jpg" /></a>
         Texto<br />
         Texto<br />
         Texto
      </div>
      <div class="fa-grid-widget-column">
         <a href="#"><img src="https://images.tcdn.com.br/img/img_prod/382594/672_1_20140830093952.jpg" /></a>
         Texto<br />
         Texto<br />
         Texto
      </div>
      <div class="fa-grid-widget-column">
         <a href="#"><img src="https://images.tcdn.com.br/img/img_prod/382594/672_1_20140830093952.jpg" /></a>
         Texto<br />
         Texto<br />
         Texto
      </div>
   </div>
   <div class="fa-grid-widget-row">
      <div class="fa-grid-widget-column">
         <a href="#"><img src="https://images.tcdn.com.br/img/img_prod/382594/672_1_20140830093952.jpg" /></a>
         Texto<br />
         Texto<br />
         Texto
      </div>
      <div class="fa-grid-widget-column">
         <a href="#"><img src="https://images.tcdn.com.br/img/img_prod/382594/672_1_20140830093952.jpg" /></a>
         Texto<br />
         Texto<br />
         Texto
      </div>
      <div class="fa-grid-widget-column">
         <a href="#"><img src="https://images.tcdn.com.br/img/img_prod/382594/672_1_20140830093952.jpg" /></a>
         Texto<br />
         Texto<br />
         Texto
      </div>
   </div>
   <div class="fa-grid-widget-row">
      <div class="fa-grid-widget-column">
         <a href="#"><img src="https://images.tcdn.com.br/img/img_prod/382594/672_1_20140830093952.jpg" /></a>
         Texto<br />
         Texto<br />
         Texto
      </div>
      <div class="fa-grid-widget-column">
         <a href="#"><img src="https://images.tcdn.com.br/img/img_prod/382594/672_1_20140830093952.jpg" /></a>
         Texto<br />
         Texto<br />
         Texto
      </div>
      <div class="fa-grid-widget-column">
         <a href="#"><img src="https://images.tcdn.com.br/img/img_prod/382594/672_1_20140830093952.jpg" /></a>
         Texto<br />
         Texto<br />
         Texto
      </div>
   </div>
   <style>
      .fa-grid-widget-row {
         overflow: hidden;
         margin-bottom: 20px;
         padding: 5px;
      }
      
      .fa-grid-widget-column {
         box-sizing: border-box;
         width: 31%;
         margin: 0 1%;
         box-shadow: 0 0 1px 2px rgba(0, 0, 0, 0.2);
         padding: 5px;
         float: left;
      }
      
      .fa-grid-widget-column > a:first-child {
         display: block;
      }
      
      .fa-grid-widget-column img {
         max-width: 100%;
      }
   </style>
</div>

Fica a cargo do senhor ajustar as imagens e textos dentro do código. o/
Kyo Panda

Kyo Panda
Hiper Membro

Membro desde : 08/01/2012
Mensagens : 4641
Pontos : 5939

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Criar Widget que fique imagem lado a lado

Mensagem por EDU2010 26.08.17 0:45

Tem como adicionar abaixo de cada imagem um botão de comprar e que eu possa neste botão apenas colocar o link que direcione a ele .



Até mais
EDU2010

EDU2010
Hiper Membro

Membro desde : 09/12/2010
Mensagens : 2295
Pontos : 3601

http://passarinhos.forumeiros.com/forum.htm

Ir para o topo Ir para baixo

Principal Contribuidor

Tópico resolvido Re: Criar Widget que fique imagem lado a lado

Mensagem por Shek 26.08.17 1:34

Substitua por:
Código:
<div class="fa-grid-widget">
  <div class="fa-grid-widget-row">
      <div class="fa-grid-widget-column">
        <a href="#"><img src="https://images.tcdn.com.br/img/img_prod/382594/672_1_20140830093952.jpg" />
       <br><span class="fa-shop-buy">COMPRAR</span></a>
        Texto<br />
        Texto<br />
        Texto
      </div>
      <div class="fa-grid-widget-column">
        <a href="#"><img src="https://images.tcdn.com.br/img/img_prod/382594/672_1_20140830093952.jpg" />
       <br><span class="fa-shop-buy">COMPRAR</span></a>
        Texto<br />
        Texto<br />
        Texto
      </div>
      <div class="fa-grid-widget-column">
        <a href="#"><img src="https://images.tcdn.com.br/img/img_prod/382594/672_1_20140830093952.jpg" />
       <br><span class="fa-shop-buy">COMPRAR</span></a>
        Texto<br />
        Texto<br />
        Texto
      </div>
      <div class="fa-grid-widget-column">
        <a href="#"><img src="https://images.tcdn.com.br/img/img_prod/382594/672_1_20140830093952.jpg" />
       <br><span class="fa-shop-buy">COMPRAR</span></a>
        Texto<br />
        Texto<br />
        Texto
      </div>
      <div class="fa-grid-widget-column">
        <a href="#"><img src="https://images.tcdn.com.br/img/img_prod/382594/672_1_20140830093952.jpg" />
       <br><span class="fa-shop-buy">COMPRAR</span></a>
        Texto<br />
        Texto<br />
        Texto
      </div>
      <div class="fa-grid-widget-column">
        <a href="#"><img src="https://images.tcdn.com.br/img/img_prod/382594/672_1_20140830093952.jpg" />
       <br><span class="fa-shop-buy">COMPRAR</span></a>
        Texto<br />
        Texto<br />
        Texto
      </div>
  </div>
  <style>
      .fa-grid-widget-row {
        overflow: hidden;
        margin-bottom: 20px;
        padding: 5px;
      }
     
      .fa-grid-widget-column {
        box-sizing: border-box;
        width: 31%;
        margin: 0 1%;
        box-shadow: 0 0 1px 2px rgba(0, 0, 0, 0.2);
        padding: 5px;
        float: left;
      }
     
      .fa-grid-widget-column > a:first-child {
        display: block;
      }
     
      .fa-grid-widget-column img {
        max-width: 100%;
      }
  </style>
</div>
Substitua o jogo da velha pelo link do produto:
Código:
<a href="#">
Tópico movido de 'Questões sobre a aparência do fórum' para 'Questões sobre códigos'.
Shek

Shek
Principal Contribuidor
Principal Contribuidor

Membro desde : 11/04/2009
Mensagens : 18896
Pontos : 22793

https://shiftactive.blogspot.com/ https://www.facebook.com/ShiftActif https://twitter.com/ShiftActif

Ir para o topo Ir para baixo

Tópico resolvido Re: Criar Widget que fique imagem lado a lado

Mensagem por EDU2010 26.08.17 1:47

O botão comprar teria que ser uma imagem

widget - Criar Widget que fique imagem lado a lado  Botao-10

Envergonhado Envergonhado
EDU2010

EDU2010
Hiper Membro

Membro desde : 09/12/2010
Mensagens : 2295
Pontos : 3601

http://passarinhos.forumeiros.com/forum.htm

Ir para o topo Ir para baixo

Principal Contribuidor

Tópico resolvido Re: Criar Widget que fique imagem lado a lado

Mensagem por Shek 27.08.17 1:09

Bem... É melhor você especificar tudo o que este código terá para que façamos uma coisa de uma só vez. Terá o botão Comprar em forma de imagem... Mas, depois disso planeja algo mais?
Shek

Shek
Principal Contribuidor
Principal Contribuidor

Membro desde : 11/04/2009
Mensagens : 18896
Pontos : 22793

https://shiftactive.blogspot.com/ https://www.facebook.com/ShiftActif https://twitter.com/ShiftActif

Ir para o topo Ir para baixo

Tópico resolvido Re: Criar Widget que fique imagem lado a lado

Mensagem por EDU2010 27.08.17 4:10

Não somente em forma de imagem que possa redirecionar para o link desejado .


obrigado
EDU2010

EDU2010
Hiper Membro

Membro desde : 09/12/2010
Mensagens : 2295
Pontos : 3601

http://passarinhos.forumeiros.com/forum.htm

Ir para o topo Ir para baixo

Principal Contribuidor

Tópico resolvido Re: Criar Widget que fique imagem lado a lado

Mensagem por Shek 27.08.17 12:10

Troca por este:
Código:
<div class="fa-grid-widget">
  <div class="fa-grid-widget-row">
      <div class="fa-grid-widget-column">
        <a href="#"><img src="https://images.tcdn.com.br/img/img_prod/382594/672_1_20140830093952.jpg" />
      <br><img src='URL_DA_IMAGEM' style='max-width: 0px;' title='Comprar produto' /></a>
        Texto<br />
        Texto<br />
        Texto
      </div>
      <div class="fa-grid-widget-column">
        <a href="#"><img src="https://images.tcdn.com.br/img/img_prod/382594/672_1_20140830093952.jpg" />
      <br><img src='URL_DA_IMAGEM' style='max-width: 0px;' title='Comprar produto' /></a>
        Texto<br />
        Texto<br />
        Texto
      </div>
      <div class="fa-grid-widget-column">
        <a href="#"><img src="https://images.tcdn.com.br/img/img_prod/382594/672_1_20140830093952.jpg" />
      <br><img src='URL_DA_IMAGEM' style='max-width: 0px;' title='Comprar produto' /></a>
        Texto<br />
        Texto<br />
        Texto
      </div>
      <div class="fa-grid-widget-column">
        <a href="#"><img src="https://images.tcdn.com.br/img/img_prod/382594/672_1_20140830093952.jpg" />
      <br><img src='URL_DA_IMAGEM' style='max-width: 0px;' title='Comprar produto' /></a>
        Texto<br />
        Texto<br />
        Texto
      </div>
      <div class="fa-grid-widget-column">
        <a href="#"><img src="https://images.tcdn.com.br/img/img_prod/382594/672_1_20140830093952.jpg" />
      <br><img src='URL_DA_IMAGEM' style='max-width: 0px;' title='Comprar produto' /></a>
        Texto<br />
        Texto<br />
        Texto
      </div>
      <div class="fa-grid-widget-column">
        <a href="#"><img src="https://images.tcdn.com.br/img/img_prod/382594/672_1_20140830093952.jpg" />
      <br><img src='URL_DA_IMAGEM' style='max-width: 0px;' title='Comprar produto' /></a>
        Texto<br />
        Texto<br />
        Texto
      </div>
  </div>
  <style>
      .fa-grid-widget-row {
        overflow: hidden;
        margin-bottom: 20px;
        padding: 5px;
      }
     
      .fa-grid-widget-column {
        box-sizing: border-box;
        width: 31%;
        margin: 0 1%;
        box-shadow: 0 0 1px 2px rgba(0, 0, 0, 0.2);
        padding: 5px;
        float: left;
      }
     
      .fa-grid-widget-column > a:first-child {
        display: block;
      }
     
      .fa-grid-widget-column img {
        max-width: 100%;
      }
  </style>
</div>
Substitua o valor URL_DA_IMAGEM pela imagem desejada. Por precaução, coloquei um redimensionamento de imagem nesta imagem. Quando colocar a imagem, ela ser redimensionada. Para confirmar isso, é só mudar o valor numérico do max-width: para redimensionar o tamanho desejado.
Se não quiser o redimensionamento, é só remover todo o style='max-width:
Shek

Shek
Principal Contribuidor
Principal Contribuidor

Membro desde : 11/04/2009
Mensagens : 18896
Pontos : 22793

https://shiftactive.blogspot.com/ https://www.facebook.com/ShiftActif https://twitter.com/ShiftActif

Ir para o topo Ir para baixo

Tópico resolvido Re: Criar Widget que fique imagem lado a lado

Mensagem por EDU2010 27.08.17 13:28

Bom dia , substituo o que foi pedido pela imagem e não resulta a imagem não aparece no quadro , veja o código ao qual estou usando , substitui os dois primeiros .

Além de não aparecer a imagem do comprar , desalinhou os quadro da forma que estava . Obrigado

Código:
<div class="fa-grid-widget">
        
   <div class="fa-grid-widget-row">
               
      <div class="fa-grid-widget-column">
                   <a href="#"><img src="https://i.servimg.com/u/f11/15/98/91/46/gaiola13.jpg" />      <br /><img title="Comprar produto" style="max-width: 0px;" src="https://i2.wp.com/www.imm-tecnologia.com.br/wp-content/uploads/2016/04/botao-comprar.png" /></a>        Texto<br />        Texto<br />        Texto       
      </div>
               
      <div class="fa-grid-widget-column">
                   <a href="#"><img src="https://images.tcdn.com.br/img/img_prod/382594/672_1_20140830093952.jpg" />      <br /><img title="Comprar produto" style="max-width: 0px;" src="https://i2.wp.com/www.imm-tecnologia.com.br/wp-content/uploads/2016/04/botao-comprar.png" /></a>        Texto<br />        Texto<br />        Texto       
      </div>
               
      <div class="fa-grid-widget-column">
                   <a href="#"><img src="https://images.tcdn.com.br/img/img_prod/382594/672_1_20140830093952.jpg" />      <br /><img title="Comprar produto" style="max-width: 0px;" src="URL_DA_IMAGEM" /></a>        Texto<br />        Texto<br />        Texto       
      </div>
               
      <div class="fa-grid-widget-column">
                   <a href="#"><img src="https://images.tcdn.com.br/img/img_prod/382594/672_1_20140830093952.jpg" />      <br /><img title="Comprar produto" style="max-width: 0px;" src="URL_DA_IMAGEM" /></a>        Texto<br />        Texto<br />        Texto       
      </div>
               
      <div class="fa-grid-widget-column">
                   <a href="#"><img src="https://images.tcdn.com.br/img/img_prod/382594/672_1_20140830093952.jpg" />      <br /><img title="Comprar produto" style="max-width: 0px;" src="URL_DA_IMAGEM" /></a>        Texto<br />        Texto<br />        Texto       
      </div>
               
      <div class="fa-grid-widget-column">
                   <a href="#"><img src="https://images.tcdn.com.br/img/img_prod/382594/672_1_20140830093952.jpg" />      <br /><img title="Comprar produto" style="max-width: 0px;" src="URL_DA_IMAGEM" /></a>        Texto<br />        Texto<br />        Texto       
      </div>
           
   </div>
       <style>
      .fa-grid-widget-row {
        overflow: hidden;
        margin-bottom: 20px;
        padding: 5px;
      }
     
      .fa-grid-widget-column {
        box-sizing: border-box;
        width: 31%;
        margin: 0 1%;
        box-shadow: 0 0 1px 2px rgba(0, 0, 0, 0.2);
        padding: 5px;
        float: left;
      }
     
      .fa-grid-widget-column > a:first-child {
        display: block;
      }
     
      .fa-grid-widget-column img {
        max-width: 100%;
      }
  </style>
</div>
EDU2010

EDU2010
Hiper Membro

Membro desde : 09/12/2010
Mensagens : 2295
Pontos : 3601

http://passarinhos.forumeiros.com/forum.htm

Ir para o topo Ir para baixo

Principal Contribuidor

Tópico resolvido Re: Criar Widget que fique imagem lado a lado

Mensagem por Shek 27.08.17 17:23

Você pode me mostrar uma imagem destes deslinhamentos que citou? Eu apliquei a imagem que você postou aqui no tópico, e simplesmente está alinhado tudo corretamente. Confira: http://shekforumeiros.forumeiros.com/h6-nome
Shek

Shek
Principal Contribuidor
Principal Contribuidor

Membro desde : 11/04/2009
Mensagens : 18896
Pontos : 22793

https://shiftactive.blogspot.com/ https://www.facebook.com/ShiftActif https://twitter.com/ShiftActif

Ir para o topo Ir para baixo

Tópico resolvido Re: Criar Widget que fique imagem lado a lado

Mensagem por EDU2010 28.08.17 0:47

oi poderia me pasar este codigo que voc~e utilizou tentei mais uma vez e não deu certo ficou desta maneira conforme print ..

widget - Criar Widget que fique imagem lado a lado  Exempl10
EDU2010

EDU2010
Hiper Membro

Membro desde : 09/12/2010
Mensagens : 2295
Pontos : 3601

http://passarinhos.forumeiros.com/forum.htm

Ir para o topo Ir para baixo

Principal Contribuidor

Tópico resolvido Re: Criar Widget que fique imagem lado a lado

Mensagem por Shek 28.08.17 2:46

Edu, está desta forma (desmontando) porque a imagem da gaiola é maior do que o quadro suporta. Me forneça o código que tens para que eu dê uma olhada, e tentar ver o que podemos fazer. Hm...
Shek

Shek
Principal Contribuidor
Principal Contribuidor

Membro desde : 11/04/2009
Mensagens : 18896
Pontos : 22793

https://shiftactive.blogspot.com/ https://www.facebook.com/ShiftActif https://twitter.com/ShiftActif

Ir para o topo Ir para baixo

Tópico resolvido Re: Criar Widget que fique imagem lado a lado

Mensagem por EDU2010 28.08.17 3:34

Código:
<div class="fa-grid-widget">
                
   <div class="fa-grid-widget-row">
                           
      <div class="fa-grid-widget-column">
                             <a href="#"><img src="https://i.servimg.com/u/f11/15/98/91/46/gaiola13.jpg" />      <br /><img src="https://i2.wp.com/www.imm-tecnologia.com.br/wp-content/uploads/2016/04/botao-comprar.png" style="max-width: 0px;" title="Comprar produto" /></a>        Texto<br />        Texto<br />        Texto             
      </div>
                           
      <div class="fa-grid-widget-column">
                             <a href="#"><img src="https://images.tcdn.com.br/img/img_prod/382594/672_1_20140830093952.jpg" />      <br /><img src="https://i2.wp.com/www.imm-tecnologia.com.br/wp-content/uploads/2016/04/botao-comprar.png" style="max-width: 0px;" title="Comprar produto" /></a>        Texto<br />        Texto<br />        Texto             
      </div>
                           
      <div class="fa-grid-widget-column">
                             <a href="#"><img src="https://images.tcdn.com.br/img/img_prod/382594/672_1_20140830093952.jpg" />      <br /><img src="URL_DA_IMAGEM" style="max-width: 0px;" title="Comprar produto" /></a>        Texto<br />        Texto<br />        Texto             
      </div>
                           
      <div class="fa-grid-widget-column">
                             <a href="#"><img src="https://images.tcdn.com.br/img/img_prod/382594/672_1_20140830093952.jpg" />      <br /><img src="URL_DA_IMAGEM" style="max-width: 0px;" title="Comprar produto" /></a>        Texto<br />        Texto<br />        Texto             
      </div>
                           
      <div class="fa-grid-widget-column">
                             <a href="#"><img src="https://images.tcdn.com.br/img/img_prod/382594/672_1_20140830093952.jpg" />      <br /><img src="URL_DA_IMAGEM" style="max-width: 0px;" title="Comprar produto" /></a>        Texto<br />        Texto<br />        Texto             
      </div>
                           
      <div class="fa-grid-widget-column">
                             <a href="#"><img src="https://images.tcdn.com.br/img/img_prod/382594/672_1_20140830093952.jpg" />      <br /><img src="URL_DA_IMAGEM" style="max-width: 0px;" title="Comprar produto" /></a>        Texto<br />        Texto<br />        Texto             
      </div>
                     
   </div>
           <style>
      .fa-grid-widget-row {
        overflow: hidden;
        margin-bottom: 20px;
        padding: 5px;
      }
     
      .fa-grid-widget-column {
        box-sizing: border-box;
        width: 31%;
        margin: 0 1%;
        box-shadow: 0 0 1px 2px rgba(0, 0, 0, 0.2);
        padding: 5px;
        float: left;
      }
     
      .fa-grid-widget-column > a:first-child {
        display: block;
      }
     
      .fa-grid-widget-column img {
        max-width: 100%;
      }
  </style>
</div>
EDU2010

EDU2010
Hiper Membro

Membro desde : 09/12/2010
Mensagens : 2295
Pontos : 3601

http://passarinhos.forumeiros.com/forum.htm

Ir para o topo Ir para baixo

Principal Contribuidor
  • 0

Tópico resolvido Re: Criar Widget que fique imagem lado a lado

Mensagem por Shek 28.08.17 4:05

A minha solução era dar um max-width nas imagens, mas, elas já estão com esta propriedade. O detalhe é que a imagem https://images.tcdn.com.br/img/img_prod/382594/672_1_20140830093952.jpg tem 1200px de largura e altura. Ou seja... Se todas as imagens tiverem essa mesma proporção de tamanho e largura, fará com que a tabela se encaixe corretamente. Se um dos quadros forem maior por causa do tamanho da imagem sem o max-widh, os quadros ficam desajustados.

Tenho duas recomendações:
- Você pode pedir imagens padronizadas (tamanhos padrão) no setor gráfico;
- Ou se achar melhor, podemos redimensionar todas as imagens para o mesmo tamanho, independente se ela for maior do que 1200px.

Se topar a segunda, é só substituir este código:
Código:
      .fa-grid-widget-column img {
        max-width: 100%;
      }
Por este:
Código:
.fa-grid-widget-column img {
    max-width: 300px;
    max-height: 300px;
}
OU:
Código:
.fa-grid-widget-column img {
    width: 300px;
    height: 300px;
}
Você pode mudar a proporção do tamanho alterando (no exemplo) o 300px do CSS. Feliz

Já que está a fazer uma loja, poderia usar o sistema de loja integrada do próprio fórum: https://ajuda.forumeiros.com/t11750-#68660
Aplicando este plugin: https://ajuda.forumeiros.com/t107608-topic

Até mais.
Shek

Shek
Principal Contribuidor
Principal Contribuidor

Membro desde : 11/04/2009
Mensagens : 18896
Pontos : 22793

https://shiftactive.blogspot.com/ https://www.facebook.com/ShiftActif https://twitter.com/ShiftActif

Ir para o topo Ir para baixo

Tópico resolvido Re: Criar Widget que fique imagem lado a lado

Mensagem por EDU2010 28.08.17 13:47

Eu não to conseguindo eu sou ruim nisso , me desculpe , poderia me passar o codigo pronto apenas pra eu substituir as imagens e colocar o link que as direcione . Somente isso . Até mais
EDU2010

EDU2010
Hiper Membro

Membro desde : 09/12/2010
Mensagens : 2295
Pontos : 3601

http://passarinhos.forumeiros.com/forum.htm

Ir para o topo Ir para baixo

Tópico resolvido Re: Criar Widget que fique imagem lado a lado

Mensagem por EDU2010 29.08.17 13:47

UP
EDU2010

EDU2010
Hiper Membro

Membro desde : 09/12/2010
Mensagens : 2295
Pontos : 3601

http://passarinhos.forumeiros.com/forum.htm

Ir para o topo Ir para baixo

  • 0

Tópico resolvido Re: Criar Widget que fique imagem lado a lado

Mensagem por Kyo Panda 30.08.17 14:34

Código:
<div class="fa-grid-widget">
  <div class="fa-grid-widget-row">
      <div class="fa-grid-widget-column">
        <a href="#"><img src="https://images.tcdn.com.br/img/img_prod/382594/672_1_20140830093952.jpg" /></a>
        <a href="#"><img src="https://i11.servimg.com/u/f11/15/95/44/80/botao-10.png" /></a>
      </div>
      <div class="fa-grid-widget-column">
        <a href="#"><img src="https://images.tcdn.com.br/img/img_prod/382594/672_1_20140830093952.jpg" /></a>
        <a href="#"><img src="https://i11.servimg.com/u/f11/15/95/44/80/botao-10.png" /></a>
      </div>
      <div class="fa-grid-widget-column">
        <a href="#"><img src="https://images.tcdn.com.br/img/img_prod/382594/672_1_20140830093952.jpg" /></a>
        <a href="#"><img src="https://i11.servimg.com/u/f11/15/95/44/80/botao-10.png" /></a>
      </div>
  </div>
  <div class="fa-grid-widget-row">
      <div class="fa-grid-widget-column">
        <a href="#"><img src="https://images.tcdn.com.br/img/img_prod/382594/672_1_20140830093952.jpg" /></a>
        <a href="#"><img src="https://i11.servimg.com/u/f11/15/95/44/80/botao-10.png" /></a>
      </div>
      <div class="fa-grid-widget-column">
        <a href="#"><img src="https://images.tcdn.com.br/img/img_prod/382594/672_1_20140830093952.jpg" /></a>
        <a href="#"><img src="https://i11.servimg.com/u/f11/15/95/44/80/botao-10.png" /></a>
      </div>
      <div class="fa-grid-widget-column">
        <a href="#"><img src="https://images.tcdn.com.br/img/img_prod/382594/672_1_20140830093952.jpg" /></a>
        <a href="#"><img src="https://i11.servimg.com/u/f11/15/95/44/80/botao-10.png" /></a>
      </div>
  </div>
  <div class="fa-grid-widget-row">
      <div class="fa-grid-widget-column">
        <a href="#"><img src="https://images.tcdn.com.br/img/img_prod/382594/672_1_20140830093952.jpg" /></a>
        <a href="#"><img src="https://i11.servimg.com/u/f11/15/95/44/80/botao-10.png" /></a>
      </div>
      <div class="fa-grid-widget-column">
        <a href="#"><img src="https://images.tcdn.com.br/img/img_prod/382594/672_1_20140830093952.jpg" /></a>
        <a href="#"><img src="https://i11.servimg.com/u/f11/15/95/44/80/botao-10.png" /></a>
      </div>
      <div class="fa-grid-widget-column">
        <a href="#"><img src="https://images.tcdn.com.br/img/img_prod/382594/672_1_20140830093952.jpg" /></a>
        <a href="#"><img src="https://i11.servimg.com/u/f11/15/95/44/80/botao-10.png" /></a>
      </div>
  </div>
  <style>
      .fa-grid-widget-row {
        overflow: hidden;
        margin-bottom: 20px;
        padding: 5px;
      }
     
      .fa-grid-widget-column {
        box-sizing: border-box;
        width: 31%;
        margin: 0 1%;
        box-shadow: 0 0 1px 2px rgba(0, 0, 0, 0.2);
        padding: 5px;
        float: left;
      }
     
      .fa-grid-widget-column > a:first-child {
        display: block;
      }
     
      .fa-grid-widget-column img {
        max-width: 100%;
      }
  </style>
</div>
Kyo Panda

Kyo Panda
Hiper Membro

Membro desde : 08/01/2012
Mensagens : 4641
Pontos : 5939

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Principal Contribuidor

Tópico resolvido Re: Criar Widget que fique imagem lado a lado

Mensagem por Shek 01.09.17 11:21

Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada.
Tópico marcado como Resolvido e movido para Questões resolvidas.
Shek

Shek
Principal Contribuidor
Principal Contribuidor

Membro desde : 11/04/2009
Mensagens : 18896
Pontos : 22793

https://shiftactive.blogspot.com/ https://www.facebook.com/ShiftActif https://twitter.com/ShiftActif

Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo

- Tópicos semelhantes

Permissões neste sub-fórum
Não podes responder a tópicos