html-верх

Код:

<style type="text/css">
/*-------------------------------------------------
Настройки объявления 
-------------------------------------------------*/

/* Убираем слово "объявление" */
#pun-announcement h2 {display: none}
#pun-announcement .container {padding: 1.5em 1em 0em 0em}

/* Основные настройки таблицы */
#kotiki {
  width: 100%;
  padding-bottom: 2px;
  border: none;
  border-radius: 5px;
  background-color: #
  }

/* Настройки ячеек таблицы */
#kotiki td {
  margin: 0;
  padding: 0;
  text-align: center;
  vertical-align: top
  }

/* Заголовки и кнопки */
#kotiki h3, #menu span {
  margin: 2px 0 4px 0;
  font: bold normal 14px 'Trebuchet Ms' sans-serif;
  text-align: center
  }

/* Аватары АМС */
#ams-faces img {
  width: 50px;
  height: 70px;
  margin: 5px
  }

/* Остальные аватары */
.faces img {
  width: 40px;
  height: 40px;
  margin: 5px
  }

/* Настройка таблицы с переменным контентом */
#menu {margin: 0 0 10px 0}

#menu span {
  display: block;
  height: 14px;
  margin: 0;
  padding: 2px 0 6px 0
  }

/* Цвет активной кнопки */
#menu span.tabactive {color: #361c02}

#submenu {
  width: 100%;
  padding: 0px
  }

.submenutext {
  display: none;
  text-align: center;
  min-height: 175px;
  height: auto
  }

/* Блоки, поддерживающие прокрутку */
.scroll_out_my {
  width: 100%;
  overflow-y: auto
  }
/*-------------------------------------------------
Конец настроек объявления 
-------------------------------------------------*/
</style>

Сама таблица

Код:

<table id="kotey">
 <tbody>
  <tr>
   </td>
   <td style="width: 3%;"><!-- Пустая ячейка-интервал --></td>
   <td style="width: 22%;">
  <center><b>Погода</b></center>
<center>Утром несколько туманно, после будет солнечно. После проливного дождя земля сырая и мерзкая, что сильно мешает хождению. С деревьев срываются капли росы и с легким звоном падают на землю или голову прохожего. Вполне нормальная погода для весенней поры года. </center>
  <center><b>Соцсети</b></center>
<center><a href="----"><img src="http://savepic.su/4314193.png" title=""/></a>

<a href="https://vk.com/legendsstore"><img src="http://savepic.su/4266078.png" title="Мы ВКонтакте"/></a>

<a href="----"><img src="http://savepic.su/4322385.png" title="Мы в Твиттере"/></a>

<a href="----"><img src="http://savepic.su/4309073.png" title="Мы в Фейсбуке"/></a></center>
   </td>
   <td style="width: 50%;">

<!-- Основная таблица -->
<table id="kotiki">
 <tbody>
  <tr>

   </td>
   <td style="width: 1%;"><!-- Пустая ячейка-интервал --></td>

   <td style="width: 50%;">
<!-- Вложенная таблица с переменным контентом -->
<table style="width: 100%;" border="0" cellpadding="0" cellspacing="0">
 <tbody>
  <tr>
   <td>
<div id="menu">
<!-- Таблица кнопок -->
<table style="width: 100%; border: none;" cellpadding="0" cellspacing="0">
 <tbody>
  <tr>
   <td style="width: 20%;"><span alt="#sm1" style="cursor: pointer;">Новости</span></td>
   <td style="width: 20%;"><span alt="#sm2" style="cursor: pointer;">В игре</span></td>
   <td style="width: 20%;"><span alt="#sm3" style="cursor: pointer;">Лучшие</span></td>
   <td style="width: 20%;"><span alt="#sm4" style="cursor: pointer;">Реклама</span></td>
   <td style="width: 20%;"><span alt="#sm5" style="cursor: pointer;">Навигация</span></td>
  </tr>
 </tbody>
</table>
<!-- Конец таблицы кнопок -->
    </div>
   </td>
  </tr>
  <tr>
   <td id="MenuTxT" align="center" valign="top">
    <div id="submenu" align="center"> 
     <div id="sm1" class="submenutext" style="display: block;">
<!-- Контент первой вкладки -->
<table style="width: 100%; border: none;" cellpadding="0" cellspacing="0">
 <tbody>
  <tr>
   <td style="width: 50%;" rowspan="2">

       <h3>Новости</h3>

      <div class="scroll_out_my" style="width: 100%; height: 150px;">

       <b>03.03.14</b>Сайт ожидает своих участников. Мы ждем Вас с теплым пледом и горячей чашечкой чая. Так же обновлён дизайн, ждем комментариев во флуде. 
