Personalizar Boxes DIV

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

Atendido / Resolvido Personalizar Boxes DIV

Mensagem por ShadouS em 02/06/18, 12:06 am

Detalhes da questão


Endereço do fórum: http://worldofwitchcraft.forumeiros.com
Versão do fórum: ModernBB

Descrição


Olá pessoas Muito feliz


Estou com um sério problema de montagem de boxes dentro de um quadro, no qual quero colocar informações e imagens... Bom,  primeiramente vou mostrar o que estou tentando fazer:
>> Imagem original(base): https://i.imgur.com/YGBbFFJ.png

Este seria o que eu pretendo montar, ignorando as informações em si, meu foco é a organização de cada box e posição das informações... Mas estou bem confuso em como montar ao menos um esqueleto idêntico (apenas bordas(border), tamanhos(width/height) e posição das boxes(position?), poderiam me ajudar a criar este "esqueleto" daquele conjunto de quadros da imagem? Quero fazer muito parecido, mas só queria que me ajudassem a montar o "esqueleto" da imagem. 

O código que estou usando é este:
Código:
<div class="quadro">1
<div class="simbolo">1</div>
<div class="titulo"><h2 class="nome1"><b>Nome do item</b></h2></div>
<div class="level">1</div>
<div class="type">1</div>
<div class="parametros"><h3 class="nome2"><b>Parâmetros</b></h3>
<span class="lock">1</span> Equipando </br>
<span class="durability">2</span> 100 &nbsp;&nbsp;&nbsp; <span class="speed">3</span> 2.2 </div>
<div class="1bonus">1</div>
<div class="2bonus">1</div>
<div class="3bonus">1</div>
<div class="4bonus">1</div>
<div class="crystal">1</div>
<div class="rune">1</div>
</div>
<script/css>
</script>

Cada boxe com um nome de classe para ser personalizada cada uma no meu CSS, então cada vez que eu repetir o código HTML em outros lugares do fórum, iria se repetir a aparência também automaticamente. 

Aí quando eu quiser diferenciar, as informações, eu simplesmente coloco um CSS junto ao código na postagem. Nas classes "lock", "durability" e "speed" são os ícones representados na imagem original, mas deixem os números que coloquei até eu conseguir as imagens (Neste caso não alterem este detalhe), e sobre o quadro que envolta todos os quadros menores, espaçamento interno de 10px, o quadro parâmetros é sem borda. Ok?

Enfim, só queria ajuda pra montar o esqueleto dos quadros da imagem Feliz
O resto, é só eu dar aparência ^--^
Aqui uma montagem simples que fiz por cima da imagem original: 
>> Link: https://i.imgur.com/e7oBSr1.png
(No original não aparece um quadro ao lado do nome do item, está em roxo na original, mas se conseguirem colocar o quadrinho ao lado, fico agradecido!)


Aguardo respostas! O/
avatar

ShadouS
Nível 5

Masculino
Inscrito dia : 12/02/2018
Mensagens : 38
Pontos Ativos : 69

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

Atendido / Resolvido Re: Personalizar Boxes DIV

Mensagem por Pedxz em 02/06/18, 10:04 am

Olá @ShadouS,
veja se é isto que você quer:
Código:
<style>
  #quadro {
  padding: 1.4em;
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
}
  #quadro > div {
    position: relative;
    display: block;
    background-color: #f0f0f0;
    margin-bottom: .75rem;
    border: 1px solid #e5e5e5;
    border-radius: .25rem;
    width: 30%;
    padding: 1rem;
  }
  #quadro .requi {
    overflow-x: auto;
    overflow-y: hidden;
    display: flex;
    -ms-overflow-style: none;
    overflow: -moz-scrollbars-none;
    max-height: 70%;
    max-width: 65%;
  }
  #quadro .bonu, #quadro .enca {
    overflow-x: auto;
    overflow-y: hidden;
    display: flex;
    -ms-overflow-style: none;
    overflow: -moz-scrollbars-none;
    max-height: 70%;
  }
 #quadro .para {
    top: 11px;
    right: 35px;
    position: absolute;
  }
  #quadro .para p:first-of-type {
      margin-top: 1.7em;
  }
  #quadro span {
    font-weight: 700;
    position: absolute;
}
  #quadro img {
    max-width: 48px;
    width: 48px;
    height: 48px;
    position: relative;
    margin-top: 1.7em;
}
  #quadro *::-webkit-scrollbar {
    background-color: #f5faff;
  }
  #quadro *::-webkit-scrollbar-thumb {
    background-color: #f8442e;
}
</style>

