Estatísticas tortas

Detalhes da questão

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

Descrição

Eu encontrei um tutorial estes dias e resolvi testar dando este resultado como estatística. Mas tenho um problema : Não consigo as estatísticas do post, os Onlines e os 24hrs um ao lado do outro. Poderiam me ajudar?

Necessitaria ficar assim : ESTATÍSTICAS DOS POSTS / ONLINES / 24 HRS
                                    GRUPOSGRUPOSGRUPOSGRUPOSGRUPOSGRUPO

Código:

/* estadisticas */
 #let-b2b {
    border-top: 1px solid #f3f3f3;
    color: #1c1c1c;
    font-family: montserrat;
    font-size: 20px;
    font-style: normal;
    font-variant: normal;
    font-weight: bold;
    letter-spacing: 1px;
    line-height: 30px;
    padding-right: 10px;
    text-align: right;
    text-transform: uppercase;
}
#let-b2b t {
color: #d8da22;
}
.Saturn {
    width: 920px;
    padding: 10px;
    height: 350px;
    margin: 20px;
    background: #000;
}
.Meteor {
    width: 200px;
    padding: 10px;
    margin: 20px;
    background: #fcfcfc;
    border: 1px solid #ddd;
}

.Estats {
    background: #fcfcfc;
    display: block;
    text-align: center;
    font-size: 0;
    padding: 10px;
}

.Estats span.Est1 {
    font-size: 9px;
    font-family: calibri;
    letter-spacing: 1px;
}

.Estats strong {
    font-size: 12px;
    font-family: montserrat;
    text-transform: uppercase;
}

.Planets {
    width: 420x;
    padding: 10px;
    margin: 20px;
    border: 1px solid #ddd;
    background: #fcfcfc;
}
 /*grupos*/
#grup1, #grup2, #grup3, #grup4, #grup5, #grup6 {
outline: 1px solid #f3f3f3;
border: 5px solid #fcfcfc;
margin: 1px;
display: inline-block;
width: 62px;
height: 40px;
overflow: hidden;
margin-right: 3px;
margin-top: 3px;
}
 
#grup1 {background: #6b524e;}
#grup2 {background: #53002c;}
#grup3 {background: #d7bc2e;}
#grup4 {background: #86af77;}
#grup5 {background: #c76e1c;}
#grup6 {background: #8f3922;}
 
#g1, #g2, #g3, #g4, #g5, #g6 {
  background: #fff;
  height: 20px;
  line-height: 20px;
  width: 62px;
  font-family: verdana;
  font-size: 7px;
  text-transform: uppercase;
  text-align: center;
  color: #333;
  margin-top: 50px;
  -moz-transition: all .7s ease-in-out;
  -webkit-transition: all .7s ease-in-out;
  transition: all .7s ease-in-out;
}
 
#grup1:hover #g1, #grup2:hover #g2, #grup3:hover #g3, #grup4:hover #g4, #grup5:hover #g5, #grup6:hover #g6 {
  margin-top: 10px;
  -moz-transition: all .7s ease-in-out;
  -webkit-transition: all .7s ease-in-out;
  transition: all .7s ease-in-out;
}
 .Solar {
    background: #fcfcfc;
    width: 350px;
    height: 150px;
    padding: 10px;
    margin: 20px;
    border: 1px solid #ddd;
    text-align: justify;
    text-transform: uppercase;
    color : #000;
    font-size: 9px;
}
.Stars {
    background: #fcfcfc;
    width: 250px;
    padding: 10px;
    margin: 30px;
    border: 1px solid #ddd;
}

Muito obrigada!

Olá!

Eu fiz uns testes usando o CSS:

Código:

display: table;
    float: left;

Mas, não saiu como esperava... Mas, atingiu o que pediu. De qualquer forma, você poderia ceder o código HTML ou o tópico na qual seguiu este tutorial, por favor?

Até mais.

Código:

<!-- BEGIN disable_viewonline -->
 
<td><div class="Saturn"><div class="Meteor">

<div class="Estats"><span class="Est1">TOTAL DE POSTS DO FÓRUM</span><br />{TOTAL_POSTS}</div>
<div class="Estats"><span class="Est1">TOTAL DE USUARIOS REGISTRADOS</span><br />{TOTAL_USERS}</div>
<div class="Estats"><span class="Est1">NOSSO ÚLTIMO PLAYER É :</span><br />{NEWEST_USER}</div>

