Верстка блока "Объявление"

Доброго дня.
Блок с объявлением на нашем форуме - http://amalirr.my-rpg.com/ оформлен следующим способом:

в таблице css:

В шаблоне overall_header:

Я хотела бы узнать, можно ли надписи "Объявление", "Важное", "Помощь", заменить на графический объект (кнопки), при этом не активные оставались бы полупрозрачными, а так же хочу узнать, как текстовое содержимое во вкладках "Важное" и "Помощь" преобразовать в столбики или табличку без границ. Иными словами, чтобы текст красиво ровно друг под другом находился, а не в беспорядочной кучке, как во вкладке "Помощь".

Жду советов специалистов и заранее благодарю.

ап

Попробуйте вместо слов вставить код картинки

Код:

<img src="ссылка на картинку" title="" border="0"/>

Например:

<div id="pw1-button" class="button"><img src="ссылка на картинку объявление" title="Объявление" border="0"/></div>

Получилось. А как добавить четвертую вкладку, я попыталась скопировать, изменив цыферку на 4, а у меня весь фон съехал(

Вот,что получилось(

В сss добавила везде после запятой #pw4-button

А в шаблоне скопировала вот это

Код:

<div id="pw3-button" class="button">ПОМОЩЬ</div><div class="clear">

И продублировала ниже, изменив на pw4, приставку <div class="clear"> у третьего удалила, четвертому добавила.
И далее, после 3го блока добавила

Код:

<div id="pw4" class="list">
Пока здесь пусто
      </div>

Подскажите, как надо сделать правильно? Чтоб все четыре кнопочки были на одном уровне и форум так не корежило.

Я не знаю этот туториал но сдаётся мне что там где то должны быть настройки расположения кнопок. Думаю что для добавления четвёртой кнопки надо менять отступы у кнопок.

Ладно, я по другому решила этот вопрос. Но теперь у меня появился новый.

в шаблоне вот что::

А на деле вот что:



Помогите пожалуйста, я не сильна в верстке.

Если кто то может помочь так же и с тем, чтобы грамотно добавить четвертую вкладку, буду очень благодарна, потому что самой мне не разобраться

Вопрос все еще актуален и нуждается в решении с Вашей помощью, спасибо.

CSS: https://gist.github.com/Algoll/1e1dc6db26d54305bd2d
HTML: https://gist.github.com/Algoll/d80d44b73fa8bbe7deb4

Не, не получилось. Вот что вышло:

На данный момент у меня стоит в цсс:

Код:


/*объявление*/
    #page-wrap {
      position:absolute;
      left:auto;
      background: transparent url('http://s018.radikal.ru/i509/1508/40/c8e258c6b9d0.png') center no-repeat;
      top:5px;
      width: 490px !important;
      height:303px !important;
      margin-left:50px;
      padding-top:60px;
    }

    #page-wrap {
      margin-bottom:20px;
    }

    .button {
      float:left;
    }

      /* оформление всего блока с содержимым */
    #nwcontent {
      color:#000;
      width:465px;
      font-size:12px;
      text-align: center;
      margin:0 auto;
      font-family:Arial;
    }

    #nwcontent a:hover {color: #000000}

        /* первый активный блок */
        #pw1 {
        display: block;
        }

        /* первая активная кнопка */
        #pw1-button {
        opacity: 1.0;
        color:#000;
        text-shadow: 1px 1px #efe3d2 5px, -1px -1px #efe3d2 5px, -1px 1px #efe3d2 5px, 1px -1px #efe3d2 5px;
        }

        /* все скрытые блоки после первого */
        #pw2, #pw3, #pw4, #pw5  {
        display: none;
        }

        /* все неактивные кнопки после первой */
        #pw2-button, #pw3-button {
        opacity: 0.5;
        }

        /* общее оформление всех блоков */
        #pw1, #pw2, #pw3 {
        padding: 10px;
        white-space: normal !important;
        }

    #pw1 ul, #pw2 ul, #pw3 ul {
    list-style-type: none;
    padding: 0px;
    }


    /* общее оформление всех кнопок */
#pw1-button, #pw2-button, #pw3-button {
      color: #4b2911;
      width:115px;
      font-family: Arial;
      padding: 5px;
      font-weight: bold;
      text-align:center !important;
      font-size:13px !important;
    }

    #pw1-button {
      margin-left: 50px;
    }

/*пиар-вход*/
#prbutton {
margin: 0 3px;
padding-left: 8px;
padding-right: 8px;
cursor: pointer;
background-color: #E3D0B6;
font-weight: 700;
color: #000000;
border: 1px solid #000000;
}

