Webboard

wersja skryptu MyBB:Najnowsza
adres forum: www.Project-RP.pl
na czym polega problem (screen, opis, komunikaty): A więc tak, mam taki kod w szablonie index_stats

Kod:
<div class="statystyki" style="margin-top: 0px;" original-title="">

<span class="smalltext">

<center>  <ul>

<li>Total Posts: <div class="statystykitlo">{$stats['numposts']}</div></li>

<li>Total Threads: <div class="statystykitlo">{$stats['numthreads']} </div></li>

<li>Members: <div class="statystykitlo">{$stats['numusers']}</div></li>

<li>Most Online: <div class="statystykitlo">{$mostonline['numusers']}</div></li>

<li>Newest Member: <div class="statystykitlo">{$stats['lastusername']}</div> </li>

  </ul></center>

</span>

  </div>

oraz do niego css w globalu

Kod:
.statystyki {

        color: #000;

        margin: auto;

        padding: 0;

        height: 38px;

}

.statystyki ul {

      list-style: none;

      display: inline-block;

      margin: 0 0 0 25px;

      padding: 0;

      text-align: center;

      height: 60px;

      line-height: 30px;

}

.statystyki li {

      list-style: none;

      display: inline-block;

      margin: 0 0 0 25px;

      padding: 0;

      text-align: center;

      height: 60px;

      line-height: 30px;

}

.menu ul a:link, .menu ul a:visited {

        padding: 0px;

          color: #c2c5d3;

          text-shadow: 0px 0px 0px #1f2027;

}

.menu ul a:hover, .menu ul a:active {

        color: #fff;

        text-shadow: 0px 0px 0px #1f2027;

}

.statystykitlo {

  background: rgba(0, 0, 0, 0.8);

  border-radius: 10px;

  color: #fff;

  height: 25px;

  font-size: 12px;

  text-shadow: none;

}

Chodzi mi teraz o to, aby to tło dopasowywało się do ilości znaków. Np jeśli jest cyfa 2 to jest mniejsze to tło niż napis "jakiśtamgracz". A i jeszcze chce, aby się centrowało względem wysokości.

help!

odświeżam

Zamień swój kod na:

Kod:
<div class="statystyki" style="margin-top: 0px;" original-title="">

<span class="smalltext">

<center>

<ul>

<li><p>Total Posts:</p> <div class="statystykitlo">{$stats['numposts']}</div></li>

<li><p>Total Threads</p>: <div class="statystykitlo">{$stats['numthreads']} </div></li>

<li><p>Members:</p> <div class="statystykitlo">{$stats['numusers']}</div></li>

<li><p>Most Online:</p> <div class="statystykitlo">{$mostonline['numusers']}</div></li>

<li><p>Newest Member:</p> <div class="statystykitlo">{$stats['lastusername']}</div> </li>

</ul>

</center>

</span>

 </div>

I następnie zamień klasę statystykitlo na:

Kod:
.statystykitlo {

  background: rgba(0, 0, 0, 0.8);

  border-radius: 10px;

  color: #fff;

  height: 25px;

  font-size: 12px;

  text-shadow: none;

display:inline-block;

padding:0 10px;

}

.statystyki p {

margin:0;

}

Poprzednio klasa dziedziczyła blokowe wyświetlanie elementu (display:block), czyli na całą szerokość diva - dlatego zmieniłem typ na inline-block. W ten sposób tło nie jest już rozciągane ale wyświetla się w jednej linii ze wszystkimi elementami. Żeby przenieść je na dół dodałem znaczniki <p> w kodzie, które odpowiadają za wyświetlanie elementów w linii. Znaczniki automatycznie dodają margines, więc również usunąłem je za pomocą CSS. Powinno działać.

Wolder

Wolder

Adrian