Там где цифра 1 - текст выплывает при нажатии/наведении курсором(как вам проще) на аватарку.

Там где цифра 2 текст выплывает при нажатии на кнопки "Важное", "Новости" и "На заметку". Также в этой колонке находится простой текст над этими кнопками.

crimson soda написал(а):

Нужна таблица с вкладками. Только вместо вкладок с названиями будут кликабельные кружочки (картинки пока не готовы, в коде просто напишите ССЫЛКА НА КАРТИНКУ КРУЖОЧКИ, я потом вставлю самостоятельно). Эти кружочки, как видно на эскизе, должны располагаться снизу. Размер самой таблицы: 850х250 не считая кружочков.
На первой и основной вкладке два столбца, ширина второго - 270px
Первый столбец здесь же должен сдержать надпись "свежие новости" и уже под ней находиться прокручиваемое поле, в котором будут располагаться новости.

Вторая вкладка содержит три столбца одинаковой ширины (можно прописать процентами - 33, 34, 33)

Фон у таблицы будет, но тоже еще не готов, напишите, пожалуйста ССЫЛКА НА ФОН в нужном месте, я установлю самостоятельно.
Границ у таблицы не должно быть видно.
ЭСКИЗ

   

Адрес форума: http://atla.f-rpg.ru/

<style type="text/css">
/*основная таблица*/
#obyava {
    background: url("http://st1.bbcorp.ru/img/Mybb_Chance/alt.gif"); /*ваша фоновая картинка*/
    width: 850px;
    margin: auto;
    }

/*общие настройки*/
.fresh, .tops, .ams, .links, .need {
    height: 248px;
    }
.ams, .links, .need {
    width: 277px;
    }
.fresh, .tops, .links, .need {
    position: relative;
    }

/*блок новостей*/
.fresh {
    width: 570px;
    }

/*блок новостей внутренний*/
.fresh_ {
    position: absolute;
    width: 562px;
    height: 221px;
    overflow-y: auto;
    padding: 0px 3px;
    }

/*блок баннеров*/
.tops {
    width: 270px;
    margin: -248px 0px 0px 575px;
    }

/*блок амс*/
.ams {
    position: absolute;
    }

/*блок ссылок*/
.links {
    margin: 0px 0px 0px 284px;
    }

/*блок нужных*/
.need {
    margin: -248px 0px 0px 568px;
    }

/*блок заголовков*/
.fresh h3, .tops h3, .ams h3, .links h3, .need h3 {
    font: bold 14px 'palatino linotype', verdana, serif;
    text-align: center;
    padding: 5px 0px;
    }
</style>

        <!-- Стиль меню таблицы в объявлении -->
        <style type="text/css">
        /****************************************
           Таблица с переключаемыми Вкладками

        ****************************************/
        #tab2, #tab2*{
          paddibg: 0;
          margin: 0;
        }
        #tab2 {
          background: url(http://savepic.net/3882138.png) bottom center no-repeat transparent;
          height: 309px;
          width: 850px;
/*          outline: solid red 1px; Убираем Строку после настройки*/
        }
        #tab2, #tab2 td {
          border: none 0 transparent!important;
          border-collapse: collapse;
          text-align: center;
          margin: auto;
        }
        img[data^="tab"] {
          cursor: pointer;
          height: 100%;
/*          outline: solid red 1px; Убираем Строку после настройки*/
          border: none 0 transparent!important;
        }
        .tab-content {
          display: none;
          width: 100%;
          height: 250px;
/*          outline: solid blue 1px; Убираем Строку после настройки*/
          color: #111; /*цвет текста в слайдере*/
          overflow-y: auto;
        }
        </style>
        <script type="text/javascript">
        $.fn.switch_tabs = function() {
          var tbl = this,knopK = $("img[data^='tab']",tbl);
          knopK.each(function(){
            var arr = $(this).attr('data').split(",");
            $(this).css("background-image","url("+arr[1]+")")
          }); knopK.css("background-position","120% 10000px")
              knopK.css("background-repeat","no-repeat")

          knopK.click(function(){
            knopK.removeClass('active');
            $(this).addClass('active');
            var arr = $(this).attr('data').split(",");
            tbl.css("background-image","url("+arr[1]+")")
            $(".tab-content",tbl).hide();
            $("#"+arr[0]+"",tbl).show();
          });
        }
        </script>

<div id="obyava">
<!-- Таблица с переключаемыми вкладками -->
<table id="tab2" class="tbl-0" border="1px">
   <tr>
      <td  class="content" align=center>

         <!-- Контейнер контента 1-й кнопки -->
            <div id="tab-1" class="tab-content"  style="display:block;">
               <div class=fresh>
