<div id="sidebar"  >
<div width="190px">
<br>
А тут пошел текст, картинки и т.д.
<br>
</div>
</div>
<style>
#sidebar {
  width: 200px; height: 400px;
  background-color: #faf6ea;
  text-align: center;
  position: absolute; 
  top: 350px; 
  margin-left: 840px;
  font-size: 7.5pt;
}
</style>

<style>
.punbb .section .container,.punbb .post-body,.punbb .post-links,.punbb td.tc2,.punbb td.tc3,.punbb .formal fieldset .post-box,#viewprofile li strong,#viewprofile li div,#setmods dd,.punbb .info-box,.punbb #pun-main .info-box .legend,.punbb .main .container,.punbb .post .container,.punbb .post h3,#pun-stats h2,.punbb .main h1,.punbb .main h2,#pun-title,#pun-title .container,.punbb .modmenu .container,#pun-navlinks .container,.punbb th,.punbb .post h3 span,#pun-main fieldset legend span,.punbb textarea, .punbb select, .punbb input, .punbb .quote-box, .punbb .code-box, #pun{
color: цвет текста;
}
</style>

<!-- Замена приветствия -->
<script>
<!--
greet="Как же мы рады тебе, "
str = document.getElementById("pun-status").innerHTML
pos = str.indexOf("Привет")
document.getElementById("pun-status").innerHTML=str.substring(0,pos)+greet+str.substring(pos+8,str.length-1)
visit="Ты был дома " 
str = document.getElementById("pun-status").innerHTML
if( (pos=str.indexOf("Ваш последний визит")) != -1 )
   document.getElementById("pun-status").innerHTML=str.substring(0,pos)+visit+str.substring(pos+21,str.length-1)
-->
</script>

<style>
.container1 {width: 100%; margin: 0 auto; padding: 0;}
ul.tabs {
    margin: 0;
    padding: 0;
    float: left;
    list-style: none;
    height: 39px;
    width: 100%;
}
ul.tabs li {
    float: left;
    margin: 0;
    padding: 0;
padding-top: 4px!important;
    height: 35px;
vertical-align: middle;    
border: 0px;
border-top: 1px solid #bf8138;
    border-bottom: 1px solid #9ea19f;
        border-right: 1px solid #9ea19f;
        border-left: 1px solid #9ea19f;
    margin-bottom: -2px;
    background: url();
    overflow: hidden;
    position: relative;
width: 24%;
text-align: center;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}

ul.tabs li a {
    text-decoration: none!important;
    color: #4f4f4f;
    /* color: transparent;*/
    display: block;
    padding: 0 5px;
    background: url();
    outline: none;
}

ul.tabs li a:hover {
       background: url();
       text-decoration: none!important;
    border-bottom: 0px solid #9ea19f;
        border-top: 0px solid #9ea19f;    
        border-left: 0px solid #9ea19f;    
        border-right: 0px solid #9ea19f;  

}    

ul.tabs li.active  {
    text-decoration: none!important;
    background: url(cсылка на картинку);
background-color: #e0dede;    
    border-bottom: 0px solid #bebebe;
        border-top: 1px solid #bebebe;    
        border-left: 1px solid #bebebe;    
        border-right: 1px solid #bebebe;   
}  

ul.tabs li.active a:hover  {
        background: url(ССЫЛКА ШОБ ПРИ ПЕРЕКЛЮЧЕНИИ ВЫДЕЛяЛОСЬ ОТДЕЛЬО ЦВЕТОМ);
    text-decoration: none!important;
}

.tab_container1 {
    clear: both;
    float: left; 
    width: 774px;
    height: 300px;
    background-image : url(ссылка на картинку);   
background-color:#e0dede;  
    border-bottom: 1px solid #bebebe;
        border-top: 0px solid #bebebe;    
        border-left: 1px solid #bebebe;    
        border-right: 1px solid #bebebe;  
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;

}

.tab_content {
    padding: 5px;
}

</style>

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

