[Answered] How can I make statistics like in the picture?

Zeus wrote:[link="/t521-statistics#4050"]Details: How can I make statistics like in the picture?
Screenshot:
Forum Address: http://games-online.forumz.ro/
Forum Version: punbb

Code:

<!-- BEGIN disable_viewonline -->
********************
<!-- END disable_viewonline -->

Code:

<div class="BoardStats">

        <!-- BEGIN disable_viewonline -->
        <script>
          $(document).ready(function(){
        var rdtOn = $('.rdtOn strong').html();
        var lastUser = $('.lastUser strong').html();
        var totalUser = $('.totalUser strong').html();
        var totalPost = $('.totalPost strong').html();
       
       
        $('ul.statsPers').prepend('
        <li><span>'+totalPost+'</span> Total Posts</li>
        <li><span>'+totalUser+'</span> Total Members</li>
        <li><span>'+lastUser+'</span> Newest Member</li>
        <li><span>'+rdtOn+'</span> Most users ever online</li>
        ');
       
        });
        </script>
        <div id="pun-info" class="main">
           
          <div class="main-head">
             
              <h2 class="page-title">
                 
                <center>
                                  <b><a href="/viewonline"><font color="white">Statistic Board</font> </a></b>
                </center>
                 
              </h2>
             
          </div>
           
          <div style="display: block;" class="main-content">
             
              <div id="forum_statistics">
                 
                <div id="board-stats">
                   
                    <center>
                       
                      <h2>
                          Information
                      </h2>
                                  </center>
                     
        <br>
                                                <div id='board_stats'>
              <dl>
                <dt>Total Posts:</dt><dd><div id='board_statistics'> <span class="FORUMCOUNTPOST">{FORUMCOUNTPOST}</span></div>  </dd>   
                  <br> <dt>Total Topics:</dt><dd><div id='board_statistics'> <span class="FORUMCOUNTOPIC">{FORUMCOUNTOPIC}</span></div>    </dd> 
              <br> <dt>Total Members: </dt><dd><div id='board_statistics'><span class='FORUMCOUNTUSER'>{FORUMCOUNTUSER}</span></div>          </dd>                                       
            <br> <dt>Newest Member </dt><dd><div id='board_statistics'><span class='FORUMLASTUSERLINK'>{FORUMLASTUSERLINK}</span></div>      </dd>                                           
                  </dl>
          </div>
                   
                </div>
                <div class="rightStats">
                   
                    <div class="starsItem">
                       
                      <center>
                         
                          <p class="starsTitle">
                             
                          </p>
                         
                          <div class="leftStats">
                              <img src="http://i58.servimg.com/u/f58/17/06/15/51/110.png" />
                          </div>
                         
                          <p class="starsTitle">
                            Online Users
                          </p>
                         
                      </center>
                       
                      <p>
                         
                      </p>
                       
                      <div class="leftStats">
                         
                      </div>
                       
                      <p>
                          <span class="starsItem_TOTAL_USERS_ONLINE">  {TOTAL_USERS_ONLINE}</span>
        <p>  <span class="desc lighter blend_links"><b><i>{RECORD_USERS}</i></b> </span>       
          <br><br>
                <div class="etMiniAv">    {LOGGED_IN_USER_LIST} </div>
               
                {L_ONLINE_USERS}
            <br>{L_CONNECTED_MEMBERS}  </p>
                       
            <br><br/><br/><div style="text-align: center;">
          <span class="desc lighter blend_links"><b><i>Legend:</i></b> {GROUP_LEGEND}</span>
                   
                       
                    </div>
                   
                </div>
                 
              </div>
             
          </div>
           
        </div>
                     
        <style>#board-stats {
            border-left: 1px solid rgb(222, 222, 222);
            float: right;
            padding-left: 20px;
            width: 38%;
        }
        .rightStats {
            border-left: 1px solid rgb(207, 201, 201);
            margin: 5px 10px 5px 70px;
            min-height: 167px;
            padding-left: 10px;
            width: 90%;
        }
        #forum_statistics {
            background-color: rgb(255, 255, 255);
            border: 1px solid rgb(233, 233, 233);
            max-height: 500px;
            padding: 10px;
        }
        .starsTitle {
            font-family: helvetica,arial,sans-serif;
            font-weight: 700;
            margin-top: -8px !important;
            padding: 4px;
        }
        #board-stats h2 {
            clear: both;
            font-weight: bold;
        }
        .leftStats{float:left;margin-left:-75px;vertical-align:middle;margin-top:50px;}</style>
               
        <!-- END disable_viewonline -->
</div>