<!-- Cлайдер-->
<style type="text/css">
#slideshow {
margin:0 auto;
width:800px;
height:250px;
position:relative;}

#slideshow #slidesContainer {
  margin:0 auto;
  width:800px;
  height:250px;
  position:relative;
text-align: justify;}

#slideshow #slidesContainer .slide {
  margin:0 auto;
  width:800px; /* На двадцать пикселев меньше чем ширина #slidesContainer */
  overflow-y:auto; /* поддержка прокрутки */
  height:250px;
  text-align: justify;}

.control {
  display:block;
  width:102px;
  height:29px;
  text-indent:-10000px;
  position:absolute;
  cursor: pointer;
  z-index:100;}

#leftControl {
  top:87px;
   right:820px;
  background:transparent url(http://s1.uploads.ru/i/Vv7ZP.png) no-repeat 0 0;}

#rightControl {
  top:87px;
  left:840px;
  background:transparent url(http://s1.uploads.ru/i/D2ZHV.png) no-repeat 0 0;}
</style>
<style>
#my_cyl {
  float: left;
  width: 320px;
}
</style>
<style>
#navigation a {
  display: block;
text-align: center; 
  margin: 1px;
width:150px;
  padding: 2px;
  background: #cfc0dc; 
}
#navigation a:hover{
  display: block;
text-align: center; 
width:150px;
margin: 1px;
  padding: 2px;
  background: #d7cedf;
}
</style>

<script type="text/javascript">
$(document).ready(function(){
  var currentPosition = 0;
  var slideWidth =800;
  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>

<div id="slideshow">
    <div id="slidesContainer">
      <div class="slide"><table>
<tr><td width="40%"><div style="padding-right:30px">
<center><span style="font-size: 14px; font-weight: bold;">Welcome!</span></center>
• Рады приветствовать Вас на <b>FRPG "Sherlock. Two Steps From Chaoc"</b>, созданной по мотивам двух популярных сериалов канала <b>BBC</b> <b>"Whitechapel"</b> и <b>"Sherlock"</b>. <br>
Дорогие гости, не стоит сидеть на главной странице, ибо можно пропустить все самое интересное. А я Вас уверяю, что это "интересное" будет обязательно. Поэтому, скорее регистрируйтесь, занимайте приглянувшуюся роль и айда вперед - вершить истории, совершать и раскрывать преступления и просто жить!
• <b>Система игры:</b> эпизодическая;<br>• <b>Рейтинг:</b> NC-17. <br>
• На данный момент в игру нуждаются <b>абсолютно все </b> каноны и неканоны!!
 </div>
</td>
<td >
<br><br><br><br><center><span style="font-size: 14px; font-weight: bold;">Navigation:</span></center><br>
<div id="navigation"><a href="ссылка">название ссылки</a></div>
<div id="navigation"><a href="ссылка">название ссылки</a></div>
<div id="navigation"><a href="ссылка">название ссылки</a></div>
<div id="navigation"><a href="ссылка">название ссылки</a></div>
<div id="navigation"><a href="ссылка">название ссылки</a></div>
<div id="navigation"><a href="ссылка">название ссылки</a></div>
<div id="navigation"><a href="ссылка">название ссылки</a></div>
</td>
<td width="35%">
<center> <span style="font-size: 14px; font-weight: bold;">Admins</span></center>
<br/>
<a href="http://proba69.rusff.ru/profile.php?id=2" target="_blank"><img src="http://s1.uploads.ru/i/BjYO0.gif" title="Game Master"></a><a href="http://proba69.rusff.ru/profile.php?id=2" target="_blank"><img src="http://s1.uploads.ru/i/8phNl.gif" title="John Watson"></a>
<br/><br/><div style="overflow-y: auto; height: 150px"><span style="font-size: 14px; font-weight: bold;">News</span><br> <br>
<marquee direction="up" scrollamount="1" scrolldelay="0" height="130"> • <b>01.08.12 </b>Первая, и главная, новость в жизни сего проекта  - мы открыты! Тройное ура. Еще много, о-очень много, работы, но Админ работу любит и в считанные дни ролевая примет божеский вид и можно будет торжественно перерезать красную ленточку. Нужны все. Абсолютно все! GM<br> </marquee>
</div>
</td>
</tr>
</table></div>
<div class="slide"><center><span style="font-size: 14px; font-weight: bold;">Meters</span><br/>Коды баннеров<br/><br><br><br><span style="font-size: 14px; font-weight: bold;">Partners</span><br/><br/><marquee scrollamount="3" direction=left height="30" width="400"><a href="://proba69.rusff.ru" target="_blank"><img src=" http://s1.uploads.ru/i/huHIN.gif " title="Sherlock. Two Steps From Chaoc"></a> </marquee> </center>
</div>
<div class="slide"><div id="my_cyl">
<br><br><br><br><center><img width="186" height="104" src="http://uploads.ru/i/C5fXd.gif"></center>
</div>
<div id="my_cyl">
<br><br><br><center> <span style="font-size: 14px; font-weight: bold;">Quote of the Week</span> <br>
— Ты во мне разочарован.<br>
— Хорошая дедукция. Да!<br>
— Не превращай людей в героев, Джон, героев нет. А даже будь они — я из другой оперы.<br>
— На кону жизни реальных людей, тебя это хоть как-то волнует?<br>
— Волнение поможет их спасти?<br>
— Нет.<br>
— Тогда я и дальше буду избегать этой ошибки.<br>
</center>
</div></div>
    </div>

<style type="text/css">
<!--
#slideshow {
margin:0 auto;
width:290px;
height:320px;
position:relative;
}
#slideshow #slidesContainer {
  margin:0 auto;
  width:210px;
  height:263px;
  overflow:auto; /* поддержка прокрутки */
  position:relative;
}
#slideshow #slidesContainer .slide {
  margin:0 auto;
  width:200px; /* На двадцать пикселев меньше чем ширина #slidesContainer */
  height:263px;
}
.control {
  display:block;
  width:30px;
  height:30px;
  text-indent:-10000px;
  position:absolute;
  cursor: pointer;
  z-index:100;}