$(document).ready(function() {


	$(".tab_content").hide(); 
	$("ul.tabs li:first").addClass("active").show();
	$(".tab_content:first").show();
	
	$("ul.tabs li").click(function() {
    $("ul.tabs li").removeClass("active");
    $(this).addClass("active");
    $(".tab_content").hide();
    var activeTab = $(this).find("a").attr("href");
    $(activeTab).fadeIn();
    return false;
	});

});

</script>
<!-- конец скриптов вкладок -->

<table border="0" cellspacing="0" cellpadding="0" style="width: 800px; height: 200px;">
    <tr>
    <td style="width: 200px; height: 200px;">
    
<!-- Вкладки и их содержимое -->
<div class="container1">
<ul class="tabs">
    <li class="active"><a href="#tab1">Н О В О С Т И</a></li>
    <li><a href="#tab2">Н А В И Г А Ц И Я</a></li>
    <li><a href="#tab3">Б А Н Н Е Р Ы</a></li>
    <li><a href="#tab4">А Д М И Н - GROUP</a></li>
</ul>

      <div class="tab_container1">

<div style="display: block;" id="tab1" class="tab_content">
<div style="width:100%; height: 400px; overflow:auto; overflow-x:hidden; padding:1px;">

<center><table>
<tr><td><center>
<b>н о в о с т и</b><br>
<br>обновился диз и тра та та...
</center></td><td><center>
<b>с о б ы т и я в и г р е</b><br>
<br>какие квэсты, кто где играет и тра та та...
</center></td><td><center>
<b>о б ъ я в л е н и я</b><br>
<br>объявления от администрации, типа открыт набор туда туда и тд...
</center></td></tr>
</table></center>

</div></div>

<div style="display: none;" id="tab2" class="tab_content">
<div style="width:100%; height: 200px; overflow:auto; overflow-x:hidden; padding:1px;">

<center>
<br>
<br><a href="http://country.mybb.ru/viewtopic.php?id=59#p161
 ">Шаблон Анкеты</a>
<br><a href="http://country.mybb.ru/viewtopic.php?id=44#p114
 ">Ваша Реклама</a>
<br><a href="ссылка ">Гостевая</a>
<br><a href="ссылка ">Мироздание</a>
<br><a href="ссылка ">Глобальный Сюжет</a>
<br><a href="ссылка">Набор Помощников</a>
  <br><a href="ссылка
">Правила Ведения Игры</a>
 <br><a href="ссылка">Оформление Профиля </a></center>

</div></div>

<div style="display: none;" id="tab3" class="tab_content"> 
<div style="width:100%; height: 200px; overflow:auto; overflow-x:hidden; padding:1px;">
<div class=WordSection1>
<center>
<br><b>к а т а л о г и</b><br><br>
<a title="Каталог фэнтези сайтов Палантир" href='http://palantir.in/?from=13546' target='_blank'>	
<script type="text/javascript">
Md=document;Mnv=navigator;
Mrn=Math.random();Mn=(Mnv.appName.substring(0,2)=="Mi")?0:1;Mp=0;Mz="p="+Mp+"&";
Ms=screen;Mz+="wh="+Ms.width+'x'+Ms.height;My="<img src='http://palantir.in/count.php?id=13546&today_hosts=1&total_hosts=1&cid=2006green.png";My+="&cntc=none&rand="+Mrn+"&"+Mz+"&referer="+escape(Md.referrer)+'&pg='+escape(window.location.href);My+="'  alt='Palantir' title='Каталог фэнтези сайтов Палантир' border='0' width='88px' height='31px'>";Md.write(My);</script>
<noscript><img src="http://palantir.in/count.php?id=13546&today_hosts=1&total_hosts=1&cid=2006green.png" alt='Palantir' title="Каталог фэнтези сайтов Палантир" border=0 width="88px" height="31px"></noscript></a>
<br><br><b>администрация</b><br><br>
...
</center>
</div></div>

<div style="display: none;" id="tab4" class="tab_content">
<div style="width:100%; height: 200px; overflow:auto; overflow-x:hidden; padding:1px;">

<center>.........</center>

</div></div></div>


<!-- Конец вкладок и их содержимого  -->    
    </td>
    
</table>

<style type="text/css">
#pun-main .quote-box, #pun-main .code-box {background-image : url(ссылка на картинку);}
</style>