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
Conectar-se

Esqueci minha senha

Últimos assuntos
» Aparecer pop-up de login ao clicar em Conectar-se
Hoje à(s) 05:52 am por Flames

» Colocar link do perfil no menu
Hoje à(s) 05:51 am por Luiz

» Personalizar barra de ferramentas
Hoje à(s) 05:25 am por Flames

» Logo do fórum
Hoje à(s) 05:04 am por Luiz

» Cor do fundos dos tópicos
Hoje à(s) 05:02 am por Luiz

» Como adicionar um Painel de Usuário no fórum?
Hoje à(s) 04:59 am por Luiz

» Categoria do fórum
Hoje à(s) 12:06 am por PrisoN†BreaK

Perdi minha senha!
Você precisa recuperar sua senha?
Clique aqui
Parceiros Forumeiros
Os membros mais ativos da semana
Harleen
 
Kyo Panda
 
Luiz
 
Fatalisss
 
Holkis
 
Flames
 
JulioPais
 
Shek
 
APOllO
 
Forumpw
 

Quem está conectado
222 usuários online :: Nenhum usuário registrado, Nenhum Invisível e 222 Visitantes :: 2 Motores de busca

Nenhum

[ Ver toda a lista ]


O recorde de usuários online foi de 3131 em 24/12/09, 01:05 pm

Tabela com imagem e textos linkados (html)

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

Resolvido Tabela com imagem e textos linkados (html)

Mensagem por PESS_dodo em 03/04/17, 08:53 am

Detalhes da questão


Endereço do fórum: http://www.blrpg.com.br
Versão do fórum: phpBB3

Descrição


Bom dia, quero fazer uma pagina html e por igual nessa imagem


http://i.imgur.com/ye6biDi.png
Tirar essa parte que tem "detalhes" em baixo de comprar

me mostrar onde substituir o link do "comprar" e o valor e a imagem

Imagem utilizada nessa loja ai, pode usar ela,vou editar e troco
http://i.imgur.com/2JxIjPQ.png


Última edição por PESS_dodo em 03/04/17, 02:44 pm, editado 1 vez(es)
avatar

PESS_dodo
Nível 9

Masculino
Inscrito dia : 16/02/2017
Mensagens : 170
Pontos Ativos : 293

http://adliferpg.forumeiros.com/forum https://www.facebook.com/advancedliferpg/?ref=bookmarks https://twitter.com/http://adliferpg.forumeiros.com/forum

Resolvido Re: Tabela com imagem e textos linkados (html)

Mensagem por Luiz em 03/04/17, 01:34 pm

Olá,

Infelizmente, nós não criamos páginas HTML.

Para saber mais, leia:
-> http://ajuda.forumeiros.com/t7967-faq-criar-uma-pagina-inicial-html-personalizada

O senhor pode usar este código que fiz como base:
Código:
<div class="row">
 
  <!-- Item 1 -->
  <article class="item">
    <span class="price">100 000 créditos</span>
    <i class="fa fa-money" aria-hidden="true"></i>
    <span class="price">100 000</span>
    <span class="money-type">créditos</span>
    <footer>
      <span class="real-price">
        R$ 100,00
      </span>
      <button class="buy">
        <a href="LINK_DA_COMPRA">Comprar</a>
      </button>
    </footer>
  </article>
 
  <!-- Item 2 -->
  <article class="item">
    <span class="price">100 000 créditos</span>
    <i class="fa fa-money" aria-hidden="true"></i>
    <span class="price">100 000</span>
    <span class="money-type">créditos</span>
    <footer>
      <span class="real-price">
        R$ 100,00
      </span>
      <button class="buy">
        <a href="LINK_DA_COMPRA">Comprar</a>
      </button>
    </footer>
  </article>
 
  <!-- Item 3 -->
  <article class="item">
    <span class="price">100 000 créditos</span>
    <i class="fa fa-money" aria-hidden="true"></i>
    <span class="price">100 000</span>
    <span class="money-type">créditos</span>
    <footer>
      <span class="real-price">
        R$ 100,00
      </span>
      <button class="buy">
        <a href="LINK_DA_COMPRA">Comprar</a>
      </button>
    </footer>
  </article>
</div>

<!-- CSS BEGIN -->
<style type="text/css">
@import "http://fontawesome.io/assets/font-awesome/css/font-awesome.css";
@import "https://fonts.googleapis.com/css?family=Josefin+Sans:300,300i,400,400i,600,600i,700,700i";
* {
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
}

