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

<center>Приветствие</center>
<br/>

<table style="width: 100%;" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="width: 50%;">

<!-- Cлайдер-->
<style type="text/css">
#slideshow {
margin:0 auto;
width:400px;
height:250px;
background:transparent;
position:relative;
}
#slideshow #slidesContainer {
  margin:0 auto;
  width:360px;
  height:250px;
  position:relative;
}
#slideshow #slidesContainer .slide {
  margin:0 auto;
  width:340px; /* На двадцать пикселев меньше чем ширина #slidesContainer */
  overflow-y:auto; /* поддержка прокрутки */
  height:250px;
  text-align: center;
}
.control {
  display:block;
  width:18px;
  height:40px;
  text-indent:-10000px;
  position:absolute;
  cursor: pointer;
  z-index:100;
}
#leftControl {
  top:105px;
  left:0;
  background:transparent url(http://uploads.ru/i/F/N/O/FNOgh.png) no-repeat 0 0;
}
#rightControl {
  top:105px;
  right:0;
  background:transparent url(http://uploads.ru/i/W/H/h/WHhYL.png) no-repeat 0 0;
}

</style>
<div id="slideshow">
    <div id="slidesContainer">
      <div class="slide">

<strong>Заголовок</strong>
<br/><br/>

текст - об игре

      </div>
<div class="slide">

<strong>Заголовок</strong>
<br/><br/>

<img style="max-width: 170px; max-height: 170px;" src="картинка">
<br/>
<br/>
тут что-то

      </div>
<div class="slide">

<strong>Заголовок</strong>
<br/><br/>

текст текст текст текст

      </div>
<div class="slide">

коды баннеров

      </div>
</div></div><!--End// Cлайдер-->

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

<table style="width: 100%;">
<tr><td style="height: 30px;" colspan="3" align="center">

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

</td></tr>
<tr>
<td style="width: 33%;"> 

<img style="width: 100px; height: 100px;" src="картинка">
<br/>
ник, еще текст

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

<img style="width: 100px; height: 100px;" src="картинка">
<br/>
ник, еще текст

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

<img style="width: 100px; height: 100px;" src="картинка">
<br/>
ник, еще текст

</td>
</tr>
<tr><td style="height: 30px;" colspan="3" align="center">

Модераторы

</td></tr>
<tr><td colspan="3">

<table style="width: 100%;">
<tr>
<td style="width: 20%;"> 

<img style="width: 50px; height: 50px;" src="картинка">

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

<img style="width: 50px; height: 50px;" src="картинка">

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

<img style="width: 50px; height: 50px;" src="картинка">

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

<img style="width: 50px; height: 50px;" src="картинка">

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

<img style="width: 50px; height: 50px;" src="картинка">

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

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

</td>
</tr>
</table>
<br/>
<center>Каталоги</center>
<br/>
<center>Партнеры</center>

<script type="text/javascript">
$(document).ready(function(){
  var currentPosition = 0;
  var slideWidth = 360;
  var slides = $('.slide');
  var numberOfSlides = slides.length;
  // С помощью скрипта убираем прокрутку в контейнере.
  $('#slidesContainer').css('overflow', 'hidden');
  // Свернем все вкладки .slides в блок #slideInner 
  slides .wrapAll('<div id="slideInner"></div>')
.css({
      'float' : 'left',
      'width' : slideWidth
    });
  // Проставим блоку #slideInner ширину, равную общей ширине контейнеров
  $('#slideInner').css('width', slideWidth * numberOfSlides);
  $('#slideshow')
    .prepend('<span class="control" id="leftControl">Clicking moves left</span>')
    .append('<span class="control" id="rightControl">Clicking moves right</span>');
  manageControls(currentPosition);
  $('.control')
    .bind('click', function(){
currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;
    manageControls(currentPosition);
    $('#slideInner').animate({
      'marginLeft' : slideWidth*(-currentPosition)
    });
  });
  function manageControls(position){
    // Скрыть левую стрелку у первого контейнера
if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
// Скрыть правую стрелку у последнего контейнера
    if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show() }
  }	
});
</script>

<table style="width: 100%;" cellpadding="0" cellspacing="0" border="0">
<tr><td align="center" colspan="2">

<style>
.splLink {width: 150px; height: 25px; text-align: center; font-family: 'monotype corsiva'; font-size: 20px; font-weight: bold;}
.splCont {height: auto; width: 200px; padding: 5px; z-index: 1000; margin-top: 5px; border: 1px solid #000; text-align: center; background-color: transparent; background-image: url("http://savepic.ru/2408258.png");}
</style>


<center><table style="width: 90%">
<tr>
<td><DIV><div class=splLink>Администрация</div>
<DIV style="DISPLAY: none; position: absolute;" class=splCont>

Контент 1

</DIV></DIV></td>
<td><DIV><div class=splLink>Реклама</div>
<DIV style="DISPLAY: none; position: absolute;" class=splCont>

Контент 2

</DIV></DIV></td>
<td><DIV><div class=splLink>Погода и время</div>
<DIV style="DISPLAY: none; position: absolute;" class=splCont>

Контент 3

</DIV></DIV></td>
<td><DIV><div class=splLink>Ссылки</div>
<DIV style="DISPLAY: none; position: absolute;" class=splCont>

Контент 4

</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>
<tr>
<td style="width: 350px;"><img style="margin: 0 0 -2px 0;" src="http://uploads.ru/i/S/0/Y/S0YHf.jpg"></td>
<td align="center" valign="top"><br/>

Объявления

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