#leftControl {
  top:125px;
  left:0;
  background:transparent url(http://s1.uploads.ru/i/8r2Bn.png) no-repeat 0 0;
}
#rightControl {
  top:125px;
  left:275px;
  background:transparent url(http://s1.uploads.ru/i/3DHSG.png) no-repeat 0 0;
}
.slide h2, .slide p {
  margin:15px;
}
.slide img {
  float:right;
  margin:0 15px;
}
-->
</style>

<script type="text/javascript">
$(document).ready(function(){
  var currentPosition = 0;
  var slideWidth = 210;
  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>

<center><table background="http://s1.uploads.ru/i/1zryA.jpg" height="350" width="800" font-family="Century Schoolbook">
<tr><td valign="top" width="237" ><div style="padding-right:25px"><center><br><br>очень очень длинная ссылка<br><br>ссылка<br><br>ссылка<br><br>ссылка<br><br>ссылка<br><br>ссылка<br><br><br><br><br><br>акция 1<br><br>акция 2<br><br>акция 3</center></div>
</td>
<td valign="top" width="237" ><br><br><br><br><br><br><br><table>
<tr><td width="33%"><div style="padding-left:12px"><a href="ссылка на профиль1" target="_blank"><img src="картинка1" title="имя1"></div> </td>
<td width="36%"><div style="padding-left:8px"><a href="ссылка на профиль2" target="_blank"><img src="картинка2" title="имя2"></div> </td>
<td ><div style="padding-right:15px"><a href="ссылка на профиль3" target="_blank"><img src="картинка3" title="имя3"></div></td>
</tr>
</table><br><br><table width="100%">
<tr><td width="10%"><div style="padding-left:2px"><a href="ссылка на профиль4" target="_blank"><img src="картинка4" title="имя4"></div> </td>
<td width="25%"><div style="padding-left:3px"><a href="ссылка на профиль5" target="_blank"><img src="картинка5" title="имя5"></div></td>
<td width="25%"><div style="padding-left:3px"><a href="ссылка на профиль6" target="_blank"><img src="картинка6" title="имя6"></div></td>
<td ><div style="padding-left:5px"><a href="ссылка на профиль7" target="_blank"><img src="картинка7" title="имя7"></div></td>
</tr>
</table></td>
<td valign="top"><br><br><div id="slideshow">
    <div id="slidesContainer">
      <div class="slide">
        первый слайд </div>
<div class="slide">2</div>
<div class="slide">3</div>
<div class="slide">4</div>
<div class="slide">5</div>
    </div></td>
</tr>
</table></center>