div.row {
  display: block;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-family: "Josefin Sans", sans-serif;
  font-size: 18px;
}
div.row article.item {
  width: 28%;
  background-color: #fff;
  border: solid 1px #197aff;
  margin: 60px 60px;
  padding: 20px;
  border-radius: 3px;
}
div.row article.item .price {
  display: block;
  text-align: center;
}
div.row article.item .fa.fa-money {
  color: #197aff;
  font-size: 120px;
  display: block;
  text-align: center;
}
div.row article.item .fa.fa-money + .price {
  font-size: 38px;
  font-weight: 300;
  color: #197aff;
}
div.row article.item .fa.fa-money + .price + .money-type {
  display: block;
  text-align: center;
  margin-top: -5px;
  font-size: 20px;
}
div.row article.item footer {
  display: block;
}
div.row article.item footer .real-price {
  text-align: left;
  font-weight: bold;
}
div.row article.item footer .buy {
  float: right;
  background-color: transparent;
  border: solid 1px #197aff;
  padding: 5px 10px;
  border-radius: 3px;
  font-size: 15px;
  -webkit-transition: all ease-in 200ms;
  transition: all ease-in 200ms;
}
div.row article.item footer .buy a {
  color: #333;
  text-decoration: none;
  font-weight: 300;
  -webkit-transition: all ease-in 200ms;
  transition: all ease-in 200ms;
}
div.row article.item footer .buy:hover {
  background-color: #197aff;
}
div.row article.item footer .buy:hover a {
  color: #fff;
}
</style>

O resultado pode ser conferido aqui:
-> http://codepen.io/0Luiz/pen/oZVxBe

Tchau


Última edição por Luiz~ em 03/04/17, 01:36 pm, editado 1 vez(es) (Razão : Pequena correção de código.)
avatar

Luiz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 22/04/2016
Mensagens : 3566
Pontos Ativos : 4246

https://github.com/lffg/

Resolvido Re: Tabela com imagem e textos linkados (html)

Mensagem por PESS_dodo em 03/04/17, 01:46 pm

Luiz~ escreveu:Olá,

Infelizmente, nós não criamos páginas HTML.

Para saber mais, leia:
-> http://ajuda.forumeiros.com/t7967-faq-criar-uma-pagina-inicial-html-personalizada

O senhor pode usar este código que fiz como base:
Código:
<div class="row">
 
  <!-- Item 1 -->
  <article class="item">
    <span class="price">100 000 créditos</span>
    <i class="fa fa-money" aria-hidden="true"></i>
    <span class="price">100 000</span>
    <span class="money-type">créditos</span>
    <footer>
      <span class="real-price">
        R$ 100,00
      </span>
      <button class="buy">
        <a href="LINK_DA_COMPRA">Comprar</a>
      </button>
    </footer>
  </article>
 
  <!-- Item 2 -->
  <article class="item">
    <span class="price">100 000 créditos</span>
    <i class="fa fa-money" aria-hidden="true"></i>
    <span class="price">100 000</span>
    <span class="money-type">créditos</span>
    <footer>
      <span class="real-price">
        R$ 100,00
      </span>
      <button class="buy">
        <a href="LINK_DA_COMPRA">Comprar</a>
      </button>
    </footer>
  </article>
 
  <!-- Item 3 -->
  <article class="item">
    <span class="price">100 000 créditos</span>
    <i class="fa fa-money" aria-hidden="true"></i>
    <span class="price">100 000</span>
    <span class="money-type">créditos</span>
    <footer>
      <span class="real-price">
        R$ 100,00
      </span>
      <button class="buy">
        <a href="LINK_DA_COMPRA">Comprar</a>
      </button>
    </footer>
  </article>
</div>

<!-- CSS BEGIN -->
<style type="text/css">
@import "http://fontawesome.io/assets/font-awesome/css/font-awesome.css";
@import "https://fonts.googleapis.com/css?family=Josefin+Sans:300,300i,400,400i,600,600i,700,700i";
* {
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
}

