Personalizar Boxes DIV

3 participantes

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

Tópico resolvido Personalizar Boxes DIV

Mensagem por ShadouS 02.06.18 4:06

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/
ShadouS

ShadouS
*

Membro desde : 12/02/2018
Mensagens : 40
Pontos : 73

http://www.worldofwitchcraft.forumeiros.com

Ir para o topo Ir para baixo

Admineiro

Tópico resolvido Re: Personalizar Boxes DIV

Mensagem por tikky 02.06.18 14:04

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,
tikky

tikky
Admineiro
Admineiro

Membro desde : 13/01/2017
Mensagens : 7962
Pontos : 9217

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar Boxes DIV

Mensagem por ShadouS 02.06.18 14:37

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.
ShadouS

ShadouS
*

Membro desde : 12/02/2018
Mensagens : 40
Pontos : 73

http://www.worldofwitchcraft.forumeiros.com

Ir para o topo Ir para baixo

Admineiro
  • 0

Tópico resolvido Re: Personalizar Boxes DIV

Mensagem por tikky 02.06.18 14:49

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>
tikky

tikky
Admineiro
Admineiro

Membro desde : 13/01/2017
Mensagens : 7962
Pontos : 9217

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar Boxes DIV

Mensagem por ShadouS 02.06.18 15:05

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 :/
ShadouS

ShadouS
*

Membro desde : 12/02/2018
Mensagens : 40
Pontos : 73

http://www.worldofwitchcraft.forumeiros.com

Ir para o topo Ir para baixo

Admineiro

Tópico resolvido Re: Personalizar Boxes DIV

Mensagem por tikky 02.06.18 15:13

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

tikky
Admineiro
Admineiro

Membro desde : 13/01/2017
Mensagens : 7962
Pontos : 9217

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar Boxes DIV

Mensagem por ShadouS 02.06.18 15:15

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

ShadouS
*

Membro desde : 12/02/2018
Mensagens : 40
Pontos : 73

http://www.worldofwitchcraft.forumeiros.com

Ir para o topo Ir para baixo

Admineiro
  • 0

Tópico resolvido Re: Personalizar Boxes DIV

Mensagem por tikky 02.06.18 18:14

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;
}
tikky

tikky
Admineiro
Admineiro

Membro desde : 13/01/2017
Mensagens : 7962
Pontos : 9217

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar Boxes DIV

Mensagem por ShadouS 03.06.18 7:41

Funcionou! Obrigado !!

Irei personalizar o resto, realmente muito obrigado Muito feliz


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

ShadouS
*

Membro desde : 12/02/2018
Mensagens : 40
Pontos : 73

http://www.worldofwitchcraft.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar Boxes DIV

Mensagem por ShadouS 07.06.18 23:22

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

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

ShadouS
*

Membro desde : 12/02/2018
Mensagens : 40
Pontos : 73

http://www.worldofwitchcraft.forumeiros.com

Ir para o topo Ir para baixo

Principal Contribuidor

Tópico resolvido Re: Personalizar Boxes DIV

Mensagem por Shek 11.06.18 1:50

Tópico resolvido


Movido para "Questões resolvidas".
Shek

Shek
Principal Contribuidor
Principal Contribuidor

Membro desde : 11/04/2009
Mensagens : 19006
Pontos : 22969

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