#prbutton:hover {
color: #4B8562;
border: 0,7px solid #4B8562;
}
#prbutton:hover {
color: #f05e28;
border: 1px solid #f05e28;
}
.ava {
text-align: center;
}
.prfav {
display:block;
position: relative;
width: 87px;
height: 13px;
background: transparent url("http://s018.radikal.ru/i505/1201/2b/9d71a7235cd6.png") center no-repeat;
margin: -7px auto 0;
}
.prfav img {
display:block;
position: relative;
}

В шаблоне:

Код:

 <div id="page-wrap">

      <div id="pw1-button" class="button"><img src="http://s45.radikal.ru/i109/1508/08/5778e12b73e6.png" title="" border="0"/></div>
      <div id="pw2-button" class="button"><img src="http://s019.radikal.ru/i603/1508/05/c5a62a846425.png" title="" border="0"/></div>
      <div id="pw3-button" class="button"><img src="http://s45.radikal.ru/i109/1508/1f/d4fb4e4c6106.png" title="" border="0"/></div><div class="clear">
      </div> <div id="nwcontent">
     
      <div id="pw1" class="list">
      <strong>ДОБРО ПОЖАЛОВАТЬ В АМАЛИРР!</strong> 
        <ul></ul>
                <center> 3053 год IV Эпохи. Месяц травен (май). Наполях между Мареном и Бризингером сошлись в битве два войска. В Айронхерте, потерял покой канцлер империи Рейм Натан узнавший о крушении своих планов и о гибели своего лучшего убийцы. По всем уголкам империи рассылаются его шпионы с требованием узнать хоть что-то о случившемся. Плохие новости приходя с Севера. В Серых Землях появилась нежить в количествах невиданных ранее.</center>
              </div>

      <div id="pw2" class="list">
   
<li style="text-align: justify;">
   <strong><a href="http://amalirr.my-rpg.com/f4-forum">ПРАВИЛА</a></strong><br />
</li>
       
<li style="text-align: justify;">
   <a href="http://amalirr.my-rpg.com/t870-topic">Летопись Амалирра</a>
</li>
       
<li style="text-align: justify;">
   <a href="http://amalirr.my-rpg.com/t8-topic">Карта мира</a>
</li>
       
<li style="text-align: justify;">
   <a href="http://amalirr.my-rpg.com/f207-forum">Расы и Народы</a>
</li>
<li style="text-align: justify;">
   <a href="http://amalirr.my-rpg.com/t304-topic">Религия</a>
</li>
<li style="text-align: justify;">
   <a href="http://amalirr.my-rpg.com/t305-topic">Магия</a>
</li>
<li style="text-align: justify;">
   <a href="http://amalirr.my-rpg.com/t69-topic">БЕСТИАРИЙ</a><br />
</li>
        </div>

      <div id="pw3" class="list">
    <ul>
      <div align="left">
       <br />                    
      <div>
            <table>     
            <tbody>       
               <tr>       
                  <td>
                     <ul>
                               
                        <li><a href="http://amalirr.my-rpg.com/register">Регистрация</a></li>
                               
                        <li><a href="http://amalirr.my-rpg.com/f5-forum">Анкетирование</a><br /></li>
                               
                        <li>
                               <a href="http://amalirr.my-rpg.com/t1-topic#1">Вопросы и ответы</a><br />   
                        </li>
                               
                        <li>
                               <a href="http://amalirr.my-rpg.com/t219-topic#3591">ЧаВо</a>   
                        </li>
                               
                        <li>
                               <a href="http://amalirr.my-rpg.com/t300-topic#5687">Администрация</a><br />   
                        </li>
                               
                        <li>
                               <a href="http://amalirr.my-rpg.com/f260-forum">Акционные персонажи</a>   
                        </li>
                               
                     </ul>
                            
                  </td>
                         
                  <td>
                            
                     <ul>
                               
                        <li>
                               <a href="http://amalirr.my-rpg.com/t541-topic">Приключения </a> 
                        </li><a href="http://amalirr.my-rpg.com/t541-topic"> </a>   
                        <li>
                           <a href="http://amalirr.my-rpg.com/t169-topic#1807">Поиск соигроков</a>   
                        </li>
                               
                        <li>
                               <a href="http://amalirr.my-rpg.com/t170-topic">Действующие квесты</a><br />   
                        </li>
                               
                        <li>
                               <a href="http://amalirr.my-rpg.com/t649-topic">Личные сюжеты игроков</a><br />   
                        </li>
                               
                        <li>
                               <a href="http://amalirr.my-rpg.com/t837-topic">АРЕНА</a><br />   
                        </li>
                               
                        <li>
                               <a href="http://amalirr.my-rpg.com/memberlist">Список пользователей</a>   
                        </li>
                               
                     </ul>
                            
                  </td>
                         
               </tr>
                      
            </tbody>
                   
         </table>       
      </div>
             
   </div>