div.row {
  display: block;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-family: "Josefin Sans", sans-serif;
  font-size: 18px;
}
div.row article.item {
  width: 28%;
  background-color: #fff;
  border: solid 1px #197aff;
  margin: 60px 60px;
  padding: 20px;
  border-radius: 3px;
}
div.row article.item .price {
  display: block;
  text-align: center;
}
div.row article.item .fa.fa-money {
  color: #197aff;
  font-size: 120px;
  display: block;
  text-align: center;
}
div.row article.item .fa.fa-money + .price {
  font-size: 38px;
  font-weight: 300;
  color: #197aff;
}
div.row article.item .fa.fa-money + .price + .money-type {
  display: block;
  text-align: center;
  margin-top: -5px;
  font-size: 20px;
}
div.row article.item footer {
  display: block;
}
div.row article.item footer .real-price {
  text-align: left;
  font-weight: bold;
}
div.row article.item footer .buy {
  float: right;
  background-color: transparent;
  border: solid 1px #197aff;
  padding: 5px 10px;
  border-radius: 3px;
  font-size: 15px;
  -webkit-transition: all ease-in 200ms;
  transition: all ease-in 200ms;
}
div.row article.item footer .buy a {
  color: #333;
  text-decoration: none;
  font-weight: 300;
  -webkit-transition: all ease-in 200ms;
  transition: all ease-in 200ms;
}
div.row article.item footer .buy:hover {
  background-color: #197aff;
}
div.row article.item footer .buy:hover a {
  color: #fff;
}
</style>

O resultado pode ser conferido aqui:
-> http://codepen.io/0Luiz/pen/oZVxBe

Tchau

Ficou TOP, muito melhor do que o da imagem que pedi Party

Como faço pra adicionar mais 1 item desse?
avatar

PESS_dodo
Nível 9

Masculino
Inscrito dia : 16/02/2017
Mensagens : 170
Pontos Ativos : 293

http://adliferpg.forumeiros.com/forum https://www.facebook.com/advancedliferpg/?ref=bookmarks https://twitter.com/http://adliferpg.forumeiros.com/forum

Resolvido Re: Tabela com imagem e textos linkados (html)

Mensagem por Luiz em 03/04/17, 01:48 pm

Basta adicionar, depois de
<div class="row">
, este código:
Código:
<!-- Item 1 -->
  <article class="item">
    <span class="price">100 000 créditos</span>
    <i class="fa fa-money" aria-hidden="true"></i>
    <span class="price">100 000</span>
    <span class="money-type">créditos</span>
    <footer>
      <span class="real-price">
        R$ 100,00
      </span>
      <button class="buy">
        <a href="LINK_DA_COMPRA">Comprar</a>
      </button>
    </footer>
  </article>

Que bom que o senhor gostou. Rose
Tchau
avatar

Luiz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 22/04/2016
Mensagens : 3566
Pontos Ativos : 4246

https://github.com/lffg/

Resolvido Re: Tabela com imagem e textos linkados (html)

Mensagem por PESS_dodo em 03/04/17, 01:49 pm


http://i.imgur.com/VAX64aO.png

Quando salvei a primeira vez ficou assim normal, depois ficou como mostra a imagem a cima
avatar

PESS_dodo
Nível 9

Masculino
Inscrito dia : 16/02/2017
Mensagens : 170
Pontos Ativos : 293

http://adliferpg.forumeiros.com/forum https://www.facebook.com/advancedliferpg/?ref=bookmarks https://twitter.com/http://adliferpg.forumeiros.com/forum

Resolvido Re: Tabela com imagem e textos linkados (html)

Mensagem por Luiz em 03/04/17, 01:53 pm

Olá,

Troque o código por este:
Código:
<div class="row">
 
  <!-- Item 1 -->
  <article class="item">
    <span class="price">100 000 créditos</span>
    <i class="fa fa-money" aria-hidden="true"></i>
    <span class="price">100 000</span>
    <span class="money-type">créditos</span>
    <footer>
      <span class="real-price">
        R$ 100,00
      </span>
      <button class="buy">
        <a href="LINK_DA_COMPRA">Comprar</a>
      </button>
    </footer>
  </article>
 
  <!-- Item 2 -->
  <article class="item">
    <span class="price">100 000 créditos</span>
    <i class="fa fa-money" aria-hidden="true"></i>
    <span class="price">100 000</span>
    <span class="money-type">créditos</span>
    <footer>
      <span class="real-price">
        R$ 100,00
      </span>
      <button class="buy">
        <a href="LINK_DA_COMPRA">Comprar</a>
      </button>
    </footer>
  </article>
 
  <!-- Item 3 -->
  <article class="item">
    <span class="price">100 000 créditos</span>
    <i class="fa fa-money" aria-hidden="true"></i>
    <span class="price">100 000</span>
    <span class="money-type">créditos</span>
    <footer>
      <span class="real-price">
        R$ 100,00
      </span>
      <button class="buy">
        <a href="LINK_DA_COMPRA">Comprar</a>
      </button>
    </footer>
  </article>
 
  <!-- Item 4 -->
  <article class="item">
    <span class="price">100 000 créditos</span>
    <i class="fa fa-money" aria-hidden="true"></i>
    <span class="price">100 000</span>
    <span class="money-type">créditos</span>
    <footer>
      <span class="real-price">
        R$ 100,00
      </span>
      <button class="buy">
        <a href="LINK_DA_COMPRA">Comprar</a>
      </button>
    </footer>
  </article>
