Personalizar Boxes DIV
3 participantes
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre HTML e BBCode
Página 1 de 1 • Compartilhe
Personalizar Boxes DIV
Detalhes da questão
Endereço do fórum: http://worldofwitchcraft.forumeiros.com
Versão do fórum: ModernBB
Descrição
Olá pessoas
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 <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
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/
Re: Personalizar Boxes DIV
Olá @ShadouS,
veja se é isto que você quer:
Atenciosamente,
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- Admineiro
- Membro desde : 13/01/2017
Mensagens : 7966
Pontos : 9225
Re: Personalizar Boxes DIV
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
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.
E ficou com os box um embaixo do outro também
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.
Re: Personalizar Boxes DIV
Não é assim que você queria? https://image.ibb.co/bH0yay/image.pngE ficou com os box um embaixo do outro também
- 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- Admineiro
- Membro desde : 13/01/2017
Mensagens : 7966
Pontos : 9225
Re: Personalizar Boxes DIV
No meu fórum deve estar bugado, pois não fica como está em sua imagem
Olha: https://i.imgur.com/HhI5lX4.png
Esta com html ativado no fórum :/
Olha: https://i.imgur.com/HhI5lX4.png
Esta com html ativado no fórum :/
Re: Personalizar Boxes DIV
Poderia liberar o registo ou passa-me uma conta teste, sem acesso ao painel de controle, via mp?
Para testar?
Para testar?
tikky- Admineiro
- Membro desde : 13/01/2017
Mensagens : 7966
Pontos : 9225
Re: Personalizar Boxes DIV
Claro, irei passar aqui.
Um momento...
Um momento...
Re: Personalizar Boxes DIV
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- Admineiro
- Membro desde : 13/01/2017
Mensagens : 7966
Pontos : 9225
Re: Personalizar Boxes DIV
Funcionou! Obrigado !!
Irei personalizar o resto, realmente muito obrigado
Podem fechar o tópico, resouvido
@Fraise
Irei personalizar o resto, realmente muito obrigado
Podem fechar o tópico, resouvido
@Fraise
Re: Personalizar Boxes DIV
Tópico resolvidoMovido para "Questões resolvidas". |
Tópicos semelhantes
» Problema com Boxes em hover
» Como adicionar boxes nas mensagens?
» Personalizar pop-up
» Personalizar o pop-up
» Personalizar pop-up
» Como adicionar boxes nas mensagens?
» Personalizar pop-up
» Personalizar o pop-up
» Personalizar pop-up
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre HTML e BBCode
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos