<style type="text/css">
#pun-announcement .container {padding-top: 1em}
</style>

<table style="width: 100%; height: 400px; text-align: center; border: 1px solid #999;" cellpadding="0" cellspacing="0">
<tr height="40"><td colspan="3" style="border: 1px solid #999;"><marquee>


бегущая строка бегущая строка бегущая строка


</marquee></td></tr>
<tr><td width="30%" style="border: 1px solid #999;" rowspan="2"><div style="width: 100%; height: 200px; overflow: auto;">


Объявления


</div></td><td width="40%" style="border: 1px solid #999;" rowspan="2">


<img width="100%" src="http://uploads.ru/i/y/N/V/yNV00.jpg">


</td><td height="100" width="30%" style="border: 1px solid #999;" valign="top">


Погода


</td></tr>
<tr height="100"><td style="border: 1px solid #999;" valign="top">


Время


</td></tr>
<tr height="160" valign="top"><td style="border: 1px solid #999;">


Администрация


</td><td style="border: 1px solid #999;">


Полезные ссылки


</td><td style="border: 1px solid #999;">


События


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

<style type="text/css">
#pun-announcement h2 {display: none}
#pun-announcement .container {padding-top: 2em}
</style>

<table style="width: 100%; height: 200px; text-align: center;" border="0" cellspacing="0" cellpadding="3">

<tr><td width="65%" style="border: 2px #BCA67A groove;">

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

</td><td width="35%" style="border: 2px #BCA67A groove;"><div style="width: 100%; height: 200px; overflow: auto;">

<p><b>время</b>:
<p><b>дата</b>:
<p><b>погода</b>:

</div></td></tr>
<tr><td colspan="2">

<style>
.splLink {width: 140px; height: 30px; border: 0px solid #FFD700; text-align: center;}
.splCont {height: auto; width: 210px; padding: 5px; z-index: 1000; margin-top: 5px; border: 2px solid #D2B48C; font-size: 12px; font-family: Lucida Sans Unicode; text-align: center; background-color: transparent !important; background-image: url("http://savepic.ru/2408258.png"); 
    border-radius:15px;
    -webkit-border-radius:15px;
    -khtml-border-radius:15px;
    -moz-border-radius:15px;
    -o-border-radius:15px;

     box-shadow:0px 5px 14px #8B6C52;
    -webkit-box-shadow:0px 5px 14px #8B6C52;
    -khtml-box-shadow:0px 5px 14px #8B6C52;
    -moz-box-shadow:0px 5px 14px #8B6C52;
    }
.splCont:first-letter {
    font-family: "Times New Roman", Times, serif;
    font-size: 200% !important;
    color: red;
   }
</style>

<center><table style="width: 90%;" border="0" cellspacing="0" cellpadding="0">
<tr align="center">

<td><DIV><div class=splLink><img src="картинка первой кнопки"></div>
<DIV style="DISPLAY: none; position: absolute;" class=splCont>

Контент первой кнопки

</DIV></DIV></td>

<td><DIV><div class=splLink><img src="второй"></div>
<DIV style="DISPLAY: none; position: absolute;" class=splCont>

Контент второй кнопки

</DIV></DIV></td>

<td><DIV><div class=splLink><img src="третьей"></div>
<DIV style="DISPLAY: none; position: absolute;" class=splCont>

Контент третьей кнопки

</DIV></DIV></td>

<td><DIV><div class=splLink><img src="четвертой"></div>
<DIV style="DISPLAY: none; position: absolute;" class=splCont>

Контент четвертой кнопки

</DIV></DIV></td>

</tr>
</table></center>

<!--Спойлер - контейнер-->
<script type="text/javascript"> 
  $(document).ready(function(){
    $('.splLink').click(function(){
      $(this).parent().children('div.splCont').toggle('normal');
      return false;
    });
  });
</script>

</td></tr>

</table>