<h3>Свежие новости</h3>
                  <div class=fresh_>
Текст новостей с прокруткой<br>
                  </div>
               </div>
               <div class=tops>
<h3>ТОПы и партнеры</h3>
Ссылки на баннеры ТОПов и баннеры партнеров
               </div>
            </div>

         <!-- Контейнер контента 2-й кнопки -->
            <div id="tab-2" class="tab-content">
               <div class=ams>
<h3>Администрация</h3>
Администраторы проекта
               </div>
               <div class=links>
<h3>Ссылки</h3>
Перечень навигационных ссылок
               </div>
               <div class=need>
<h3>Нужные персонажи</h3>
Темы с нужными в игру персонажами
               </div>
            </div>
      </td>
   </tr>
   <tr>
      <td class="butt" valign=center height=52>
         <!-- Секция кнопок -->
<img width="160" data="tab-1,http://savepic.net/3882138.png" src="/i/blank.gif" class="active"/>
<img width="160" data="tab-2,http://savepic.net/3869850.png" src="/i/blank.gif"/>
      </td>
   </tr>
</table><script>$("#tab2").switch_tabs()</script><!--//End/-switch Tabs -->
</div>

Светло-синим - ссылка на картинку первого кружка (будьте внимательны, она упоминается дважды: в html-верхе и объявлении)
Темно-синим - ссылка на картинку второго кружка
Сине-зеленым - отмечена ссылка на вашу фоновую картинку под всю таблицу (вместе с кружками - поэтому делая фоновую картинку учтите необходимость сделать прозрачным нижнюю полосу, высотой с пространство, занимаемое кружками. Совершенно иной вариант будет описан в конце комментариев).
Фиолетовым - отмечена ширина пространства под одну кнопку-кружок (это пространство будет активным при наведении курсора и срабатывать при клике)
Розовым - высота, требуемая под кружки (сейчас кружки высотой в 50 пикселей, а пространство контейнера под них - 52 пикселя)
Прокрутка появляется в первой вкладке в блоке с новостями по мере необходимости, т.е. при переполнении блока контентом.

Вы можете сделать фон (и под таблицу, и кружки-переключатели) единым, как и было задумано автором таблицы. Концепция в следующем: вы создаете две картинки (по числу вкладок), обе они будут иметь размеры, общие для всей таблицы, т.е. контентовая часть и кнопки, где верх - фон под контент, а низ - первая из кнопок в том месте на общей картинке, где она должна располагаться. Вторая картинка - всё тот же фон плюс кнопка, но уже только вторая. В результате переключения вкладок, вы будете переключать и фоны (вы и сейчас их переключать будете, просто в фон сейчас вложены картинки лишь кнопок) и под контент, и под кнопки.

ItiAka написал(а):

http://maxfrei.mybb.ru
Эскиз

   

Хотелось бы, чтобы:
Кроме верхних вкладок, границы были прозрачными.
В "Демиургах", при наведении курсора на изображение, чтобы высвечивалась другая картинка, с именем.
Блок новостей прокручивался

<style type="text/css">
/*общие настройки*/
.fresh, banner, .banners, .links, .time, .best {
    position: relative;
    }
.fresh, .fresh_, .banner, .banners, .links, .time, .best, .demiurg {
/*    border: solid 1px #e12; Убираем после настройки*/
    }

/*блок новостей*/
.fresh {
    width: 570px;
    height: 395px;
    }

/*блок новостей внутренний*/
.fresh_ {
    position: absolute;
    width: 562px;
    height: 364px;
    overflow-y: auto;
    padding: 0px 3px;
    }

/*свой баннер*/
.banner {
    width: 200px;
    height: 65px;
    margin: -397px 0px 0px 575px;
    }

/*блок баннеров*/
.banners {
    width: 200px;
    height: 325px;
    margin: 3px 0px 0px 575px;
    }

/*блок ссылок*/
.links {
    width: 382px;
    height: 392px;
    }

/*настройка ссылок*/
.links a {
    color: black !important; /*цвет текста ссылок*/
    background-color: #A09287; /*фон ссылок*/
    border: solid 2px #DEDEDD !important; /*бордюры вокруг ссылок*/
    border-radius: 2em/0.6em; /*радиусы скругления (эллиптические)*/
    line-height: 350%; /*междустрочный интервал для ссылок*/
    }

/*блок времени*/
.time {
    width: 200px;
    height: 240px;
    margin: -397px 0px 0px 575px;
    }

/*блок лучших*/
.best {
    width: 200px;
    height: 150px;
    margin: 3px 0px 0px 575px;
    }

/*блок нужных*/
.demiurg {
    height: 193px;
    }

