Fórum dos Fóruns

Fórum dos Fóruns Forumeiros

Welcome FdF Bem-vindo ao fórum de suporte Forumeiros  Muito feliz


Para aproveitar tudo o que o nosso fórum lhe oferece, agradecemos que se identifique, se já é nosso membro, ou que se junte à nossa comunidade, fazendo o seu registo.
Acesso rápido

Fóruns de suporte oficiais
Login

Esqueci minha senha

Últimos assuntos
Perdi minha senha!
Você precisa recuperar sua senha?
Clique aqui
Parceiros Forumeiros
Quem está conectado
278 usuários online :: 11 usuários cadastrados, 1 Invisível e 266 Visitantes :: 2 Motores de busca

Connor R., Daemon, Fou-Lu, Harleen, Heitor A., isadora991, Kyo Panda, Luiz~, Shek Crowley, Stewart, Tiger

[ Ver toda a lista ]


O recorde de usuários online foi de 3131 em Qui 24 Dez 2009 - 15:05

Sistema de pré-visualizar em HTML

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

Resolvido Sistema de pré-visualizar em HTML

Mensagem por IsmaelS. em Seg 19 Set 2016 - 21:18

Detalhes da questão


Endereço do fórum: www.suportedesign.forumeiros.com
Versão do fórum: PunBB

Descrição


Olá!

Tenho uma página em HTML e queria que ao passar o mouse em cada avatar abri-se um tipo pré-visualizar com uma imagem à minha escolha, algo como isto:


Deixo aqui a seção: http://suportedesign.forumeiros.com/f73-psd-s, isso apenas é um exemplo porque quando passar o mouse por cima dos avatares a imagem que aparecer será a que eu colocar no código.

Código HTML:
Código:
<style>
body {
    background-attachment: fixed;
    background-color: #171714;
    background-image: url(https://i.imgur.com/AeiKmy6.png);
    color: #000;
    font-family: Roboto;
    font-size: 10px;
    height: auto;
    padding: 10px 0;
}
 
#pjtempo {
 background: #f8f8f8;
 position: fixed;
 padding: 20px;
 width: 925px;
 display: none;
 top: 50%;
 left: 50%;
 margin-top: -240px;
 margin-left: -482.5px;
 box-shadow: 6px 6px 10px #333;
}