<div id="quadro">
 <div>
  <div class="requi">
    <span>Requisitos:</span>
    <img src="http://i.imgur.com/QdLwYB0.png" />
    <img src="http://i.imgur.com/QdLwYB0.png" />
    <img src="http://i.imgur.com/QdLwYB0.png" />
  </div>
    <div class="bonu">
    <span>Bonûs:</span>
    <img src="http://i.imgur.com/QdLwYB0.png" />
    <img src="http://i.imgur.com/QdLwYB0.png" />
    <img src="http://i.imgur.com/QdLwYB0.png" />
    <img src="http://i.imgur.com/QdLwYB0.png" />
  </div>
    <div class="enca">
    <span>Encantamentos:</span>
    <img src="http://i.imgur.com/QdLwYB0.png" />
    <img src="http://i.imgur.com/QdLwYB0.png" />
    <img src="http://i.imgur.com/QdLwYB0.png" />
  </div>
  <div class="para">
    <span>Parâmentos:</span>
      <p>1 nenhum</p>
      <p>
        <i>2 100</i>
        <i>3 2.0</i>
      </p>
  </div>
</div>
</div>

Atenciosamente,
avatar

Pedxz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 13/01/2017
Mensagens : 1783
Pontos Ativos : 2298

Ver perfil do usuário https://ajuda.forumeiros.com

Atendido / Resolvido Re: Personalizar Boxes DIV

Mensagem por ShadouS em 02/06/18, 10:37 am

Não resultou no que eu queria, além do mais, as div que fez tão sem a borda que eu pedi.
E ficou com os box um embaixo do outro também  huh


Olhe de novo a minha montagem gráfica, a cor laranja seriam as bordas de cada box:
>> https://i.imgur.com/e7oBSr1.png
(Os textos dentro dos box seriam o nome das classes)

Consegue fazer igual?
E não use imagens, apenas o que mencionei... Bordas, altura, largura e posição.
avatar

ShadouS
Nível 5

Masculino
Inscrito dia : 12/02/2018
Mensagens : 38
Pontos Ativos : 69

Ver perfil do usuário http://www.worldofwitchcraft.forumeiros.com
  • 0

Atendido / Resolvido Re: Personalizar Boxes DIV

Mensagem por Pedxz em 02/06/18, 10:49 am

E ficou com os box um embaixo do outro também
Não é assim que você queria? https://image.ibb.co/bH0yay/image.png

Código:
<style>
  #quadro {
  padding: 1.4em;
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
}
  #quadro > div {
    position: relative;
    display: block;
    background-color: #fafafa;
    margin-bottom: .75rem;
    border: 2px solid orange;
    width: 30%;
    padding: 1rem;
  }
  #quadro .requi {
    overflow-x: auto;
    overflow-y: hidden;
    display: flex;
    -ms-overflow-style: none;
    overflow: -moz-scrollbars-none;
    max-height: 70%;
    max-width: 65%;
  }
  #quadro .bonu, #quadro .enca {
    overflow-x: auto;
    overflow-y: hidden;
    display: flex;
    -ms-overflow-style: none;
    overflow: -moz-scrollbars-none;
    max-height: 70%;
  }
 #quadro .para {
    top: 11px;
    right: 35px;
    position: absolute;
    border: 1px solid orange;
    width: 30%;
    padding: .25rem;
  }
  #quadro .para p:first-of-type {
      margin-top: 1.7em;
  }
  #quadro span {
    font-weight: 700;
    position: absolute;
}
  #quadro img {
    border: 1px solid orange;
    margin-left: .25rem;
    max-width: 48px;
    width: 48px;
    height: 48px;
    position: relative;
    margin-top: 1.7em;
}
  #quadro *::-webkit-scrollbar {
    background-color: #f5faff;
  }
  #quadro *::-webkit-scrollbar-thumb {
    background-color: #f8442e;
}
</style>
<div id="quadro">
 <div>
  <div class="requi">
    <span>Requisitos:</span>
    <img src="http://i.imgur.com/QdLwYB0.png" />
    <img src="http://i.imgur.com/QdLwYB0.png" />
    <img src="http://i.imgur.com/QdLwYB0.png" />
  </div>
    <div class="bonu">
    <span>Bonûs:</span>
    <img src="http://i.imgur.com/QdLwYB0.png" />
    <img src="http://i.imgur.com/QdLwYB0.png" />
    <img src="http://i.imgur.com/QdLwYB0.png" />
    <img src="http://i.imgur.com/QdLwYB0.png" />
  </div>
    <div class="enca">
    <span>Encantamentos:</span>
    <img src="http://i.imgur.com/QdLwYB0.png" />
    <img src="http://i.imgur.com/QdLwYB0.png" />
    <img src="http://i.imgur.com/QdLwYB0.png" />
  </div>
  <div class="para">
    <span>Parâmentos:</span>
      <p>1 nenhum</p>
      <p>
        <i>2 100</i>
        <i>3 2.0</i>
      </p>
  </div>
</div>
</div>
avatar

Pedxz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 13/01/2017
Mensagens : 1783
Pontos Ativos : 2298

Ver perfil do usuário https://ajuda.forumeiros.com