/*блок заголовков*/
.fresh h3, .banner h3, .banners h3, .links h3, .time h3, .best h3, .demiurg h3 {
    font: bold 14px 'palatino linotype', verdana, serif;
    text-align: center;
    padding: 5px 0px; /*внутренние отступы текста ссылок от краев фона*/
    }
</style>

        <!-- Стиль меню таблицы в объявлении -->
        <style type="text/css">
        /****************************************
           Таблица с переключаемыми Вкладками

        ****************************************/
        #tab2, #tab2*{
          paddibg: 0;
          margin: 0;
        }
        #tab2 {
          background: url(http://savepic.net/3892375.png) no-repeat transparent;
          height: 450px;
          width: 780px;
/*          outline: solid red 1px; Убираем Строку после настройки*/
        }
        #tab2, #tab2 td {
          border: none 0 transparent!important;
          border-collapse: collapse;
          text-align: center;
          margin: auto;
        }
        img[data^="tab"] {
          cursor: pointer;
          height: 100%;
/*          outline: solid red 1px; Убираем Строку после настройки*/
          border: none 0 transparent!important;
        }
        .tab-content {
          display: none;
          width: 100%;
          height: 400px;
/*          outline: solid blue 1px; Убираем Строку после настройки*/
          color: #111; /*цвет текста в слайдере*/
          overflow-y: auto;
        }
        </style>
        <script type="text/javascript">
        $.fn.switch_tabs = function() {
          var tbl = this,knopK = $("img[data^='tab']",tbl);
          knopK.each(function(){
            var arr = $(this).attr('data').split(",");
            $(this).css("background-image","url("+arr[1]+")")
          }); knopK.css("background-position","120% 10000px")
              knopK.css("background-repeat","no-repeat")

          knopK.click(function(){
            knopK.removeClass('active');
            $(this).addClass('active');
            var arr = $(this).attr('data').split(",");
            tbl.css("background-image","url("+arr[1]+")")
            $(".tab-content",tbl).hide();
            $("#"+arr[0]+"",tbl).show();
          });
        }
        </script>

<!-- Таблица с переключаемыми вкладками -->
<table id="tab2" class="tbl-0" border="1px">
   <tr>
      <td class="butt" valign=center height=79>
         <!-- Секция кнопок -->
<img width="190" data="tab-1,http://savepic.net/3892375.png" src="/i/blank.gif" class="active"/>
<img width="190" data="tab-2,http://savepic.net/3897495.png" src="/i/blank.gif"/>
<img width="190" data="tab-3,http://savepic.net/3898519.png" src="/i/blank.gif"/>
<img width="190" data="tab-4,http://savepic.net/3896471.png" src="/i/blank.gif"/>
      </td>
   </tr>
   <tr>
      <td  class="content" align=center>

         <!-- Контейнер контента 1-й кнопки -->
            <div id="tab-1" class="tab-content"  style="display:block;">
               <div class=fresh>
<h3>Блок новостей</h3>
                  <div class=fresh_>
Текст новостей с прокруткой<br>
                  </div>
               </div>
               <div class=banner>
<h3>Ваш баннер</h3>
<a target="top_" title="Рейтинг Ролевых Ресурсов - RPG TOP" href="http://top.roleplay.ru/20743"><img height="31" border="0" width="88" alt="Рейтинг Ролевых Ресурсов - RPG TOP" src="http://img.rpgtop.su/88x31x11x3.gif"/></a>
               </div>
               <div class=banners>
<h3>ТОПы и партнеры</h3>
<a target="top_" title="Рейтинг Ролевых Ресурсов - RPG TOP" href="http://top.roleplay.ru/20743"><img height="31" border="0" width="88" alt="Рейтинг Ролевых Ресурсов - RPG TOP" src="http://img.rpgtop.su/88x31x11x3.gif"/></a>
               </div>
            </div>

         <!-- Контейнер контента 2-й кнопки -->
            <div id="tab-2" class="tab-content">
               <table>
                  <tr>
                     <td>
                        <div class="links">
                           <center>
<h3>Полезные ссылки гостям</h3>
<a style="padding: 7px 70px" href="http://maxfrei.mybb.ru/">Гостевая</a><br>
<a style="padding: 7px 55px" href="http://maxfrei.mybb.ru/">Список ролей</a><br>
<a style="padding: 7px 71px" href="http://maxfrei.mybb.ru/">Правила</a>
                           </center>
                        </div>
                     </td>
                     <td>
                        <div class="links">
                           <center>
