Как откорректировать колонку с данными?

Как выровнять по центру (подогнать под аватарку и кнопку оn/off) выделенные красным пункты (ник, ранг и картинку звания)?

Помогите решить вопрос.

Посмотрите здесь:

@Ринкате пишет:
В CSS:

Код:

.pun .user-ident .username {position: relative;}

В шаблоне viewtopic_body
Находим:

Код:

{postrow.displayed.POSTER_NAME}

Код:

{postrow.displayed.POSTER_AVATAR}<br /> {postrow.displayed.POSTER_RANK_NEW}{postrow.displayed.RANK_IMAGE}

Выделяем их кодом <center></center>
Должно получиться вот так:

Код:

<h4 class="username"><center>{postrow.displayed.POSTER_NAME}</center></h4>
     <div class="user-basic-info"><center>
     {postrow.displayed.POSTER_AVATAR}<br /> {postrow.displayed.POSTER_RANK_NEW}{postrow.displayed.RANK_IMAGE}</center>
     </div>

Сохраняем  

Спасибо, только у меня пропали кнопки online & offline...


Как их восстановить?

Может так?

Обрамление профиля [punBB]

Открываем шаблон viewtopic_body (Показ темы)
Находим фрагмент

Код:

<div class="user-ident">
                        <h4 class="username">{postrow.displayed.POSTER_NAME}</h4>
                        <div class="user-basic-info">
                           {postrow.displayed.POSTER_AVATAR}<br />
                           {postrow.displayed.POSTER_RANK_NEW}{postrow.displayed.RANK_IMAGE}
                        </div>
                     </div>
                     <div class="user-info">
                        {postrow.displayed.ONLINE_IMG}
                        <!-- BEGIN profile_field -->
                        {postrow.displayed.profile_field.LABEL}{postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
                        <!-- END profile_field -->
                        {postrow.displayed.POSTER_RPG}
                     </div>
                  </div>

и заменяем его на

Код:

<div class="profill"><div class="user-ident">
                              <div class="user-nik">{postrow.displayed.POSTER_NAME}
                                                </div>
               <div class="user-basic-info">
      {postrow.displayed.POSTER_AVATAR}
                              <br />
   {postrow.displayed.POSTER_RANK_NEW}  {postrow.displayed.RANK_IMAGE}
                  </div>
               </div>
            <div class="user-info">
               {postrow.displayed.ONLINE_IMG}
                  <!-- BEGIN profile_field -->
         {postrow.displayed.profile_field.LABEL}
                                 {postrow.displayed.profile_field.CONTENT}
                                                                        {postrow.displayed.profile_field.SEPARATOR}
               <!-- END profile_field -->
               {postrow.displayed.POSTER_RPG}
                     </div>
                  </div>
                                                                     </div>

Сохраняем и опубликовываем шаблон.
Далее идём в CSS и ставим код

Код:

/*Обрамление профиля*/
.profill{
background-color: #цвет; /*фон в рамке в обычном состоянии*/
border: 2px double #B1FD91; /*толщина, стиль и цвет рамки*/
margin:1px 4px 7px 4px;
padding:3px;
font-size:1em; /*размер шрифта в профиле*/
text-align:center;
}
.profill:hover {
background-color: #цвет; /*фон в рамке при наведении курсора*/
}
.user-nik {
font-size:14px; /*размер ника над аватаром*/
padding-bottom:5px;
}

Пример:

---

Вариант №2

Открываем шаблон viewtopic_body (Показ темы)
Находим фрагмент

Код:

<div class="user-ident">
                        <h4 class="username">{postrow.displayed.POSTER_NAME}</h4>
                        <div class="user-basic-info">
                           {postrow.displayed.POSTER_AVATAR}

                           {postrow.displayed.POSTER_RANK_NEW}{postrow.displayed.RANK_IMAGE}
                        </div>
                     </div>
                     <div class="user-info">
                        {postrow.displayed.ONLINE_IMG}
                        <!-- BEGIN profile_field -->
                        {postrow.displayed.profile_field.LABEL}{postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
                        <!-- END profile_field -->
                        {postrow.displayed.POSTER_RPG}
                     </div>
                  </div>

и заменяем его на

Код:

<div class="profill"><div class="user-ident">
                              <div class="user-nik">{postrow.displayed.POSTER_NAME}
                                                </div></div></div>
               <div class="profill_2"><div class="user-basic-info">
      {postrow.displayed.POSTER_AVATAR}</div></div>
                            
<div class="profill_3">
   {postrow.displayed.POSTER_RANK_NEW}  {postrow.displayed.RANK_IMAGE}
                  </div>
              
            <div class="user-info">
               {postrow.displayed.ONLINE_IMG}
                  <!-- BEGIN profile_field -->
         {postrow.displayed.profile_field.LABEL}
                                {postrow.displayed.profile_field.CONTENT}
                                                                        {postrow.displayed.profile_field.SEPARATOR}
               <!-- END profile_field -->
               {postrow.displayed.POSTER_RPG}
                     </div>
                  </div>

Сохраняем и опубликовываем шаблон.
Далее идём в CSS и ставим код

Код:

/*Обрамление профиля*/
.profill,.profill_2,.profill_3,.user-info{
background-color: #87CEFA; /*фон в рамке в обычном состоянии*/
border: 2px solid #4682B4; /*толщина, стиль и цвет рамки*/
margin:1px 4px 2px 4px;
padding:3px;
font-size:1em; /*размер шрифта в профиле*/
text-align:center;
}
.profill:hover,.profill_2:hover,.profill_3:hover,.user-info:hover {
background-color: #AFEEEE; /*фон в рамке при наведении курсора*/
}
.user-nik {
font-size:14px; /*размер ника над аватаром*/
}

Пример:

---

Вариант №3

Открываем шаблон viewtopic_body (Показ темы)
Находим фрагмент

Код:

<div class="user-ident">
                        <h4 class="username">{postrow.displayed.POSTER_NAME}</h4>
                        <div class="user-basic-info">
                           {postrow.displayed.POSTER_AVATAR}

                           {postrow.displayed.POSTER_RANK_NEW}{postrow.displayed.RANK_IMAGE}
                        </div>
                     </div>
                     <div class="user-info">
                        {postrow.displayed.ONLINE_IMG}
                        <!-- BEGIN profile_field -->
                        {postrow.displayed.profile_field.LABEL}{postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
                        <!-- END profile_field -->
                        {postrow.displayed.POSTER_RPG}
                     </div>
                  </div>

и заменяем его на

Код:

<div class="profill"><div class="user-ident">
                              <div class="user-nik">{postrow.displayed.POSTER_NAME}
                                                </div></div></div>
               <div class="profill_2"><div class="user-basic-info">
      {postrow.displayed.POSTER_AVATAR}</div></div>
                            
<div class="profill_3">
   {postrow.displayed.POSTER_RANK_NEW}  {postrow.displayed.RANK_IMAGE}
                  </div>
              
            <div class="user-info">
               {postrow.displayed.ONLINE_IMG}
</div>
                  <!-- BEGIN profile_field -->
         <div class="profill_4">{postrow.displayed.profile_field.LABEL}
                                {postrow.displayed.profile_field.CONTENT}
                                                                        {postrow.displayed.profile_field.SEPARATOR}</div>
               <!-- END profile_field -->
               {postrow.displayed.POSTER_RPG}
                     </div>

Сохраняем и опубликовываем шаблон.
Далее идём в CSS и ставим код

Код:

/*Обрамление профиля*/
.profill,.profill_2,.profill_3,.profill_4,.user-info{
background-color: #87CEFA; /*фон в рамке в обычном состоянии*/
border: 2px solid #4682B4; /*толщина, стиль и цвет рамки*/
margin:1px 4px 1px 4px;
padding:5px;
font-size:1em; /*размер шрифта в профиле*/
text-align:center;
}
.profill:hover,.profill_2:hover,.profill_3:hover,.profill_4:hover,.user-info:hover {
background-color: #AFEEEE; /*фон в рамке при наведении курсора*/
}
.user-nik {
font-size:14px; /*размер ника над аватаром*/
}

Пример:



P.S. В кодах что ставятся в CSS можете сделать корректировку, убрать фон и рамку.

Домовой, ух ты РЕСПЕКТ!!! А есть какая-то версия, которая для моего форума по дизайну подойдет?
Вот мой форум: http://resident-evil.forum2x2.com/

Это всё для версии форума punBB, то есть как у Вас.
Меняйте фон и цвет рамки в кодах CSS под стиль своего форума.
Там всё подписано

Эти варианты мне не подходят... Когда их ставлю - у меня форум вообще с ума сходит... Все непонятно где отображаться начинает...

Значит не правильно ставите.
Проверено
http://www.moyforum.biz/t2270-topic

С этим вопросом разобрался! Спасибо ВСЕМ!!!