</div></td><td><div class="Planets"><a href="link del grupo"><div id="grup1"><div id="g1">ambientación</div></div></a>
      <a href="link del grupo"><div id="grup2"><div id="g2">sobreviviente</div></div></a>
      <a href="link del grupo"><div id="grup3"><div id="g3">infectado</div></div></a>
      <a href="link del grupo"><div id="grup4"><div id="g4">nomada</div></div></a>
      <a href="link del grupo"><div id="grup5"><div id="g5">el grupo</div></div></a>
      <a href="link del grupo"><div id="grup6"><div id="g6">inactivos</div></div></a></div></td>
<td><div class="Solar"><div id="let-b2b"><t>O</t>NLINE</div>{TOTAL_USERS_ONLINE}<br /></div></td>
  <td><div class="Stars"><div id="let-b2b"><t>2</t>4h</div>{L_CONNECTED_MEMBERS}</div></td>

</div></tr></tbody></table>
<div class="clear"></div>
<!-- END disable_viewonline -->

Utilizei este.

Bom dia!

Então... Eu fiz uma aplicação teste e o resultado funcionou: https://pages.shiftactif.com/?&id=4&title=estatisticas-t112098

O CSS está sendo aplicado em conjunto ao template? Tente colocar antes do código que me passou agora este novo CSS:

Código:

  <style type="text/css">
/* estadisticas */
 #let-b2b {
    border-top: 1px solid #f3f3f3;
    color: #1c1c1c;
    font-family: montserrat;
    font-size: 20px;
    font-style: normal;
    font-variant: normal;
    font-weight: bold;
    letter-spacing: 1px;
    line-height: 30px;
    padding-right: 10px;
    text-align: right;
    text-transform: uppercase;
}
#let-b2b t {
color: #d8da22;
}
.Saturn {
    width: 920px;
    padding: 10px;
    height: 350px;
    margin: 20px;
    background: #000;
}
.Meteor {
    width: 200px;
    padding: 10px;
    margin: 20px;
    background: #fcfcfc;
    border: 1px solid #ddd;
}
 
.Estats {
    background: #fcfcfc;
    display: block;
    text-align: center;
    font-size: 0;
    padding: 10px;
}
 
.Estats span.Est1 {
    font-size: 9px;
    font-family: calibri;
    letter-spacing: 1px;
}
 
.Estats strong {
    font-size: 12px;
    font-family: montserrat;
    text-transform: uppercase;
}
 
.Planets {
    width: 420x;
    padding: 10px;
    margin: 20px;
    border: 1px solid #ddd;
    background: #fcfcfc;
}
 /*grupos*/
#grup1, #grup2, #grup3, #grup4, #grup5, #grup6 {
outline: 1px solid #f3f3f3;
border: 5px solid #fcfcfc;
margin: 1px;
display: inline-block;
width: 62px;
height: 40px;
overflow: hidden;
margin-right: 3px;
margin-top: 3px;
}
 
#grup1 {background: #6b524e;}
#grup2 {background: #53002c;}
#grup3 {background: #d7bc2e;}
#grup4 {background: #86af77;}
#grup5 {background: #c76e1c;}
#grup6 {background: #8f3922;}
 
#g1, #g2, #g3, #g4, #g5, #g6 {
  background: #fff;
  height: 20px;
  line-height: 20px;
  width: 62px;
  font-family: verdana;
  font-size: 7px;
  text-transform: uppercase;
  text-align: center;
  color: #333;
  margin-top: 50px;
  -moz-transition: all .7s ease-in-out;
  -webkit-transition: all .7s ease-in-out;
  transition: all .7s ease-in-out;
}
 
#grup1:hover #g1, #grup2:hover #g2, #grup3:hover #g3, #grup4:hover #g4, #grup5:hover #g5, #grup6:hover #g6 {
  margin-top: 10px;
  -moz-transition: all .7s ease-in-out;
  -webkit-transition: all .7s ease-in-out;
  transition: all .7s ease-in-out;
}
 .Solar {
    background: #fcfcfc;
    width: 350px;
    height: 150px;
    padding: 10px;
    margin: 20px;
    border: 1px solid #ddd;
    text-align: justify;
    text-transform: uppercase;
    color : #000;
    font-size: 9px;
}
.Stars {
    background: #fcfcfc;
    width: 250px;
    padding: 10px;
    margin: 30px;
    border: 1px solid #ddd;
}
  </style>


Fica a mesma coisa. Eu estava tentando ajustar paddings para deixar as estatísticas umas ao lado das outras e a barra dos grupos logo abaixo, mas não consigo D:

Boa noite.

Acho que consegui... Faltava alguns elementos da tabela! Copie o código novamente se for isso, e substitua-o: https://pages.shiftactif.com/?&id=4&title=estatisticas-t112098