</div>

<!-- CSS BEGIN -->
<style type="text/css">
@import "http://fontawesome.io/assets/font-awesome/css/font-awesome.css";
@import "https://fonts.googleapis.com/css?family=Josefin+Sans:300,300i,400,400i,600,600i,700,700i";
 
* {
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
}

div.row {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-family: "Josefin Sans", sans-serif;
  font-size: 18px;
}
div.row article.item {
  width: 28%;
  background-color: #fff;
  border: solid 1px #197aff;
  margin: 60px 60px;
  padding: 20px;
  border-radius: 3px;
}
div.row article.item .price {
  display: block;
  text-align: center;
}
div.row article.item .fa.fa-money {
  color: #197aff;
  font-size: 120px;
  display: block;
  text-align: center;
}
div.row article.item .fa.fa-money + .price {
  font-size: 38px;
  font-weight: 300;
  color: #197aff;
}
div.row article.item .fa.fa-money + .price + .money-type {
  display: block;
  text-align: center;
  margin-top: -5px;
  font-size: 20px;
}
div.row article.item footer {
  display: block;
}
div.row article.item footer .real-price {
  text-align: left;
  font-weight: bold;
}
div.row article.item footer .buy {
  float: right;
  background-color: transparent;
  border: solid 1px #197aff;
  padding: 5px 10px;
  border-radius: 3px;
  font-size: 15px;
  -webkit-transition: all ease-in 200ms;
  transition: all ease-in 200ms;
}
div.row article.item footer .buy a {
  color: #333;
  text-decoration: none;
  font-weight: 300;
  -webkit-transition: all ease-in 200ms;
  transition: all ease-in 200ms;
}
div.row article.item footer .buy:hover {
  background-color: #197aff;
}
div.row article.item footer .buy:hover a {
  color: #fff;
}
</style>

Tchau
avatar

Luiz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 22/04/2016
Mensagens : 3566
Pontos Ativos : 4246

https://github.com/lffg/

Resolvido Re: Tabela com imagem e textos linkados (html)

Mensagem por PESS_dodo em 03/04/17, 02:05 pm

Continuo com o problema, quando salvo fica normal... ai o código se espalha e quando vizualiza novamente fica assim
Obs: É uma pagina html modo simples
avatar

PESS_dodo
Nível 9

Masculino
Inscrito dia : 16/02/2017
Mensagens : 170
Pontos Ativos : 293

http://adliferpg.forumeiros.com/forum https://www.facebook.com/advancedliferpg/?ref=bookmarks https://twitter.com/http://adliferpg.forumeiros.com/forum

Resolvido Re: Tabela com imagem e textos linkados (html)

Mensagem por Luiz em 03/04/17, 02:10 pm

Pensativo

Aí está o problema!
O senhor deve criar uma nova página no modo avançado, pois o modo simples não suporta o HTML muito bem. Muito feliz
Lembre-se de marcar a opção "Você deseja utilizar o início e o final da página do seu fórum" como "Não".

Tchau
avatar

Luiz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 22/04/2016
Mensagens : 3566
Pontos Ativos : 4246

https://github.com/lffg/

Resolvido Re: Tabela com imagem e textos linkados (html)

Mensagem por PESS_dodo em 03/04/17, 02:11 pm

Luiz~ escreveu:Pensativo

Aí está o problema!
O senhor deve criar uma nova página no modo avançado, pois o modo simples não suporta o HTML muito bem. Muito feliz
Lembre-se de marcar a opção "Você deseja utilizar o início e o final da página do seu fórum" como "Não".

Tchau

Tudo bem, e pra substituir a imagem ali?
avatar

PESS_dodo
Nível 9

Masculino
Inscrito dia : 16/02/2017
Mensagens : 170
Pontos Ativos : 293

http://adliferpg.forumeiros.com/forum https://www.facebook.com/advancedliferpg/?ref=bookmarks https://twitter.com/http://adliferpg.forumeiros.com/forum

Resolvido Re: Tabela com imagem e textos linkados (html)

Mensagem por Luiz em 03/04/17, 02:12 pm

Qual imagem?
Não há nenhuma imagem nesta página HTML. Suspeito...

Tchau
avatar

Luiz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 22/04/2016
Mensagens : 3566
Pontos Ativos : 4246

https://github.com/lffg/