<br>
~  ~  ~
<br>
<br><b>22.02.14</b>
Здравствуйте дорогие пользователи. Я 
знаю, что никого это не заинтересует,
 но все таки. Прощайте! Я ухожу с ролевой.
 Мне надоели все сайты-ролевые и т.д. 
<i>Волна</i>
<br>~   ~   ~</br>

<br><b>14.02.14</b>Поздравляю всех с
днем всех влюблённых и желаю каждому
найти свою вторую половинку. Даже если
не провести день с любимым, то в кругу 
друзей. Удачного праздника, котейки!
<br>~   ~   ~</br>
</br>
<br><b>01.30.14</b>Сайт обновлен, поставлен новый дизайн
и в основном все заполнено. Для вас мы
активно заполняем тему с акциями и 
делаем сайт как можно удобнее. Очень 
требуются предводитель, глашатай и
целитель в племя Солнца. Воители,
оруженосцы и котята с королевами нужны
во все племена. 
<br>~   ~   ~</br>

      </div>

   </td>
   <td style="width: 50%; height: 87px;">
      
      <h3>О нас</h3>

♣ <b>Тематика</b>: Коты-Воители
<br>
♣ <b>Тип игры</b>: Локационная
<br>
♣ <b>Место игры</b>: Новый  мир
<br>
♣ <b>Время</b>: Альтернативное 

    </td>
   </tr>
   <tr>
    <td style="height: 88px;">

      <h3>Требуются</h3>

       (список нужных)

   </td>
  </tr>
 </tbody>
</table>
<!-- Конец первой вкладки -->     
     </div>
     <div id="sm2" class="submenutext">
<!-- Контент второй вкладки -->
<table style="width: 100%; border: none;" cellpadding="0" cellspacing="0">
 <tbody>
  <tr>
   <td style="width: 50%;">

      

      <h3>Племя Солнца</h3>
<div class="scroll_out_my" style="height: 87px;">
      Всё довольно гладко и спокойно. На территории было найдено свежий след и метки лисицы. По запаху молода и одна. Сейчас племя разыскивает её, но не сильно беспокоятся, ибо след был далеко от лагеря и близко к тайге. 

      </div>
<i>Нападений нет~</i>
   </td>
   <td style="width: 50%;">

      <h3>Одиночки</h3>

      (Информация)

   </td>
  </tr>
  <tr>
   <td>

      <div class="scroll_out_my" style="height: 88px;">

      <h3>Племя Тумана</h3>

      (информация)

      </div>

   </td>
   <td>

      <h3>Зв. Предки</h3>

      (Информация)

   </td>
  </tr>
 </tbody>
</table>
<!-- Конец второй вкладки -->
     </div>
     <div id="sm3" class="submenutext">
<!-- Контент третьей вкладки -->
<table style="width: 100%; border: none;" cellpadding="0" cellspacing="0">
 <tbody>
  <tr>
   <td style="width: 50%;">

      <h3>Активисты месяца</h3>

      <div class="faces">

       <img src="http://savepic.su/4475023.png" title="Ник_1"/>
       <img src="http://savepic.su/4475023.png" title="Ник_2"/>
       <img src="http://savepic.su/4475023.png" title="Ник_3"/>
      </div>

   </td>
   <td style="width: 50%;">

       <h3>Коллекционеры месяца</h3>

      <div class="faces">

       <img src="http://savepic.su/4475023.png" title="Ник_1"/>
       <img src="http://savepic.su/4475023.png" title="Ник_2"/>
       <img src="http://savepic.su/4475023.png" title="Ник_3"/>

      </div>

   </td>
  </tr>
  <tr>
   <td>

      <h3>Патрульные месяца</h3>

      <div class="faces">

       <img src="http://savepic.su/4475023.png" title="Ник_1"/>
       <img src="http://savepic.su/4475023.png" title="Ник_2"/>
       <img src="http://savepic.su/4475023.png" title="Ник_3"/>

      </div>

   </td>
   <td>

       <h3>5 вечеров с</h3>

       <a href="ссылка_на_тему"><img style="width: 40px; height: 40px; margin: 5px; border: 1px solid #;" src="http://savepic.su/4475023.png" title="Ник"/></a>

   </td>
  </tr>
  <tr>
   <td>

      <h3>Пара месяца</h3>

      <div class="faces">

       <img src="http://savepic.su/4475023.png" title="Ник_1"/>
       <img src="http://savepic.su/4475023.png" title="Ник_2"/>

      </div>

   </td>
   <td>

       <h3>Пост месяца</h3>

       <a href="ссылка_на_пост"><img style="width: 40px; height: 40px; margin: 5px; border: 1px solid #;" src="http://savepic.su/4475023.png" title="Ник"/></a>

   </td>
  </tr>
 </tbody>
</table>
<!-- Конец третьей вкладки -->
     </div>
     <div id="sm4" class="submenutext">