Atendido / Resolvido Re: Personalizar Boxes DIV

Mensagem por ShadouS em 02/06/18, 11:05 am

No meu fórum deve estar bugado, pois não fica como está em sua imagem huh

Olha: https://i.imgur.com/HhI5lX4.png

Esta com html ativado no fórum :/
avatar

ShadouS
Nível 5

Masculino
Inscrito dia : 12/02/2018
Mensagens : 38
Pontos Ativos : 69

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

Atendido / Resolvido Re: Personalizar Boxes DIV

Mensagem por Pedxz em 02/06/18, 11:13 am

Poderia liberar o registo ou passa-me uma conta teste, sem acesso ao painel de controle, via mp?
Para testar?
avatar

Pedxz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 13/01/2017
Mensagens : 1783
Pontos Ativos : 2298

Ver perfil do usuário https://ajuda.forumeiros.com

Atendido / Resolvido Re: Personalizar Boxes DIV

Mensagem por ShadouS em 02/06/18, 11:15 am

Claro, irei passar aqui. Muito feliz
Um momento...
avatar

ShadouS
Nível 5

Masculino
Inscrito dia : 12/02/2018
Mensagens : 38
Pontos Ativos : 69

Ver perfil do usuário http://www.worldofwitchcraft.forumeiros.com
  • 0

Atendido / Resolvido Re: Personalizar Boxes DIV

Mensagem por Pedxz em 02/06/18, 02:14 pm

Tente somente adicionar isto no seu CSS

Código:
#quadro {
 padding: 1.4em;
 display: flex;
 flex-wrap: wrap;
 box-sizing: border-box;
}
 #quadro > div {
   position: relative;
   display: block;
   background-color: #fafafa;
   margin-bottom: .75rem;
   border: 2px solid orange;
   width: 30%;
   padding: 1rem;
 }
 #quadro .requi {
   overflow-x: auto;
   overflow-y: hidden;
   display: flex;
   -ms-overflow-style: none;
   overflow: -moz-scrollbars-none;
   max-height: 70%;
   max-width: 65%;
 }
 #quadro .bonu, #quadro .enca {
   overflow-x: auto;
   overflow-y: hidden;
   display: flex;
   -ms-overflow-style: none;
   overflow: -moz-scrollbars-none;
   max-height: 70%;
 }
#quadro .para {
   top: 11px;
   right: 35px;
   position: absolute;
   border: 1px solid orange;
   width: 30%;
   padding: .25rem;
 }
 #quadro .para p:first-of-type {
     margin-top: 1.7em;
 }
 #quadro span {
   font-weight: 700;
   position: absolute;
}
 #quadro img {
   border: 1px solid orange;
   margin-left: .25rem;
   max-width: 48px;
   width: 48px;
   height: 48px;
   position: relative;
   margin-top: 1.7em;
}
 #quadro *::-webkit-scrollbar {
   background-color: #f5faff;
 }
 #quadro *::-webkit-scrollbar-thumb {
   background-color: #f8442e;
}
avatar

Pedxz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 13/01/2017
Mensagens : 1783
Pontos Ativos : 2298

Ver perfil do usuário https://ajuda.forumeiros.com

Atendido / Resolvido Re: Personalizar Boxes DIV

Mensagem por ShadouS em 03/06/18, 03:41 am

Funcionou! Obrigado !!

Irei personalizar o resto, realmente muito obrigado Muito feliz


Podem fechar o tópico, resouvido Positivo
@Fraise
avatar

ShadouS
Nível 5

Masculino
Inscrito dia : 12/02/2018
Mensagens : 38
Pontos Ativos : 69

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

Atendido / Resolvido Re: Personalizar Boxes DIV

Mensagem por ShadouS em 07/06/18, 07:22 pm

Podem fechar...
@Fraise @Shek @Fou-Lu @Sennior

(Sinto falta do botão Resolvido no fórum Hmmm  )
avatar

ShadouS
Nível 5

Masculino
Inscrito dia : 12/02/2018
Mensagens : 38
Pontos Ativos : 69

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

Atendido / Resolvido Re: Personalizar Boxes DIV

Mensagem por Shek em 10/06/18, 09:50 pm

Tópico resolvido


Movido para "Questões resolvidas".


Bem-vindo ao Fórum dos Fóruns!
Leia as regras do Fórum dos Fóruns e as regras do setor de suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Se sua questão foi resolvida, marque-a clicando no botão resolvido para organizar o fórum.
Shek Crowley
avatar

Shek
Admineiro
Admineiro

Masculino
Inscrito dia : 11/04/2009
Mensagens : 18010
Pontos Ativos : 22068

Ver perfil do usuário http://www.shiftactif.com https://go.topicit.net/ZosT/61pMt1mPsG https://www.facebook.com/ShiftActif https://twitter.com/ShiftActif

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


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