</div>
    </ul></div>
    </div>
    </div>

И с этими данными объявление отображается вот так - http://amalirr.my-rpg.com просмотреть можно на сайте. А хотелось бы, чтобы текст под кнопкой "Важно" и "Помощь" были центрированны и находились выше к кнопкам.

Вверх

В общем, я добилась, чего хотела, но немного иными методами, однако у меня встал вопрос.
В шаблоне у меня стоит:

Код:

 <div id="page-wrap">

      <div id="pw1-button" class="button"><img src="http://s45.radikal.ru/i109/1508/08/5778e12b73e6.png" title="" border="0"/></div>
      <div id="pw2-button" class="button"><img src="http://s019.radikal.ru/i603/1508/05/c5a62a846425.png" title="" border="0"/></div>
      <div id="pw3-button" class="button"><img src="http://s45.radikal.ru/i109/1508/1f/d4fb4e4c6106.png" title="" border="0"/></div><div class="clear">
      </div> <div id="nwcontent">
      
      <div id="pw1" class="list">
      <strong>ДОБРО ПОЖАЛОВАТЬ В АМАЛИРР!</strong>  
        
                <center> 3053 год IV Эпохи. Месяц травен (май). На полях между Мареном и Бризингером сошлись в битве два войска. В Айронхерте покой потерял канцлер империи Рейм Натан, узнавший о крушении своих планов и о гибели своего лучшего убийцы. По всем уголкам империи рассылаются его шпионы с требованием узнать хоть что-то о случившемся. Плохие новости приходят с Севера. В Серых Землях появилась нежить в количествах невиданных ранее.</center>
              </div>

      <div id="pw2" class="list">
  
<div align="center">
   <table>
      <tbody><tr><td><li style="text-align: justify;">
<strong><a href="http://amalirr.my-rpg.com/f4-forum">ПРАВИЛА</a></strong><br /></li>
                  <li style="text-align: justify;"><a href="http://amalirr.my-rpg.com/t870-topic">Летопись Амалирра</a></li>        
      <li style="text-align: justify;"><a href="http://amalirr.my-rpg.com/t8-topic">Карта мира</a></li>
                  <li style="text-align: justify;"><a href="http://amalirr.my-rpg.com/f207-forum">Расы и Народы</a></li>
                  <li style="text-align: justify;"><a href="http://amalirr.my-rpg.com/t304-topic">Религия</a></li>
                  <li style="text-align: justify;"><a href="http://amalirr.my-rpg.com/t305-topic">Магия</a></li>
                  <li style="text-align: justify;"><a href="http://amalirr.my-rpg.com/t69-topic">БЕСТИАРИЙ</a></li></td></tr>
      </tbody></table></div>
        </div>
      <div id="pw3" class="list">
<div align="center">
<table><tbody><tr><td><ul><li><a href="http://amalirr.my-rpg.com/register">Регистрация</a></li>
  <li><a href="http://amalirr.my-rpg.com/f259-forum">Анкетирование</a></li>
  <li><a href="http://amalirr.my-rpg.com/f260-forum">Акционные персонажи</a></li>
  <li><a href="http://amalirr.my-rpg.com/t169-topic#1807">Поиск соигроков</a></li>
  <li><a href="http://amalirr.my-rpg.com/t170-topic#1811">Сюжетные приключения</a></li></ul></td>
  <td> </td>
  <td><ul type="disc"><li><a href="http://amalirr.my-rpg.com/t541-topic#16321">Квесты</a></li>
    <li><a href="http://amalirr.my-rpg.com/t649-topic#26403">Личные сюжетные квесты</a></li>
    <li><a href="http://amalirr.my-rpg.com/t837-topic#34205">АРЕНА</a></li>
    <li><a href="http://amalirr.my-rpg.com/t300-topic#5687">Администрация</a></li>
    <li><a href="http://amalirr.my-rpg.com/memberlist">Пользователи</a></li></ul></td></tr></tbody></table>
</div>
        </div>

    
     </div>
    </div>

Только почему то, в третьем блоке маркировка не отображается, хотя коды проставлены верно. В чем может быть проблема, подскажите, пожалуйста, хотя бы это?

Визуально все выглядит так:
 
ссылка на форум - http://amalirr.my-rpg.com/

Придумала альтернативное решение. Закрывайте тему.