Resolvido Re: Tabela com imagem e textos linkados (html)

Mensagem por PESS_dodo em 03/04/17, 02:16 pm

Luiz~ escreveu:Qual imagem?
Não há nenhuma imagem nesta página HTML. Suspeito...

Tchau

Tem como no lugar de azul colocar verde por exemplo? Esse negocio que parece uma "imagem"
http://icon-icons.com/icons2/550/PNG/512/business-color_money-coins_icon-icons.com_53446.png
estilo esse

Fico do mesmo jeito Luiz, oque mais poderia ser?
avatar

PESS_dodo
Nível 9

Masculino
Inscrito dia : 16/02/2017
Mensagens : 170
Pontos Ativos : 293

http://adliferpg.forumeiros.com/forum https://www.facebook.com/advancedliferpg/?ref=bookmarks https://twitter.com/http://adliferpg.forumeiros.com/forum

Resolvido Re: Tabela com imagem e textos linkados (html)

Mensagem por Luiz em 03/04/17, 02:18 pm

Olá,

Para mudar a cor, procure todos os trechos com
#197aff
no código, e altere todos para a cor que o senhor deseje.

Quanto ao bug, poderia me informar o endereço de sua página HTML?

Tchau
avatar

Luiz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 22/04/2016
Mensagens : 3566
Pontos Ativos : 4246

https://github.com/lffg/

Resolvido Re: Tabela com imagem e textos linkados (html)

Mensagem por PESS_dodo em 03/04/17, 02:21 pm

Luiz~ escreveu:Olá,

Para mudar a cor, procure todos os trechos com
#197aff
no código, e altere todos para a cor que o senhor deseje.

Quanto ao bug, poderia me informar o endereço de sua página HTML?

Tchau

Vamos la


http://i.imgur.com/hgTgg1z.png

Nessas duas opções, o que marco?

Vou editar e vejo se dar erro e te envio link
avatar

PESS_dodo
Nível 9

Masculino
Inscrito dia : 16/02/2017
Mensagens : 170
Pontos Ativos : 293

http://adliferpg.forumeiros.com/forum https://www.facebook.com/advancedliferpg/?ref=bookmarks https://twitter.com/http://adliferpg.forumeiros.com/forum

Resolvido Re: Tabela com imagem e textos linkados (html)

Mensagem por Luiz em 03/04/17, 02:25 pm

Olá,

Desculpe-me se me expressei mal. Envergonhado
Eu quero o endereço de URL da sua página HTML.

Por exemplo
http://www.blrpg.com.br/h1-
, entendeu?

No mais, as opções que o senhor mostrou nas imagens acima estão corretas... Estranho... Pensativo

Tchau
avatar

Luiz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 22/04/2016
Mensagens : 3566
Pontos Ativos : 4246

https://github.com/lffg/

Resolvido Re: Tabela com imagem e textos linkados (html)

Mensagem por PESS_dodo em 03/04/17, 02:30 pm

Luiz~ escreveu:Olá,

Desculpe-me se me expressei mal. Envergonhado
Eu quero o endereço de URL da sua página HTML.

Por exemplo
http://www.blrpg.com.br/h1-
, entendeu?

No mais, as opções que o senhor mostrou nas imagens acima estão corretas... Estranho... Pensativo

Tchau

http://www.blrpg.com.br/h12-loja-virar-conta-premium
Agora esta ok, mais veja a imagem a baixo


http://i.imgur.com/0keIE2B.png

Ele fico todo espalhado, viu? Creio eu se eu salvar novamente, se desfaz

A velho fico muito bom, quero ajeitar isso rsrs

@Edit

Sou muito censurado Luiz, iriamos passar o dia todo e nunca iriamos conseguir... Desculpas rs
Quando é pra editar, tem 2 opções : Editar modo simples e modo avançado, eu colocava pra criar em modo avançado mais na hora de editar selecionava o modo simples. o modo avançado, quase nao da pra ver.... por isso rsrs

Desculpas !
avatar

PESS_dodo
Nível 9

Masculino
Inscrito dia : 16/02/2017
Mensagens : 170
Pontos Ativos : 293

http://adliferpg.forumeiros.com/forum https://www.facebook.com/advancedliferpg/?ref=bookmarks https://twitter.com/http://adliferpg.forumeiros.com/forum

Resolvido Re: Tabela com imagem e textos linkados (html)

Mensagem por Luiz em 03/04/17, 04:12 pm

Sem problemas. Feliz

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

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

Luiz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 22/04/2016
Mensagens : 3566
Pontos Ativos : 4246

https://github.com/lffg/

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