<style>	
#menu span {
padding: 7px 15px 7px; 
margin-right: 5px;
margin: 10px 0;
width: 100px;
text-decoration: none;
}
#menu .tabactive {
color: #2662DF;
background:#F9F1DD;
}

#submenu {
padding: 5px;
height: 200px;
text-align: center;
font-size: 12px;
width: 720px;
}

.submenutext {
display: none; 
height: 60px;
}
</style>

<script type="text/javascript">
$(document).ready(function() {
$("td.#MenuTxT div.submenutext").hide();
<!--$(".tabs span:first").addClass("active").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>
<div id=MyDivBlock></div>
<center><table style="width: 615px;">
 <tbody>
  <tr>
   <td>
    <div id="menu"> <b>
<span alt="#sm1" style="cursor: pointer;">Кнопка 1</span>
<span alt="#sm2" style="cursor: pointer;">Кнопка 2</span>
<span alt="#sm3" style="cursor: pointer;">Кнопка 3</span>
<span alt="#sm4" style="cursor: pointer;">555</span>
<span alt="#sm5" style="cursor: pointer;">ЧАТ</span>
           </b>
    </div>
   </td>
  </tr>
  <tr>
   <td id="MenuTxT"  align="center" valign="top">
    <div id="submenu" align="center"> 
     <div id="sm1" class="submenutext" style="display:block;">
<br/><br/>
Контент 1-й кнопки
</div>
     <div id="sm2" class="submenutext"><br /><br />

Контент 2-й кнопки
</div>
     <div id="sm3" class="submenutext"><br /><br />
Контент 3-й кнопки
</div>
     <div id="sm4" class="submenutext"><br /><br />
<div id=MyDivBlock><!-- 15 сообщений последних -->
<script src="/export.php?type=js&max=15" type="text/javascript"></script>
<script type="text/javascript">
var html='';
var ts = '';
var mo = '';
var hh = '';
var mm = '';
var i = 0;
for(i=0;i<content.length;i++) {
ts = new Date();
ts.setTime(1000*content[i][0]);
mo = ts.getMonth()+1;
if (mo<10) mo='0'+mo;
hh = ts.getHours();
mm = ts.getMinutes()+'';
if (mm<10) mm='0'+mm;
ts = ts.getDate()+'.'+mo+' '+hh+':'+mm;
html2="</tr></tbody></table></div>"
html1="<h2>Последние 15 сообщений форума</h2><div class=\"container\"><table style=\"font-size:12px!important;\" cellspacing=\"0\" width=100%><thead><tr><th scope=\"col\">Автор</th><th style='width: 250px!important;' scope=\"col\">Время</th><th scope=\"col\">Последнее сообщение</th></tr></thead><tbody class=\"hasicon\">"
html+='<tr><td style=\"color:#0067A9\"><b>'+content[i][1]+'</b></td><td class=\"tc2\">'+ts+'<td class=\"tcr\"><a href=\"'+content[i][2]+'\">'+content[i][3]+'</a><br /></td></tr>';
}

str=document.URL
//alert(html1+html+html2)
if(str.substring(str.lastIndexOf('/')+1)=="" || str.substring(str.lastIndexOf('/')+1)=="index.php"){


$("#pun-announcement div.html-box").prepend(html1+html+html2)
}
</script>
</div>
</div>
     <div id="sm5" class="submenutext"><br /><br />
<!-- BEGIN CBOX - www.cbox.ws - v001 -->
<div id="cboxdiv" style="text-align: center; line-height: 0">
<div><iframe frameborder="0" width="100%" height="155" src="http://www4.cbox.ws/box/?boxid=3100735&amp;boxtag=7264&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain" style="border:#DBE2ED 1px solid;" id="cboxmain"></iframe></div></br></br>

<div><iframe frameborder="0" width="100%" height="150" src="http://www4.cbox.ws/box/?boxid=3100735&amp;boxtag=7264&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform" style="border:#DBE2ED 1px solid;border-bottom:0px" id="cboxform"></iframe></div>
</div>
<!-- END CBOX -->
</div>

</div>
   </td>
</tr>
 </tbody>
</table></center>

<div id="pun-announcement" class="section">
	<h2><span>Объявление</span></h2>
	<div class="container">
<div class="html-box">
	<table width="100%" cellspacing="1" cellpadding="1" border="1">
    <tr>
    <td width="70%" align="center" height="60"><img src="http://forumupload.ru/uploads/000f/93/86/8-2-f.png"></td>
    <td width="70%" align="center" height="60">
    <!-- Кнопки меню -->
    <div id="menu"> <b>
    <span alt=#sm1 class="menuButton">Для гостей</span>
    <span alt=#sm2 class="menuButton">Администрация</span>
    <span alt=#sm3 class="menuButton">Ссылки</span>
    <span alt=#sm4 class="menuButton">Дата и время</span>
               </b>
        </div>
    </td>
    </tr>
    <tr>
    <td width="70%" align="center">
<img src="http://forumupload.ru/uploads/000f/93/86/8-1-f.jpg">
    </div>
    </div>
    </td>
    <td width="30%" align="center" id="MenuTxT"  valign="top" style="height: 300px;">
    <!-- Содержимое меню -->
    <div id="submenu" width="100%">
    <table width=100%><tr>
         <td id="sm1" class="submenutext">
    <div>
<hr>
<b>Объявление</b>
<hr>
<br>
Прием Слуг стандартных классов закрыт, но вы можете сделать Слугу нестандартного класса, проконсультировавшись с администрацией. Количество свободных слотов: 5 Также, мы нуждаемся в заменах на некоторые роли. В случае если вы, ознакомившись со списком, захотите взять одну из готовых ролей, просьба написать в ЛС администрации.
<br>
<br>
<hr>
<b>Баннеры и счетчики</b>
<hr>
<br>
<a href='http://palantir.in/?from=9717' target='_blank'><img src="http://palantir.in/count.php?id=9717&cid=counter2007_22.png" alt='Palantir' title="Каталог фэнтези сайтов Палантир" border=0 width="88px" height="31px"></a>
<a href="http://top.roleplay.ru/9567" target="top_">
<img src="http://img.rpgtop.su/rpgtop3.gif" alt="Рейтинг Ролевых Ресурсов" border="0" height="31" width="88">
</a>
<a href="http://anime-club.info/top100/in?id=8732" target="_blank"><img src="http://anime-club.info/top100/img/logo.gif?" alt="http://anime-club.info/top100/" border="0">
</a>
<br>
 </div>

    </td>
         <td id="sm2" class="submenutext">
    <div> 
<hr>
<b>Администрация</b>
<hr>
<br>
<a href="http://fatefinal.ru/profile.php?id=4"><img src="http://forumupload.ru/uploads/000a/db/01/51538-2.jpg"></a>
<a href="http://fatefinal.ru/profile.php?id=25"><img src="http://forumupload.ru/uploads/000a/db/01/51538-1.png"></a>
<br>
<br>
<hr>
<b>Модераторы</b>
<hr>
<br>
<a href="http://fatefinal.ru/profile.php?id=24"><img src="http://forumupload.ru/uploads/000a/db/01/51537-4.jpg"></a>
<a href="http://fatefinal.ru/profile.php?id=39"><img src="http://forumupload.ru/uploads/000a/db/01/51537-5.png"></a>
<a href="http://fatefinal.ru/profile.php?id=66"><img src="http://forumupload.ru/uploads/000a/db/01/51537-1.jpg"></a>
</div>
    </td>
         <td id="sm3" class="submenutext">
    <div>
<br>
<hr>
<b>Важные ссылки</b>
<hr>
<br>
<a href="http://fatefinal.ru/viewtopic.php?id=30">Правила игры </a><br>
<a href="http://fatefinal.ru/viewtopic.php?id=572">F.A.Q. </a><br>
<a href="http://fatefinal.ru/viewtopic.php?id=31">Сюжет </a><br>
<a href="http://fatefinal.ru/viewtopic.php?id=32">Список ролей </a><br>
<a href="http://fatefinal.ru/viewtopic.php?id=48">Кооперация</a><br>
<a href="http://fatefinal.ru/viewtopic.php?id=278">Игровое время</a><br>
<a href="http://fatefinal.ru/viewtopic.php?id=279">Активные квесты</a><br>
<a href="http://fatefinal.ru/viewtopic.php?id=237">Хроники игры</a><br>
<br>
<hr>
<b>Полезная информация</b>
<hr>
<br>
<a href="http://fatefinal.ru/viewtopic.php?id=533">Состояние мира </a><br>
<a href="http://fatefinal.ru/viewtopic.php?id=726">Командные Заклинания </a><br>
<a href="http://fatefinal.ru/viewtopic.php?id=275">Статусы Слуг</a><br>
<a href="http://fatefinal.ru/viewtopic.php?id=537">Уровни и классификация Героических Душ </a><br>
<a href="http://fatefinal.ru/viewtopic.php?id=26">Теория Волшебства</a><br>
</div>
    </td>
         <td id="sm4" class="submenutext">
    <div>
<hr>
<b>Игровые события</b>
<hr>
<br>
Исчезновение небоскреба не могло остаться незамеченным, и планы по эвакуации семимильным шагом идут к началу реализации. На улицах можно заметить повышающуюся активность военных, действующих пока во имя предотвращения паники среди гражданских.<br>
Другая же сторона города - та, что относится к Войне, все больше выходящей из-под контроля - планомерно готовится к наступлению ночи. Локальные стычки Слуг, немногочисленные и не слишком заметные на фоне иных событий днем грозят приобрести огромный размах, когда на Фуюки опустится ночь.<br>
<br>
<hr>
<b>Дата и время в игре</b>
<hr>
<br>
 день: третий<br>
 дата: 04.12.2006, понедельник<br>
 время: 15:00 - 19:00<br>
 погода: -4 - -6 градуса по Цельсию. Ветер усиливается, безоблачно.
</div>
    </td>
         
    </tr></table>
    </div>
    </td>
    </tr>

    </table>

    <script type="text/javascript">
    $(document).ready(function() {
    $("td.submenutext").hide();
    $("td.submenutext:first").show();
    $(".menuButton").click(function() {
        $(".menuButton").removeClass("tabactive");
        $(this).addClass("tabactive");
        var activeDiv = $(this).attr("alt");

        $("#submenu td.submenutext *").hide(0)
        $("#submenu td.submenutext").hide(0)
        $("td."+activeDiv).show(0)
        $("td."+activeDiv+" *").show(0)
        return false; });
    });
    </script>
</div>
	</div>
</div>

<table border="0" cellpadding="0" cellspacing="0"  width="100%" height="340">

<style type="text/css">
.scroll1 {
 overflow: hidden;
 overflow: auto;
 height: 340px;
 direction: rtl; 
}
.scroll2 {
 overflow: hidden;
 overflow: auto;
 height: 340px;
 direction: ltl; 
}
</style>

<tr>
<td width="50%" align="left">
<div class="scroll1">
Текст 1
</div>
</td>

<td width="50%" align="right">
<div class="scroll2">
Текст 2
</div>
</td>
</tr>
</table>