<!-- Контент четвертой вкладки -->

      <h3>Каталог</h3>

  <a href="http://gifovina.ru/-/eM16XN9c2fHI8oE9dxcvS0x3"><img src="http://gifovina.ru/gif/ddd968938a0eebd27e188a6bbbe80801" width="88" height="31" /></a>
<a href="http://zephyr.f-rpg.ru/"><img src="http://s8.uploads.ru/q3zX5.png" alt="Зефир, помощь ролевым" title="Зефир, помощь ролевым" /></a>

      <h3>Партнёры</h3>

---

<!-- Конец четвертой вкладки -->
     </div>
     <div id="sm5" class="submenutext">
<!-- Контент пятой вкладки -->
<div id="tab-2" class="tab-content">
<table style="width: 100%; border: none;" cellpadding="0" cellspacing="0">
 <tbody>
  <tr>
   <td style="width: 50%;" rowspan="2">

       <h3>Гостевая навигация</h3>

<center><div class="nav"> 
<a href="http://timelife.0pk.ru/viewtopic.php?id=5">Гостевая</a> 
<a href="http://timelife.0pk.ru/viewtopic.php?id=6">Акции</a> 
<a href="http://timelife.0pk.ru/viewtopic.php?id=142">Акции от АМС</a> 
<a href="http://timelife.0pk.ru/viewtopic.php?id=9">О племенах</a> 
<a href="http://timelife.0pk.ru/viewtopic.php?id=154">Система игры</a> 
<a href="http://timelife.0pk.ru/viewtopic.php?id=145#p1618">Партнерство</a>
<a href="----">Список имен</a>
</div></center>


   </td>
   <td style="width: 50%; height: 87px;">
      
      <h3>Игровая навигация</h3>

<center><div class="nav"> 
<a href="ссыль">action о.о we need u</a> 
<a href="http://timelife.0pk.ru/viewtopic.php?id=148">Список племени Солнца</a> 
<a href="http://timelife.0pk.ru/viewtopic.php?id=149">Список племени Тумана</a> 
<a href="http://timelife.0pk.ru/viewtopic.php?id=155#p1730">Список внеплеменных</a> 
<a href="http://timelife.0pk.ru/viewtopic.php?id=158">Список патрулей Солнца</a> 
<a href="http://timelife.0pk.ru/viewtopic.php?id=159">Список патрулей Тумана</a> 
<a href="http://timelife.0pk.ru/viewtopic.php?id=20">Поля профиля</a> 
</div></center>

    </td>
   </tr>
 <tbody>
</table>
<!-- Конец пятой вкладки -->
     </div>
    </div>
   </td>
  </tr>
 </tbody>
</table>
<!-- Конец вложенной таблицы с переменным контентом -->
   </td>
   <td style="width: 1%;"><!-- Пустая ячейка-интервал --></td>

  </tr>
 </tbody>
</table>
<!-- Конец основной таблицы -->
   </td>

   <td style="width: 25%;">
<!-- Колонка АМС и Партнеров -->

  <center><b>АМС-состав</b></center>

    <center><div id="ams-faces">
     <a href="http://timelife.0pk.ru/profile.php?id=3"><img src="http://savepic.su/4315603.png" title="Волна"/></a>
     <a href="http://timelife.0pk.ru/profile.php?id=2"><img src="http://savepic.su/4311507.png" title="Луч"/></a>
     <a href="http://timelife.0pk.ru/profile.php?id=4"><img src="http://savepic.su/4316627.png" title="Тень"/></a>
     <br/>
     <a href="http://timelife.0pk.ru/profile.php?id=22"><img src="http://savepic.su/4314579.png" title="Янтарник"/></a>
     <a href="http://timelife.0pk.ru/profile.php?id=29"><img src="http://savepic.su/4270547.png" title="Стужа"/></a></center>
    </div>

   <center> <b>VIP-партнёры</b> </center>

  <center>  (баннеры)</center>

<!-- Конец колонки АМС и Партнеров -->
   </td>
    <!-- Конец блока ссылок справа -->
  </td>
  </tr>
  <tr>
 </tbody>
</table>

html-низ

Код:

<!-- Скрипт переключения вкладок в таблице -->
<script type="text/javascript">
$(document).ready(function() {
$("td.#MenuTxT div.submenutext").hide();
$("#menu span:first").addClass("tabactive").show();
$("td.#MenuTxT div.submenutext:first").show();
$("div.#menu span").click(function() {
    $("div.#menu span").removeClass("tabactive");
    $(this).addClass("tabactive");
    $("td.#MenuTxT div.submenutext").hide();
    var activeDiv = $(this).attr("alt");
    $("div."+activeDiv).fadeIn();
    return false; });
});
</script>

Новости

В игре

Активисты

Реклама

Навигация