<h3>Полезные ссылки игрокам</h3>
<a style="padding: 7px 54px" href="http://maxfrei.mybb.ru/">Аватаризация</a><br>
<a style="padding: 7px 40.5px" href="http://maxfrei.mybb.ru/">Групповые квесты</a><br>
<a style="padding: 7px 46px" href="http://maxfrei.mybb.ru/">Отсутствие/уход</a>
                           </center>
                        </div>
                     </td>
                  </tr>
               </table>
            </div>

         <!-- Контейнер контента 3-й кнопки -->
            <div id="tab-3" class="tab-content">
               <div class=fresh>
<h3>Блок сюжета</h3>
                  <div class=fresh_>
Текст сюжета с прокруткой<br>
                  </div>
               </div>
               <div class=time>
<h3>Время в игре</h3>
               </div>
               <div class=best>
<h3>Лучший игрок</h3>
               </div>
            </div>

         <!-- Контейнер контента 4-й кнопки -->
            <div id="tab-4" class="tab-content">
               <table>
                  <tr>
                     <td>
                        <div class=demiurg style="width:383px">
<h3>Администраторы</h3>
<a href="http://maxfrei.mybb.ru/" title="имя 1"><img src="http://s5.uploads.ru/GPjze.png"/></a>
<a href="http://maxfrei.mybb.ru/" title="имя 2"><img src="http://s5.uploads.ru/GPjze.png"/></a>
                        </div>
                     </td>
                     <td>
                        <div class=demiurg style="width:383px">
<h3>Модераторы</h3>
<a href="http://maxfrei.mybb.ru/" title="имя 3"><img src="http://savepic.ru/2867133.png"/></a>
<a href="http://maxfrei.mybb.ru/" title="имя 3"><img src="http://savepic.ru/2867133.png"/></a>
                        </div>
                     </td>
                  </tr>
                  <tr>
                     <td colspan=2>
                        <div class=demiurg style="width:771px">
<h3>Дизайн и графическое снабжение</h3></br>
<a href="http://maxfrei.mybb.ru/" title="имя 5"><img src="http://forumavatars.ru/img/avatars/0000/14/1c/28838-1379149270.gif"/></a>
<a href="http://maxfrei.mybb.ru/" title="имя 6"><img src="http://forumavatars.ru/img/avatars/0000/14/1c/28838-1379149270.gif"/></a>
<a href="http://maxfrei.mybb.ru/" title="имя 7"><img src="http://forumavatars.ru/img/avatars/0000/14/1c/28838-1379149270.gif"/></a>
<a href="http://maxfrei.mybb.ru/" title="имя 7"><img src="http://forumavatars.ru/img/avatars/0000/14/1c/28838-1379149270.gif"/></a>
                        </div>
                     </td>
                  </tr>
               </table>
            </div>

      </td>
   </tr>
</table><script>$("#tab2").switch_tabs()</script><!--//End/-switch Tabs -->

Если вам понадобится продолжить настройку, то советую на ее время убрать выделенные светло-синим слеши и звездочки. Это вернет вам в таблицу границы всех блоков. Когда закончите с настройкой, можете либо восстановить эти знаки на прежних местах, либо вовсе удалить все те строчки, что сейчас заключены между ними.
Темно-синим выделены ссылки на картинки с язычками-переключателями вкладок. Ссылка на первую вкладку, которая  является вкладкой по-умолчанию при загрузке страницы, нужно указать дважды. Будьте внимательны, все ссылки скопом указаны в Объявлении, а второе место для первой ссылки - в html-верхе.
Красная цифра - высота контейнера, в который вложены картинки язычков-переключателей вкладок.
Розовые цифры - ширина каждого из язычков (при желании их можно делать разновеликими в зависимости от длины заголовка вкладки, но тогда учтите это, создавая картинки). Эта цифра отвечает за ширину области, которая будет срабатывать при клике для переключения вкладок.
Оформление ссылок во второй вкладке (поскольку картинок вы не дали), сделано средствами CSS и всё это можно отрегулировать так, как вам будет нужно. Блок регулировки выделен оливковым цветом.
Если придется переименовывать кнопки-ссылки, то вам понадобится настройка, выделенная бирюзовым. Принцип регулировки следующий: выделенная цифра означает расстояние в пикселях от левого края фона-кнопки до первой буквы в ее названии (такое же точно расстояние и от последней буквы в названии до правого края фона под кнопку). Следовательно, чем больше цифра, тем шире фон, тем шире кнопка. Поскольку длины названий на кнопках разные - цифры тоже отличаются. Как видите, шаг регулировки в полпикселя.
Сине-зеленым выделены тексты всплывающих подсказок при наведении на картинки администраторов/модераторов/дизайнеров. В этих же строках, соответственно, ссылки в начале строк - адреса к профилям АМС, ссылки в конце этих строк - адреса картинок.
Если захотите изменить начертание/размер/цвет заголовков на вкладках, ищите настройки в фиолетовых строчках.