.titulotex3 {
 background: url(http://i.imgbox.com/y6oNBDsU.png);
 height: 40px;
 padding: 40px;
 width: 845px;
 color: #f5f5f5;
 font-family: roboto;
 font-size: 14px;
 font-weight: 900;
 height: 16px;
 letter-spacing: 3px;
 line-height: 100%;
 margin-bottom: 5px!important;
 text-align: right;
 text-transform: uppercase;
}
 
.cuerpotp {
 background: #f9f9f9;
 border: 1px solid #ccc;
 color: #141414;
 font-family: Roboto;
 font-size: 11px;
 line-height: 110%;
 padding: 18px;
 text-align: center;
 width: 890px;
 height: 350px;
 overflow: auto;
}
 
.icono {
 width: 100px;
 height: 100px;
 border: 3px solid #fff;
 outline: 1px solid #e5e5e5;
 margin: 1px;
 display: inline-block;
 vertical-align: top;
}
 
.high {
 width: 100px;
 height: 100px;
 opacity: 0;
 transition-duration: 0.8s;
 Â -moz-transition-duration: 0.8s;
 Â -webkit-transition-duration: 0.8s;
 Â -o-transition-duration: 0.8s;
}
 
.canontitle {
 width: 100px;
 height: 100px;
 font-family: calibri;
 font-size: 8px;
 text-align: center;
 color: #fff;
 text-transform: uppercase;
 line-height: 100%;
 padding-top: 30px;
}
 
.lastname {
 width: 100px;
 font-family: 'Montserrat';
 font-size: 14px;
 text-transform: uppercase;
 letter-spacing: -1px;
 line-height: 100%;
}

.firstname {
 width: 100px;
 font-family: roboto;
 font-size: 10px;
 text-transform: lowercase;
 color: #fff;
 font-style: italic;
 line-height: 100%;
}
 
.high {
 width: 100px;
 height: 100px;
 opacity: 0;
 transition-duration: 0.8s;
 Â -moz-transition-duration: 0.8s;
 Â -webkit-transition-duration: 0.8s;
 Â -o-transition-duration: 0.8s;
}
 
.high:hover {
 width: 100px;
 height: 100px;
 opacity: 0.8;
 background-color: #464F3B
}
 
.logo {
margin-top: 55px;
}

</style> 

<center><img src="http://i35.servimg.com/u/f35/18/07/03/67/logosd10.png" class="logo"></center>
 
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" type="text/css" />    <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css" />      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />      <title>Hall of Fame</title>  <div id="pjtempo" style="display: block;">
                     

  <div class="titulotex3">
                    HALL OF FAME ● CREATIONS OF THE WEEK
  </div>
                                                                               
  <div class="cuerpotp">
                                                                           
      <div class="icono" style="background: url('http://i97.servimg.com/u/f97/18/07/03/67/lucas10.png')">
                                                                           
        <div class="high">
                                                                                                                                                                         
            <div class="canontitle">
                                  <span class="lastname">LucasRPG</span><br /><span class="firstname">COTW #1</span>                                                                                   
            </div>
                               
        </div>
                 
      </div>
                                                                         
      <div class="icono" style="background: url('http://i97.servimg.com/u/f97/18/07/03/67/lucas10.png')">
                                                                           
        <div class="high">
                                                                                                                                                                         
            <div class="canontitle">
                                  <span class="lastname">LucasRPG</span><br /><span class="firstname">COTW #2</span>                                                                                   
            </div>
                               
        </div>
                 
      </div>
                                                                           
      <div class="icono" style="background: url('http://i97.servimg.com/u/f97/18/07/03/67/reborn10.png')">
                                                                           
        <div class="high">
                                                                                                                                                                         
            <div class="canontitle">
                                  <span class="lastname">Reborn</span><br /><span class="firstname">COTW #3</span>                                                                                   
            </div>
                               
        </div>
                 
      </div>
                                                                           
      <div class="icono" style="background: url('http://i97.servimg.com/u/f97/18/07/03/67/naruto10.png')">
                                                                           
        <div class="high">
                                                                                                                                                                         
            <div class="canontitle">
                                  <span class="lastname">Naruto</span><br /><span class="firstname">COTW #4</span>                                                                                   
            </div>
                               
        </div>
                 
      </div>
                                                                           
      <div class="icono" style="background: url('http://i97.servimg.com/u/f97/18/07/03/67/reborn10.png')">
                                                                           
        <div class="high">
                                                                                                                                                                         
            <div class="canontitle">
                                  <span class="lastname">Reborn</span><br /><span class="firstname">COTW #5</span>                                                                                   
            </div>
                               
        </div>
                 
      </div>
                                                                           
      <div class="icono" style="background: url('http://i97.servimg.com/u/f97/18/07/03/67/reborn10.png')">
                                                                           
        <div class="high">
                                                                                                                                                                         
            <div class="canontitle">
                                  <span class="lastname">Reborn</span><br /><span class="firstname">COTW #6</span>                                                                                   
            </div>
                               
        </div>
                 
      </div>
                                                                           
      <div class="icono" style="background: url('http://i97.servimg.com/u/f97/18/07/03/67/stark10.png')">
                                                                           
        <div class="high">
                                                                                                                                                                         
            <div class="canontitle">
                                  <span class="lastname">Stark'</span><br /><span class="firstname">COTW #7</span>                                                                                   
            </div>
                               
        </div>
                 
      </div>
                                                                           
      <div class="icono" style="background: url('http://i97.servimg.com/u/f97/18/07/03/67/naruto10.png')">
                                                                           
        <div class="high">
                                                                                                                                                                         
            <div class="canontitle">
                                  <span class="lastname">David_David</span><br /><span class="firstname">COTW #8</span>                                                                                   
            </div>
                               
        </div>
                 
      </div>
                                                                           
      <div class="icono" style="background: url('http://i97.servimg.com/u/f97/18/07/03/67/chrome10.png')">
                                                                           
        <div class="high">
                                                                                                                                                                         
            <div class="canontitle">
                                  <span class="lastname">Chrome'</span><br /><span class="firstname">COTW #9</span>                                                                                   
            </div>
                               
        </div>
                 
      </div>
                                                                           
      <div class="icono" style="background: url('http://i97.servimg.com/u/f97/18/07/03/67/reborn10.png')">
                                                                           
        <div class="high">
                                                                                                                                                                         
            <div class="canontitle">
                                  <span class="lastname">Reborn</span><br /><span class="firstname">COTW #10</span>                                                                                   
            </div>
                               
        </div>
                 
      </div>
                                                                         
      <div class="icono" style="background: url('http://i97.servimg.com/u/f97/18/07/03/67/zer10.png')">
                                                                           
        <div class="high">
                                                                                                                                                                         
            <div class="canontitle">
                                  <span class="lastname">Zero</span><br /><span class="firstname">COTW #11</span>                                                                                   
            </div>
                               
        </div>
                 
      </div>
                                                                           
      <div class="icono" style="background: url('http://i97.servimg.com/u/f97/18/07/03/67/kamika10.png')">
                                                                           
        <div class="high">
                                                                                                                                                                         
            <div class="canontitle">
                                  <span class="lastname">Kamikaze</span><br /><span class="firstname">COTW #12</span>                                                                                   
            </div>
                               
        </div>
                 
      </div>
                                                                           
      <div class="icono" style="background: url('http://i97.servimg.com/u/f97/18/07/03/67/zer10.png')">
                                                                           
        <div class="high">
                                                                                                                                                                         
            <div class="canontitle">
                                  <span class="lastname">Zero</span><br /><span class="firstname">COTW #13</span>                                                                                   
            </div>
                               
        </div>
                 
      </div>
                                                                           
      <div class="icono" style="background: url('http://i97.servimg.com/u/f97/18/07/03/67/zer10.png')">
                                                                           
        <div class="high">
                                                                                                                                                                         
            <div class="canontitle">
                                  <span class="lastname">Zero</span><br /><span class="firstname">COTW #14</span>                                                                                   
            </div>
                               
        </div>
                 
      </div>
                                                                         
      <div class="icono" style="background: url('http://i97.servimg.com/u/f97/18/07/03/67/zer10.png')">
                                                                           
        <div class="high">
                                                                                                                                                                         
            <div class="canontitle">
                                  <span class="lastname">Zero</span><br /><span class="firstname">COTW #16</span>                                                                                   
            </div>
                               
        </div>
                 
      </div>
                                                                           
      <div class="icono" style="background: url('https://i.imgur.com/5nRUgQi.png')">
                                                                           
        <div class="high">
                                                                                                                                                                         
            <div class="canontitle">
                                  <span class="lastname">Nome</span><br /><span class="firstname">COTW #</span>                                                                                   
            </div>
                               
        </div>
                 
      </div>
                                                                           
      <div class="icono" style="background: url('https://i.imgur.com/5nRUgQi.png')">
                                                                           
        <div class="high">
                                                                                                                                                                         
            <div class="canontitle">
                                  <span class="lastname">Nome</span><br /><span class="firstname">COTW #</span>                                                                                   
            </div>
                               
        </div>
                 
      </div>
                                                                           
      <div class="icono" style="background: url('https://i.imgur.com/5nRUgQi.png')">
                                                                           
        <div class="high">
                                                                                                                                                                         
            <div class="canontitle">
                                  <span class="lastname">Nome</span><br /><span class="firstname">COTW #</span>                                                                                   
            </div>
                               
        </div>
                 
      </div>
                                                                           
      <div class="icono" style="background: url('https://i.imgur.com/5nRUgQi.png')">
                                                                           
        <div class="high">
                                                                                                                                                                         
            <div class="canontitle">
                                  <span class="lastname">Nome</span><br /><span class="firstname">COTW #</span>                                                                                   
            </div>
                               
        </div>
                 
      </div>
                                                                           
      <div class="icono" style="background: url('https://i.imgur.com/5nRUgQi.png')">
                                                                           
        <div class="high">
                                                                                                                                                                         
            <div class="canontitle">
                                  <span class="lastname">Nome</span><br /><span class="firstname">COTW #</span>                                                                                   
            </div>
                               
        </div>
                 
      </div>
                                                                           
      <div class="icono" style="background: url('https://i.imgur.com/5nRUgQi.png')">
                                                                           
        <div class="high">
                                                                                                                                                                         
            <div class="canontitle">
                                  <span class="lastname">Nome</span><br /><span class="firstname">COTW #</span>                                                                                   
            </div>
                               
        </div>
                 
      </div>
                                                                         
      <div class="icono" style="background: url('https://i.imgur.com/5nRUgQi.png')">
                                                                           
        <div class="high">
                                                                                                                                                                         
            <div class="canontitle">
                                  <span class="lastname">Nome</span><br /><span class="firstname">COTW #</span>                                                                                   
            </div>
                               
        </div>
                 
      </div>
                                                                           
      <div class="icono" style="background: url('https://i.imgur.com/5nRUgQi.png')">
                                                                           
        <div class="high">
                                                                                                                                                                         
            <div class="canontitle">
                                  <span class="lastname">Nome</span><br /><span class="firstname">COTW #</span>                                                                                   
            </div>
                               
        </div>
                 
      </div>
                                                                           
      <div class="icono" style="background: url('https://i.imgur.com/5nRUgQi.png')">
                                                                           
        <div class="high">
                                                                                                                                                                         
            <div class="canontitle">
                                  <span class="lastname">Nome</span><br /><span class="firstname">COTW #</span>                                                                                   
            </div>
                               
        </div>
                 
      </div>
                                                               
  </div>
             
</div>

Página HTML: http://suportedesign.forumeiros.com/h4-hall-of-fame

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2610
Pontos Ativos : 5175

http://suportedesign.forumeiros.com/

Resolvido Re: Sistema de pré-visualizar em HTML

Mensagem por IsmaelS. em Qua 21 Set 2016 - 1:38

UP!

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2610
Pontos Ativos : 5175

http://suportedesign.forumeiros.com/
  • 0

Resolvido Re: Sistema de pré-visualizar em HTML

Mensagem por Hancki em Qui 22 Set 2016 - 21:48

Olá!

Apenas com CSS podemos fazer isso.
Adicione este código abaixo na sua página HTML:
Código:
<style>
.icono:hover {
    position: relative;
}
.icono:nth-child(1):hover:after {
    content: url(http://i86.servimg.com/u/f86/12/05/75/97/logo_p11.jpg);
    display: block;
    position: absolute;
    left: 123px;
    top: -0px;
    border: 10px solid black;
}
<style>
Procure por ".icono:nth-child(1)".
Esse número 1 equivale ao primeiro avatar. Logo abaixo da linha onde encontra isso, tem um link de uma imagem, que será a que aparece ao lado.

Para colocar no segundo avatar, tem que adicionar novo código abaixo do que lhe forneci acima, assim:
Código:
.icono:nth-child(2):hover:after {
    content: url(http://i86.servimg.com/u/f86/12/05/75/97/logo_p11.jpg);
    display: block;
    position: absolute;
    left: 123px;
    top: -0px;
    border: 10px solid black;
}
Agora já tem o segundo avatar com imagem de pré-visualização.
Tem que adicionar este código sempre para uma nova imagem e mudar o número, correspondendo à posição do ícone.

Hancki

Hancki
Ex-Admineiro
Ex-Admineiro

Masculino
Inscrito dia : 03/10/2009
Mensagens : 8037
Pontos Ativos : 14709

http://programacaoweb.forumeiros.com/ https://www.facebook.com/djtomoficial https://twitter.com/https://www.facebook.com/djtomoficial

Resolvido Re: Sistema de pré-visualizar em HTML

Mensagem por IsmaelS. em Qui 22 Set 2016 - 22:08

Resultou e ficou óptimo porém o problema é que quando as imagens são grandes os avatares ficam em modo "scroll" veja:
- http://suportedesign.forumeiros.com/h4-hall-of-fame

Não dá para deixar como estava?

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2610
Pontos Ativos : 5175

http://suportedesign.forumeiros.com/

Resolvido Re: Sistema de pré-visualizar em HTML

Mensagem por Shek Crowley em Sex 23 Set 2016 - 14:33

Olá!

Para mim o scrol não aparece Ismael. Poderia nos enviar uma imagem, por favor?



Shek Crowley
Admineiro
Admineiro

Masculino
Inscrito dia : 11/04/2009
Mensagens : 15650
Pontos Ativos : 23097

http://www.shiftactif.com https://www.facebook.com/shek.crowley https://twitter.com/shek_forumactif

Resolvido Re: Sistema de pré-visualizar em HTML

Mensagem por Hancki em Sex 23 Set 2016 - 19:30

És ó adicionar mais este CSS:
Código:
.cuerpotp {
    overflow: hidden !important;
}

Hancki

Hancki
Ex-Admineiro
Ex-Admineiro

Masculino
Inscrito dia : 03/10/2009
Mensagens : 8037
Pontos Ativos : 14709

http://programacaoweb.forumeiros.com/ https://www.facebook.com/djtomoficial https://twitter.com/https://www.facebook.com/djtomoficial

Resolvido Re: Sistema de pré-visualizar em HTML

Mensagem por IsmaelS. em Sab 24 Set 2016 - 2:57

Resultou, só tem um pequeno problema veja se calha de ser um avatar grande:


É possível deixar por cima de tudo?

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2610
Pontos Ativos : 5175

http://suportedesign.forumeiros.com/
  • 0

Resolvido Re: Sistema de pré-visualizar em HTML

Mensagem por Hancki em Sab 24 Set 2016 - 21:52

Substitua o código todo da página por este:
Código:

<style>
body {
    background-attachment: fixed;
    background-color: #171714;
    background-image: url(https://i.imgur.com/AeiKmy6.png);
    color: #000;
    font-family: Roboto;
    font-size: 10px;
    height: auto;
    padding: 10px 0;
}
 
#pjtempo {
 background: #f8f8f8;
 position: fixed;
 padding: 20px;
 width: 925px;
 display: none;
 top: 50%;
 left: 50%;
 margin-top: -240px;
 margin-left: -482.5px;
 box-shadow: 6px 6px 10px #333;
}

.titulotex3 {
 background: url(http://i.imgbox.com/y6oNBDsU.png);
 height: 40px;
 padding: 40px;
 width: 845px;
 color: #f5f5f5;
 font-family: roboto;
 font-size: 14px;
 font-weight: 900;
 height: 16px;
 letter-spacing: 3px;
 line-height: 100%;
 margin-bottom: 5px!important;
 text-align: right;
 text-transform: uppercase;
}
 
.cuerpotp {
 background: #f9f9f9;
 border: 1px solid #ccc;
 color: #141414;
 font-family: Roboto;
 font-size: 11px;
 line-height: 110%;
 padding: 18px;
 text-align: center;
 width: 890px;
 height: 350px;
 overflow: auto;
}
 
.icono {
 width: 100px;
 height: 100px;
 border: 3px solid #fff;
 outline: 1px solid #e5e5e5;
 margin: 1px;
 display: inline-block;
 vertical-align: top;
}
 
.high {
 width: 100px;
 height: 100px;
 opacity: 0;
 transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-webkit-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
}
 
.canontitle {
 width: 100px;
 height: 100px;
 font-family: calibri;
 font-size: 8px;
 text-align: center;
 color: #fff;
 text-transform: uppercase;
 line-height: 100%;
 padding-top: 30px;
  overflow: visible !important;
}
 
.lastname {
 width: 100px;
 font-family: 'Montserrat';
 font-size: 14px;
 text-transform: uppercase;
 letter-spacing: -1px;
 line-height: 100%;
}

.firstname {
 width: 100px;
 font-family: roboto;
 font-size: 10px;
 text-transform: lowercase;
 color: #fff;
 font-style: italic;
 line-height: 100%;
}
 
.high {
 width: 100px;
 height: 100px;
 opacity: 0;
 transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-webkit-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
}
 
.high:hover {
 width: 100px;
 height: 100px;
 opacity: 0.8;
 background-color: #464F3B
}
 
.logo {
margin-top: 55px;
}
 
.icono:hover {
    position: relative;
    overflow: visible !important;
}
.icono:nth-child(1):hover:after {
    content: url(http://i.imgur.com/eDwzn.jpg);
    display: block;
    position: absolute;
    left: 123px;
    top: -0px;
    border: 10px solid black;
    overflow: visible !important;

  .icono:nth-child(2):hover:after {
    content: url(http://i.imgur.com/7tYu4.jpg);
    display: block;
    position: absolute;
    left: 123px;
    top: -0px;
    border: 10px solid black;
    overflow: visible !important;
}
.cuerpotp {
      overflow: visible !important;
}
</style> 

<center><img src="http://i35.servimg.com/u/f35/18/07/03/67/logosd10.png" class="logo"></center>
 
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" type="text/css" />    <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css" />      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />      <title>Hall of Fame</title>  <div id="pjtempo" style="display: block;">
                     

  <div class="titulotex3">
                    HALL OF FAME ● CREATIONS OF THE WEEK
  </div>
                                                                               
  <div class="cuerpotp">
                                                                           
      <div class="icono" style="background: url('http://i97.servimg.com/u/f97/18/07/03/67/lucas10.png')">
                                                                           
        <div class="high">
                                                                                                                                                                         
            <div class="canontitle">
                                  <span class="lastname">LucasRPG</span><br /><span class="firstname">COTW #1</span>                                                                                   
            </div>
                               
        </div>
                 
      </div>
                                                                         
      <div class="icono" style="background: url('http://i97.servimg.com/u/f97/18/07/03/67/lucas10.png')">
                                                                           
        <div class="high">
                                                                                                                                                                         
            <div class="canontitle">
                                  <span class="lastname">LucasRPG</span><br /><span class="firstname">COTW #2</span>                                                                                   
            </div>
                               
        </div>
                 
      </div>
                                                                           
      <div class="icono" style="background: url('http://i97.servimg.com/u/f97/18/07/03/67/reborn10.png')">
                                                                           
        <div class="high">
                                                                                                                                                                         
            <div class="canontitle">
                                  <span class="lastname">Reborn</span><br /><span class="firstname">COTW #3</span>                                                                                   
            </div>
                               
        </div>
                 
      </div>
                                                                           
      <div class="icono" style="background: url('http://i97.servimg.com/u/f97/18/07/03/67/naruto10.png')">
                                                                           
        <div class="high">
                                                                                                                                                                         
            <div class="canontitle">
                                  <span class="lastname">Naruto</span><br /><span class="firstname">COTW #4</span>                                                                                   
            </div>
                               
        </div>
                 
      </div>
                                                                           
      <div class="icono" style="background: url('http://i97.servimg.com/u/f97/18/07/03/67/reborn10.png')">
                                                                           
        <div class="high">
                                                                                                                                                                         
            <div class="canontitle">
                                  <span class="lastname">Reborn</span><br /><span class="firstname">COTW #5</span>                                                                                   
            </div>
                               
        </div>
                 
      </div>
                                                                           
      <div class="icono" style="background: url('http://i97.servimg.com/u/f97/18/07/03/67/reborn10.png')">
                                                                           
        <div class="high">
                                                                                                                                                                         
            <div class="canontitle">
                                  <span class="lastname">Reborn</span><br /><span class="firstname">COTW #6</span>                                                                                   
            </div>
                               
        </div>
                 
      </div>
                                                                           
      <div class="icono" style="background: url('http://i97.servimg.com/u/f97/18/07/03/67/stark10.png')">
                                                                           
        <div class="high">
                                                                                                                                                                         
            <div class="canontitle">
                                  <span class="lastname">Stark'</span><br /><span class="firstname">COTW #7</span>                                                                                   
            </div>
                               
        </div>
                 
      </div>
                                                                           
      <div class="icono" style="background: url('http://i97.servimg.com/u/f97/18/07/03/67/naruto10.png')">
                                                                           
        <div class="high">
                                                                                                                                                                         
            <div class="canontitle">
                                  <span class="lastname">David_David</span><br /><span class="firstname">COTW #8</span>                                                                                   
            </div>
                               
        </div>
                 
      </div>
                                                                           
      <div class="icono" style="background: url('http://i97.servimg.com/u/f97/18/07/03/67/chrome10.png')">
                                                                           
        <div class="high">
                                                                                                                                                                         
            <div class="canontitle">
                                  <span class="lastname">Chrome'</span><br /><span class="firstname">COTW #9</span>                                                                                   
            </div>
                               
        </div>
                 
      </div>
                                                                           
      <div class="icono" style="background: url('http://i97.servimg.com/u/f97/18/07/03/67/reborn10.png')">
                                                                           
        <div class="high">
                                                                                                                                                                         
            <div class="canontitle">
                                  <span class="lastname">Reborn</span><br /><span class="firstname">COTW #10</span>                                                                                   
            </div>
                               
        </div>
                 
      </div>
                                                                         
      <div class="icono" style="background: url('http://i97.servimg.com/u/f97/18/07/03/67/zer10.png')">
                                                                           
        <div class="high">
                                                                                                                                                                         
            <div class="canontitle">
                                  <span class="lastname">Zero</span><br /><span class="firstname">COTW #11</span>                                                                                   
            </div>
                               
        </div>
                 
      </div>
                                                                           
      <div class="icono" style="background: url('http://i97.servimg.com/u/f97/18/07/03/67/kamika10.png')">
                                                                           
        <div class="high">
                                                                                                                                                                         
            <div class="canontitle">
                                  <span class="lastname">Kamikaze</span><br /><span class="firstname">COTW #12</span>                                                                                   
            </div>
                               
        </div>
                 
      </div>
                                                                           
      <div class="icono" style="background: url('http://i97.servimg.com/u/f97/18/07/03/67/zer10.png')">
                                                                           
        <div class="high">
                                                                                                                                                                         
            <div class="canontitle">
                                  <span class="lastname">Zero</span><br /><span class="firstname">COTW #13</span>                                                                                   
            </div>
                               
        </div>
                 
      </div>
                                                                           
      <div class="icono" style="background: url('http://i97.servimg.com/u/f97/18/07/03/67/zer10.png')">
                                                                           
        <div class="high">
                                                                                                                                                                         
            <div class="canontitle">
                                  <span class="lastname">Zero</span><br /><span class="firstname">COTW #14</span>                                                                                   
            </div>
                               
        </div>
                 
      </div>
                                                                         
      <div class="icono" style="background: url('http://i97.servimg.com/u/f97/18/07/03/67/zer10.png')">
                                                                           
        <div class="high">
                                                                                                                                                                         
            <div class="canontitle">
                                  <span class="lastname">Zero</span><br /><span class="firstname">COTW #16</span>                                                                                   
            </div>
                               
        </div>
                 
      </div>
                                                                           
      <div class="icono" style="background: url('https://i.imgur.com/5nRUgQi.png')">
                                                                           
        <div class="high">
                                                                                                                                                                         
            <div class="canontitle">
                                  <span class="lastname">Nome</span><br /><span class="firstname">COTW #</span>                                                                                   
            </div>
                               
        </div>
                 
      </div>
                                                                           
      <div class="icono" style="background: url('https://i.imgur.com/5nRUgQi.png')">
                                                                           
        <div class="high">
                                                                                                                                                                         
            <div class="canontitle">
                                  <span class="lastname">Nome</span><br /><span class="firstname">COTW #</span>                                                                                   
            </div>
                               
        </div>
                 
      </div>
                                                                           
      <div class="icono" style="background: url('https://i.imgur.com/5nRUgQi.png')">
                                                                           
        <div class="high">
                                                                                                                                                                         
            <div class="canontitle">
                                  <span class="lastname">Nome</span><br /><span class="firstname">COTW #</span>                                                                                   
            </div>
                               
        </div>
                 
      </div>
                                                                           
      <div class="icono" style="background: url('https://i.imgur.com/5nRUgQi.png')">
                                                                           
        <div class="high">
                                                                                                                                                                         
            <div class="canontitle">
                                  <span class="lastname">Nome</span><br /><span class="firstname">COTW #</span>                                                                                   
            </div>
                               
        </div>
                 
      </div>
                                                                           
      <div class="icono" style="background: url('https://i.imgur.com/5nRUgQi.png')">
                                                                           
        <div class="high">
                                                                                                                                                                         
            <div class="canontitle">
                                  <span class="lastname">Nome</span><br /><span class="firstname">COTW #</span>                                                                                   
            </div>
                               
        </div>
                 
      </div>
                                                                           
      <div class="icono" style="background: url('https://i.imgur.com/5nRUgQi.png')">
                                                                           
        <div class="high">
                                                                                                                                                                         
            <div class="canontitle">
                                  <span class="lastname">Nome</span><br /><span class="firstname">COTW #</span>                                                                                   
            </div>
                               
        </div>
                 
      </div>
                                                                         
      <div class="icono" style="background: url('https://i.imgur.com/5nRUgQi.png')">
                                                                           
        <div class="high">
                                                                                                                                                                         
            <div class="canontitle">
                                  <span class="lastname">Nome</span><br /><span class="firstname">COTW #</span>                                                                                   
            </div>
                               
        </div>
                 
      </div>
                                                                           
      <div class="icono" style="background: url('https://i.imgur.com/5nRUgQi.png')">
                                                                           
        <div class="high">
                                                                                                                                                                         
            <div class="canontitle">
                                  <span class="lastname">Nome</span><br /><span class="firstname">COTW #</span>                                                                                   
            </div>
                               
        </div>
                 
      </div>
                                                                           
      <div class="icono" style="background: url('https://i.imgur.com/5nRUgQi.png')">
                                                                           
        <div class="high">
                                                                                                                                                                         
            <div class="canontitle">
                                  <span class="lastname">Nome</span><br /><span class="firstname">COTW #</span>                                                                                   
            </div>
                               
        </div>
                 
      </div>
                                                               
  </div>
             
</div>

Hancki

Hancki
Ex-Admineiro
Ex-Admineiro

Masculino
Inscrito dia : 03/10/2009
Mensagens : 8037
Pontos Ativos : 14709

http://programacaoweb.forumeiros.com/ https://www.facebook.com/djtomoficial https://twitter.com/https://www.facebook.com/djtomoficial

Resolvido Re: Sistema de pré-visualizar em HTML

Mensagem por IsmaelS. em Dom 25 Set 2016 - 16:03

Ficou óptimo obrigado!! ;D

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2610
Pontos Ativos : 5175

http://suportedesign.forumeiros.com/

Resolvido Re: Sistema de pré-visualizar em HTML

Mensagem por while em Dom 25 Set 2016 - 16:09

Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada.

Tópico marcado como Resolvido e movido para "Questões resolvidas".

while
Usuário experiente

Masculino
Inscrito dia : 24/04/2016
Mensagens : 2848
Pontos Ativos : 4294

http://www.ajuda.forumeiros.com https://www.facebook.com/https://www.facebook.com/profile.php?id=100012157981279

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