Единый форум поддержки

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » Единый форум поддержки » Архив » Таблицы на заказ (15)


Таблицы на заказ (15)

Сообщений 901 страница 920 из 1000

1

Продолжение темы Таблицы на заказ (14).
Напомню требования:

При заказе таблиц от вас требуется:
1) Эскиз вашей будущей таблицы, сделанный в любом графическом редакторе (Пэинт, Фотошоп и т.д.) - обязательно!
2) Ссылка на ваш форум !Заказы без ссылок приниматься не будут!
3) Указать необходимые прокрутки, всплывающие окна, границы таблиц и т.п.

Заказы типа "Сделайте: Как там!" также приниматься не будут. Потрудитесь нарисовать макет таблицы самостоятельно.

И помните, чем подробнее опишите то, что нужно, тем точнее получите результат.

+3

901

Amy Ni написал(а):

Сама разобралась.

Эх, вот ток доделаешь, как сами разбираюцо..

0

902

Rion Leonheart написал(а):

Эх, вот ток доделаешь, как сами разбираюцо..

Ой, правда?
А можно мне ее? Хоть посмотрю, как это делают профессионалы :3

0

903

Amy Ni написал(а):

Ой, правда?

Нет, ложь, наглая ложь..)

Показать код таблицы

В html-верх:

Код:
<style type="text/css">
/*--------------------------------------------
Настройки объявления
--------------------------------------------*/
/* Контейнер объявления */
#pun-announcement .container {padding-top: 0em} /* верхний внутренний отступ */

/* Меню с кнопками */
#menu {margin: 0} /* внешние отступы - со всех сторон */

/* Настройки кнопок */
#menu span {
  display: block; /* отображение блоками */
  color: #5e0000 /* цвет текста кнопок в обычном состоянии */
  }

#menu span:hover {text-decoration: underline} /* подчеркивание кнопок при наведении */

#menu span.tabactive {color: #000} /* изменение цвета кнопок при активации */

/* Настройка контейнера с переменным контентом */
.submenutext {
  display: none; /* отображение (не трогать!) */
  width: 100%; /* ширина контейнера */
  text-align: center; /* горизонтальное выравнивание текста в контейнере */
  height: auto /* высота устанавливается автоматически по длине контента */
  }

/* Настройки класса вложенных таблиц */
.import_tab {
  width: 100%; /* ширина */
  border: none /* отстутствие границ */
  }

/* Настройки ячеек класса вложенных таблиц */
.import_tab td {
  margin: 0; /* внешние отступы */
  padding: 0; /* внутренние отступы */
  text-align: center; /* горизонтальное выравнивание в ячейках */
  vertical-align: top /* вертикальное выравнивание в ячейках */
  }

/* Настройки кнопок и крупных заголовков в таблицах */
#menu span, .import_tab h3 {
  margin: 2px 0 6px 0; /* внешние отступы: сверху, справа, снизу, слева - соответственно */
  font: bold normal 14px 'palatino linotype', serif /* текст: жирный, не курсив, размер, семество шрифта - соответственно */
  }

/* Настройка заголовков в таблицах поменьше */
.import_tab h4 {
  margin: 2px 0; /* внешние отступы: сверху/снизу, слева/справа - соответственно */
  font: bold normal 12px 'palatino linotype', serif /* текст: жирный, не курсив, размер, семество шрифта - соответственно */
  }

/*--------------------------- 
Настройки аватаров в таблицах
---------------------------*/
/* Аватары АМС */
.ams-faces img {
  width: 75px; /* ширина */
  height: 75px; /* высота */
  margin: 0.5em; /* внешние отступы */
  outline: 1px solid #000
  }

/* Аватары модераторов, канонов, лучшего игрока и автора лучшего поста */
.faces img, .big_image {
  width: 50px; /* ширина */
  height: 50px; /* высота */
  margin: 0.5em; /* внешние отступы */
  outline: 1px solid #000
  }

/* Остальные аватары */
.face-view img {
  width: 40px; /* ширина */
  height: 40px; /* высота */
  margin: 2px auto 5px auto; /* внешние отступы */
  outline: 1px solid #000
  }

/* Настройки ссылок в отдельной вкладке */
#links_navi td a {
  display: block; /* отображение блоками */
  width: 200px; /* ширина */
  margin: 0 auto 8px auto; /* внешние отступы */
  }
/*--------------------------------------------
Конец настроек объявления
--------------------------------------------*/
</style>

В html-низ:

Код:
<!-- Скрипт переключения вкладок -->
<script type="text/javascript">
$(document).ready(function() {
$("td.#MenuTxT div.submenutext").hide();
$("#menu span:first").addClass("tabactive").show();
$("td.#MenuTxT div.submenutext:first").show();
$("div.#menu span").click(function() {
    $("div.#menu span").removeClass("tabactive");
    $(this).addClass("tabactive");
    $("td.#MenuTxT div.submenutext").hide();
    var activeDiv = $(this).attr("alt");
    $("div."+activeDiv).fadeIn();
    return false; });
});
</script>

В объявление:

Код:
<!-- Основная таблица -->
<table style="width: 100%; border: none;" cellpadding="0" cellspacing="0">
 <tbody>
  <tr>
   <td>
    <div id="menu">
     <!-- Вложенная таблица с кнопками -->
      <table class="import_tab">
       <tbody>
        <tr>
         <td style="width: 25%;"><span alt="#sm1" style="cursor: pointer;">Welcome</span></td>
         <td style="width: 25%;"><span alt="#sm2" style="cursor: pointer;">Links</span></td>
         <td style="width: 25%;"><span alt="#sm3" style="cursor: pointer;">Need!</span></td>
         <td style="width: 25%;"><span alt="#sm4" style="cursor: pointer;">Hall of Flame</span></td>
        </tr>
       </tbody>
      </table>
     <!-- Конец вложенной таблицы с кнопками -->
    </div>
   </td>
  </tr>
  <tr>
   <td id="MenuTxT"  align="center" valign="top">
    <div id="submenu" align="center"> 
     <div id="sm1" class="submenutext" style="display: block;">
      <!-- Первая вкладка -->

       <table class="import_tab">
	<tbody>
	 <tr>
	  <td style="width: 33%;" rowspan="2">
          <!-- Блок приветствия -->
	   <h3>Добро пожаловать!</h3>
            <div style="padding: 0 5px; text-align: left;">


            <strong>Д</strong>обро пожаловать на форумную ролевую игру по мотивам одного из самых захватывающих аниме, Mirai Nikki! Регистрируйся, оставляй анкету и прими участие в игре на выживание, где твоим преимуществом и одновременно слабостью станет Дневник, предсказывающий будущее!

            <h3 style="text-align: center;">О ролевой:</h3>

            <strong>Имя ролевой:</strong> Mirai Nikki.<br/>
            <strong>Фендом:</strong> манга и аниме Дневник Будущего.<br/>
            <strong>Рейтинг:</strong> R.<br/>
            <strong>Система игры:</strong> локационно-эпизодическая.<br/>
            <strong>Место действия:</strong> Япония, город Сакурами.<br/>
            <strong>Время:</strong> соответствует настоящему.


            </div>
           <!-- Конец блока приветствия -->
	  </td>
	  <td style="width: 34%;" rowspan="2">
           <!-- Доска объявлений -->
	   <h3>Объявления</h3>
	   <div style="border: 2px inset #9d9a8e; border-radius: 10px; padding: 5px;">
            <div style="width: 100%; height: 240px; overflow-y: auto;">


             <strong>12.06.2014</strong><br/>
             Проект готов к приему игроков.<br/><br/>
             <hr><br/>
             <strong>9.06.2014</strong><br/>
             Дата создания форума.


            </div>
           </div>
           <!-- Конец доски объявлений -->
	  </td>
	  <td style="width: 33%; height: 140px;">
           <!-- Блок АМС -->
	   <h3>Администраторы</h3> 
           <div class="ams-faces">
	   <a href="http://mirainikki8.rolka.su/profile.php?id=3" target="_blank"><img src="http://f5.s.qip.ru/WMlLyTzy.jpg" title="Gasai Yuno skype: yuno.gasai378"/></a>
           <a href="http://mirainikki8.rolka.su/profile.php?id=8" target="_blank"><img src="http://f5.s.qip.ru/WMlLyTzx.jpg" title="Akiyama Ray skype: ray.aki"/></a>

           </div>
           <!-- Конец блока АМС -->
          </td>
         </tr>
         <tr>
          <td style="height: 140px;">
           <!-- Блок модераторов -->
	   <h3>Модераторы</h3> 
           <div class="faces">
	   <a href="ссылка_на_профиль"><img src="http://f5.s.qip.ru/WMlLyTzz.png" target="_blank" title="Место для твоего аватара"/></a>
           <a href="ссылка_на_профиль"><img src="http://f5.s.qip.ru/WMlLyTzz.png" target="_blank" title="Место для твоего аватара"/></a>
           <a href="ссылка_на_профиль"><img src="http://f5.s.qip.ru/WMlLyTzz.png" target="_blank" title="Место для твоего аватара"/></a>
           </div>
           <!-- Конец блока модераторов -->
	  </td>
	 </tr>
	</tbody>
       </table>
      <!-- Конец первой вкладки -->
     </div>
     <div id="sm2" class="submenutext">
      <!-- Вторая вкладка -->
      <div id="links_navi">
      <table class="import_tab">
	<tbody>
         <tr>
          <td colspan="3"><h3>Навигация</h3></td>
         </tr>
	 <tr>
	  <td style="width: 33%;">
           <!-- Блок навигации (левая колонка) -->
           <i>для гостей и новоприбывших ~</i><br/><br/>

	   <a href="http://mirainikki8.rolka.su/viewtopic.php?id=3">| Сюжет |</a>
	   <a href="http://mirainikki8.rolka.su/viewtopic.php?id=8">| Правила форума |</a>
	   <a href="http://mirainikki8.rolka.su/viewtopic.php?id=26">| Нужные персонажи |</a>
	   <a href="http://mirainikki8.rolka.su/viewtopic.php?id=24">| Список персонажей |</a>
	   <a href="http://mirainikki8.rolka.su/viewtopic.php?id=2">| Вопросный лист |</a>
	   <a href="http://mirainikki8.rolka.su/viewtopic.php?id=5#p5">| Шаблон анкеты |</a>
           <!-- Конец навигации (левая колонка) -->
	  </td>
	  <td style="width: 34%;">
           <!-- Блок навигации (центральная колонка) -->
           <div style="width: 98%; margin: 1%; height: 200px; overflow-y: auto;">

	    <a href="ссылка_на_тему">Название_ссылки_1</a>
	    <a href="ссылка_на_тему">Название_ссылки_2</a>
	    <a href="ссылка_на_тему">Название_ссылки_3</a>
	    <a href="ссылка_на_тему">Название_ссылки_4</a>

           </div>
           <!-- Конец блока навигации (центральная колонка) -->
	  </td>
	  <td style="width: 33%;">
           <!-- Блок навигации (правая колонка) -->
           <i>Навигация по форуму</i><br/><br/>

	   <a href="http://mirainikki8.rolka.su/viewtopic.php?id=10">| Объявления |</a>
	   <a href="http://mirainikki8.rolka.su/viewtopic.php?id=27"> | Блог администратора |</a>
	   <a href="http://mirainikki8.rolka.su/viewtopic.php?id=17">| Учет ролевых игр |</a>
	   <a href="http://mirainikki8.rolka.su/viewtopic.php?id=6">| Мастерская аватаров |</a>
	   <a href="http://mirainikki8.rolka.su/viewtopic.php?id=29#p301">| Поиск партнеров для ролевой |</a>
	   <a href="http://mirainikki8.rolka.su/viewtopic.php?id=11">| Отсутствие |</a>
	   <a href="http://mirainikki8.rolka.su/pages/iyul_1"><strong>Прогноз погоды</strong></a>
           <!-- Конец навигации (правая колонка) -->
	  </td>
	 </tr>
	</tbody>
       </table>
       </div>
      <!-- Конец второй вкладки -->
     </div>
     <div id="sm3" class="submenutext">
      <!-- Третья вкладка -->

       <table class="import_tab">
	<tbody>
	 <tr>
	  <td style="width: 33%;">
           <!-- Блок канона -->
	   <h3>Канон</h3> 

           <div class="faces">
	   <a href="ссылка_на_тему"><img src="http://f5.s.qip.ru/WMlLyTzz.png" title="Имя_1"/></a>
	   <a href="ссылка_на_тему"><img src="http://f5.s.qip.ru/WMlLyTzz.png" title="Имя_2"/></a>
	   <a href="ссылка_на_тему"><img src="http://f5.s.qip.ru/WMlLyTzz.png" title="Имя_3"/></a>
           </div>
           <!-- Конец блока канона -->
	  </td>
	  <td style="width: 34%;">
           <!-- Блок нужных в игру -->
	   <h3>Срочно требуются в игру</h3>

       <div class="face-view">
       <table class="import_tab">
	<tbody>
	 <tr>
	  <td style="width: 25%;">

	   <img src="http://f5.s.qip.ru/WMlLyTzz.png"/> Имя_1

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

	   <img src="http://f5.s.qip.ru/WMlLyTzz.png"/> Имя_2

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

	   <img src="http://f5.s.qip.ru/WMlLyTzz.png"/> Имя_3

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

	   <img src="http://f5.s.qip.ru/WMlLyTzz.png"/> Имя_4

	  </td>
	 </tr>
	</tbody>
       </table>
       </div>
           <!-- Конец блока нужных -->
	  </td>
	  <td style="width: 33%;">
           <!-- Блок заявок -->
	   <h3>Последние заявки</h3> 
       <div class="face-view">
       <table class="import_tab">
	<tbody>
	 <tr>
	  <td style="width: 30%;">

	   <img src="http://f5.s.qip.ru/WMlLyTzz.png"/>

	  </td>
	  <td style="width: 70%; text-align: left; vertical-align: middle;">

	   Текст_1
           <br/>
           Текст_2

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

	   <img src="http://f5.s.qip.ru/WMlLyTzz.png"/>

	  </td>
	  <td style="text-align: left; vertical-align: middle;">

	   Текст_1
           <br/>
           Текст_2

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

	   <img src="http://f5.s.qip.ru/WMlLyTzz.png"/>

	  </td>
	  <td style="text-align: left; vertical-align: middle;">

	   Текст_1
           <br/>
           Текст_2

	  </td>
	 </tr>
	</tbody>
       </table>
      </div>
           <!-- Конец блока заявок -->
	  </td>
	 </tr>
	</tbody>
       </table>
      <!-- Конец третьей вкладки -->
     </div>
     <div id="sm4" class="submenutext">
      <!-- Четвертая вкладка -->
      <table class="import_tab">
	<tbody>
	 <tr>
	  <td style="width: 33%;">
           <!-- Блок конкурсов -->
	   <h3>Конкурсы</h3> 
            <div style="width: 100%; height: 155px; overflow-y: auto;">

	     Название / описание / ссылка (поддержка автопрокрутки)

            </div>
           <!-- Конец блока конкурсов -->
	  </td>
	  <td style="width: 34%;">
           <!-- Блок гордости -->
	   <h3>Наша гордость</h3>
      <table class="import_tab">
	<tbody>
	 <tr>
	  <td colspan="2">
           <!-- Блок активистов -->
           <h4>Активисты</h4>
           <div class="face-view">

            <img src="http://f5.s.qip.ru/WMlLyTzz.png" title="Имя_1"/>
            <img src="http://f5.s.qip.ru/WMlLyTzz.png" title="Имя_2"/>
            <img src="http://f5.s.qip.ru/WMlLyTzz.png" title="Имя_3"/>
            <img src="http://f5.s.qip.ru/WMlLyTzz.png" title="Имя_4"/>
            <img src="http://f5.s.qip.ru/WMlLyTzz.png" title="Имя_5"/>

           </div>
           <!-- Конец блока активистов -->
	  </td>
         </tr>
         <tr>
	  <td style="width: 50%;">
           <!-- Блок лучшего игрока -->
	   <h4>Игрок недели</h4>

	   <img class="big_image" src="http://f5.s.qip.ru/WMlLyTzz.png" title="Имя"/>

           <!-- Конец блока -->
	  </td>
	  <td style="width: 50%;">
           <!-- Блок лучшего поста -->
	   <h4>Пост недели</h4> 

	   <img class="big_image" src="http://f5.s.qip.ru/WMlLyTzz.png" title="Имя"/>

           <!-- Конец блока лучшего поста -->
	  </td>
	 </tr>
	</tbody>
       </table>
           <!-- Конец блока гордости -->
	  </td>
	  <td style="width: 33%;">
           <!-- Блок вне игры -->
	   <h3>Вне игры</h3> 

       <div class="face-view">
       <table class="import_tab">
	<tbody>
	 <tr>
	  <td style="width: 30%;">

	   <img src="http://f5.s.qip.ru/WMlLyTzz.png"/>

	  </td>
	  <td style="width: 70%; text-align: left; vertical-align: middle;">

	   Текст_1
           <br/>
           Текст_2

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

	   <img src="http://f5.s.qip.ru/WMlLyTzz.png"/>

	  </td>
	  <td style="text-align: left; vertical-align: middle;">

	   Текст_1
           <br/>
           Текст_2

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

	   <img src="http://f5.s.qip.ru/WMlLyTzz.png"/>

	  </td>
	  <td style="text-align: left; vertical-align: middle;">

	   Текст_1
           <br/>
           Текст_2

	  </td>
	 </tr>
	</tbody>
       </table>
      </div>
           <!-- Конец блока вне игры -->
	  </td>
	 </tr>
	</tbody>
       </table>
      <!-- Конец четвертой вкладки -->
     </div>
    </div>
   </td>
  </tr>
 </tbody>
</table>
<!-- Конец основной таблицы -->

Примечание: да забирайте, мне она зачем.. Ток знайте, что у вас сейчас на форуме стоят разные настройки с разных таблиц с вкладками. Так что если решите поставить/оставить - лишнее надо будет удалить. Иначе возможны разные варианты "поломки": "у меня все расползлось" ну и т.д...

Amy Ni написал(а):

Хоть посмотрю, как это делают профессионалы :3

Я любитель.

Отредактировано Rion Leonheart (Пн, 23 Июн 2014 13:08:48)

+1

904

Rion Leonheart

1) Эскиз
http://sf.uploads.ru/t/09BCI.png
http://se.uploads.ru/t/pmsCT.png
http://se.uploads.ru/t/67kbW.png
2) Ссылка
http://cwmor.rolbb.ru/
3) Указать необходимые прокрутки, всплывающие окна, границы таблиц и т.п.
Таблица без границ.
На эскизе, вроде, всё есть.

хотелось бы, чтобы ссылки выглядели примерно так

http://sf.uploads.ru/t/vlnWj.png

Отредактировано Confetti (Чт, 26 Июн 2014 19:58:07)

0

905

Приветствую!
Мне нужно создать объявление. Вот эскиз:

https://pp.vk.me/c614824/v614824484/14d6c/qEHh-pGZSHo.jpg

Шапка будет на кликабельна, просто картинка вверху. Кнопки будут представлены картинками, всего их 10, по 5 с каждой стороны. Там где у меня исчеркано линией там у меня будет текст, картинки и т.д., ну т.е. блок с информацией. И сразу тут вопрос : можно ли сделать так, чтобы информация,, когда ее будет много, шла бы не по границам этих кнопок, а заходила бы под них(там помечено кружочками). Это если можно.

Форум

0

906

Confetti, Ondulation, придется подождать. Рабочие дни.. В пн/вт я ваш.

0

907

Rion Leonheart, хорошо)

0

908

И добрался я до вас только счас, поэтому только одна таблица...

Ondulation, попробуйте такую для начала:

Показать код
Код:
<style type="text/css">
#pun-announcement h2 {display: none}
#pun-announcement .container {padding-top: 1em}

#menu-left, #menu-right {
  margin-top: 0;
  margin-bottom: 0.3em
  }

#menu-left {
  float: left;
  margin-left: 0;
  margin-right: 0.3em
  }

#menu-right {
  float: right;
  margin-left: 0.3em;
  margin-right: 0
  }

#menu-left span, #menu-right span {
  display: block;
  margin: 0 0 5px 0;
  padding: 0;
  width: 172px;
  height: 77px
  }

#submenu {
  width: 100%;
  padding: 0
  }

.submenutext {
  display: none;
  text-align: center;
  height: auto
  }
</style>



<table style="width: 100%; border: none;" cellpadding="0" cellspacing="0">
 <tbody>
  <tr>
   <td><img src="ссылка на картинку"/></td>
  </tr>
  <tr>
   <td id="MenuTxT" align="center" valign="top">
    <div id="menu-left">
     <span alt="#sm1" style="cursor: pointer;">Кнопка 1</span>
     <span alt="#sm2" style="cursor: pointer;">Кнопка 2</span>
     <span alt="#sm3" style="cursor: pointer;">Кнопка 3</span>
     <span alt="#sm4" style="cursor: pointer;">Кнопка 4</span>
     <span alt="#sm5" style="cursor: pointer;">Кнопка 5</span>
    </div>
    <div id="menu-right">
     <span alt="#sm6" style="cursor: pointer;">Кнопка 6</span>
     <span alt="#sm7" style="cursor: pointer;">Кнопка 7</span>
     <span alt="#sm8" style="cursor: pointer;">Кнопка 8</span>
     <span alt="#sm9" style="cursor: pointer;">Кнопка 9</span>
     <span alt="#sm10" style="cursor: pointer;">Кнопка 10</span>
    </div>
    <div id="submenu">
     <div id="sm1" class="submenutext" style="display:block;">

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

     </div>
     <div id="sm2" class="submenutext">

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

     </div>
     <div id="sm3" class="submenutext">

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

     </div>
     <div id="sm4" class="submenutext">

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

     </div>
     <div id="sm5" class="submenutext">

Контент пятой кнопки

     </div>
     <div id="sm6" class="submenutext">

Контент шестой кнопки

     </div>
     <div id="sm7" class="submenutext">

Контент седьмой кнопки

     </div>
     <div id="sm8" class="submenutext">

Контент восьмой кнопки

     </div>
     <div id="sm9" class="submenutext">

Контент девятой кнопки

     </div>
     <div id="sm10" class="submenutext">

Контент десятой кнопки

     </div>
    </div>
   </td>
  </tr>
 </tbody>
</table>



<script type="text/javascript">
$(document).ready(function() {
$("td.#MenuTxT div.submenutext").hide();
$("#menu-left span:first").addClass("tabactive").show();
$("td.#MenuTxT div.submenutext:first").show();
$("div.#menu-left span, div.#menu-right span").click(function() {
    $("div.#menu-left span, div.#menu-right span").removeClass("tabactive");
    $(this).addClass("tabactive");
    $("td.#MenuTxT div.submenutext").hide();
    var activeDiv = $(this).attr("alt");
    $("div."+activeDiv).fadeIn();
    return false; });
});
</script>

#menu-left span, #menu-right span {
  display: block;
  margin: 0 0 5px 0;
  padding: 0;
  width: 172px;
  height: 77px
  }

Синим - ширина кнопки,
Зеленым - высота.

Отредактировано Rion Leonheart (Вт, 1 Июл 2014 18:55:46)

0

909

Доброй ночи. Таблицу мне делать не нужно, мне нужно её настроить(я уже измучился).
Буду очень-очень сильно благодарен.
Вот форум http://testovik02.rolka.su/
Таблица выглядит так, и она кривая.

Картинка

http://s019.radikal.ru/i618/1407/92/74de31ec79eb.jpg

Нужно, чтобы выглядело как-то вот так:

Картинка

http://i017.radikal.ru/1407/0c/ba5049f5ebb0.jpg

Сможете настроить её мне? Ещё у меня кнопки не переключаются на этом тестовике почему-то. Возможно, что что-то с кодом не так? (На оригинальном форуме код такой же, но там всё переключается)
В общем, сможете сделать, чтобы было ровно? Пожалуйста.

Коды
html-верх

<!--Стиль таблицы слайдера-->
<style>
.container1 {width: 410px; margin: 0 auto; padding: 0;}
ul.tabs {
    margin: 0;
    padding: 0;
    float: left;
    list-style: none;
    height: 40px;
    width: 400px;
    width: 100%;
}
ul.tabs li {
    float: left;
    margin: 0;
    padding: 0;
    height: 40px;
    line-height: 40px;
    border: 0px;
border-top: 0px dotted #000000;
    margin-bottom: -2px;
    background: url();
    overflow: hidden;
    position: relative;
}

ul.tabs li a {
    text-decoration: none;
    color: transparent;
    display: block;
    padding: 0 5px;
    background: url();
    outline: none;
}

ul.tabs li a:hover {
       background: url();
    border-bottom: 0px solid #000000;
}   

html ul.tabs li.active  {
    background: url();   
    border-bottom: 0px solid #000000;

html ul.tabs li.active a:hover  {
        background: url();
    border-bottom: 0px ;
}

.tab_container1 {
    clear: both;
    float: left;
    width: 400px;
    height: 310px;
    background-image : url();   
}

.tab_content {
    padding: 5px;
}

.tab_content h2 {
    font-weight: normal;
    padding-bottom: 0px;
}
</style>
<!--Конец-->

Объявление

<center><table layout=fixed height="300" width="933" background="http://s019.radikal.ru/i643/1407/86/8a7ab283b5a0.png" center no-repeat;>
<tr><td height="290" width="250" >
<div style="width: 180px; height: 265px; overflow: auto;  text-align: center!important; margin-left:10px;"><br>Уважаемые игроки, не забываем кликать ТОПы!

<br><!-- Top.Roleplay.Ru -->
<script type="text/javascript" language="javascript">
var topRPGc="<img src='http://top.roleplay.ru/cgi-bin/iv.cgi?a=ins&id=9771&rnd=" + Math.random();
topRPGc += "&r="+escape(document.referrer)+"' width='1' height='1' border='0'><a href='http://top.roleplay.ru/9771' title='Рейтинг Ролевых Ресурсов - RPG TOP' target='top_'>"+
"<img src='http://img.rpgtop.su/88x31x11x1.gif' alt='Рейтинг Ролевых Ресурсов - RPG TOP' border='0' width='88' height='31'></a> ";
document.write(topRPGc);
</script>
<noscript>
<img src='http://top.roleplay.ru/cgi-bin/iv.cgi?a=ins&id=9771' width='1' height='1' border='0'><a href='http://top.roleplay.ru/9771' target='_top'><img src='http://img.rpgtop.su/88x31x11x1.gif' alt='Рейтинг Ролевых Ресурсов - RPG TOP' border='0' width='88' height='31'></a>
</noscript>
<!-- /Top.Roleplay.Ru -->
<br>05.05.14 <b>Внимание!</b> Администрация наконец-то расшевелилась и подготовила для большинства участников глобальный квест. Ознакомиться с ними Вы можете <a href="http://wolvessignatureblood.rolka.su/viewtopic.php?id=6835#p381094">>>здесь<<.</a> Для грядущего квеста остро требуются патрули ЯТ, СК и ПС. Если Вы желаете занять свободные должности, пишите в гостевую. Возможно упрощённое принятие анкеты (по-минимуму в каждом пункте) в том случае, если Вы обещаете полноценную игру.

</div>
</td>
<td height="280" width="390"><ul class="tabs">
    <li class="active"><a href="#tab1"><img src="http://s5.uploads.ru/WPT7Q.png"></a></li>
    <li><a href="#tab2"><img src="http://s4.uploads.ru/ZPkLq.png"></a></li>
    <li><a href="#tab3"><img src="http://s5.uploads.ru/dpIia.png"></a></li>
<li><a href="#tab4"><img src="http://s4.uploads.ru/RPZQd.png"></a></li>
</ul>
      <div class="tab_container1">
<div style="display: block;" id="tab1" class="tab_content">
<div style="width: 390px; height: 250px; overflow: auto;  text-align: left!important;">
<center><li><b>ВРЕМЯ ГОДА</b></li>
<br><li><i>Время листопадов, на нашем языке - поздний октябрь.</i></li>
<br><li><b>ВРЕМЯ СУТОК</b></li>
<br><li><i>Ночь. 00:00 - 03:00.</i></li>
<br><li><b>ПОГОДА</b></li>
<table layout=fixed width=100%>
<tr>
<td><center>
<img src="http://s019.radikal.ru/i629/1403/b4/981ff26e727e.png" border="0" />
<i>Дождь. Гроза.</i></center></td>
<td><center><img src="http://s020.radikal.ru/i722/1403/09/1aa25a8fad46.png" border="0" />
<i>Дождь. Ураган.</i></center></td>
</tr>
</table>
<br><li><i>Температура скачет от 17 до 12 градусов.</i>
<br><i>В этот октябрь природа разбушевалась не на шутку. Что на территории стай, что на территории нежити стоит сильный ветер и дождь. Вторым повезло больше, к ним пришёл в добавок ещё и сильный ураган, вырывающий некоторые деревья с корнем, но дождь у них меньше.</i></li></center></div>
</div>
<div style="display: none;" id="tab2" class="tab_content">
<div style="width: 390px; height: 250px; overflow: auto;  text-align: left!important;">
<center><li><b>АДМИН-СОСТАВ</b></li>
<br><li><a href="http://wolvessignatureblood.rolka.su/profile.php?id=2"><img src="http://i069.radikal.ru/1403/3c/28b2c9d1ceec.png" title="Администратор Инверно. Создатель ВПК и главный руководитель." border=0></a>
<a href="http://wolvessignatureblood.rolka.su/profile.php?id=436"><img src="http://s019.radikal.ru/i633/1403/53/15632d6a4009.png" title="Администратор Умка. Главный руководитель и заместитель Инверно." border=0></a>
<a href="http://wolvessignatureblood.rolka.su/profile.php?id=2114"><img src="http://s43.radikal.ru/i099/1406/44/4fa3ad377165.png" title="Администратор Атрокс. Дизайнер и ответственный за техническое состояние форума." border=0></a>
<br><a href="http://wolvessignatureblood.rolka.su/profile.php?id=2104"><img src="http://s004.radikal.ru/i208/1405/ed/3067c87cd6dd.png" title="Администратор Коннор. Квестоплёт, ответственный за развитие форума и анкеты." border=0></a>
<a href="http://wolvessignatureblood.rolka.su/profile.php?id=1200"><img src="http://s019.radikal.ru/i605/1403/1a/82a6d44fb513.png" title="Администратор Амнез. Ответственный за проверку анкет и текстовое содержание форума." border=0></a></li></center>
<br><br></div>
</div>
<div style="display: none;" id="tab3" class="tab_content">
<center><b>НАШИ ПАРТНЁРЫ</b>
</center><br>
<br>...

<br>
</div>
<div style="display: none;" id="tab4" class="tab_content">
<div style="width: 390px; height: 260px; overflow: auto;  text-align: center!important;">
<br>Здесь можешь быть ты!
</div>
</div>
</div>
      </div>
</td>
<td height="280" width="245" ><center>
<ul><li><a href="http://wolvessignatureblood.rolka.su/viewtopic.php?id=6158&p=15#p378241">Гостевая книга</a></li>
<br><li><a href="http://wolvessignatureblood.rolka.su/viewtopic.php?id=6159#p345598">Требуются в игру</a></li>
<br> <ul><li><a href="http://wolvessignatureblood.rolka.su/viewtopic.php?id=6152">Техпомощь</a></li>
<br><li><a href="http://wolvessignatureblood.rolka.su/viewtopic.php?id=7#p14">Сюжет</a></li>
<br><li><a href="http://wolvessignatureblood.rolka.su/viewtopic.php?id=6160#p345603">Описание стай</a></li>
<br><li><a href="http://wolvessignatureblood.rolka.su/viewtopic.php?id=6743">Список персонажей</a></li>
<br><li><a href="http://wolvessignatureblood.rolka.su/viewtopic.php?id=16#p24">Шаблон анкеты</a></li>

<br><li><a href="http://wolvessignatureblood.rolka.su/viewtopic.php?id=5692#p321446">Запись в квест-игры</a></li>
<br><li><a href="http://wolvessignatureblood.rolka.su/viewtopic.php?id=6181#p345919">Готовые сюжетные линии</a></li></ul></center></td></tr>
</table></center>

Отредактировано Aatrox (Ср, 2 Июл 2014 01:54:49)

0

910

Aatrox, доброго.

Развернуть правку

В общем, вкладки не переключаются на тестовике, потому что отсутствует скрипт их переключения, видимо, на оригинальном форуме он все же присутствует, раз там все ОК, но на всякий случай, это вот этот кусок из html-низа:

Код:
<!-- Переключение вкладок -->
<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>

Далее насчет кривости, пробуйте обновить часть из html-верха на:

Код:
<!-- Стиль таблицы с вкладками -->
<style>
.container1 {
  width: 410px;
  margin: 0 auto;
  padding: 0;
  }

ul.tabs {
  float: left;
  list-style: none;
  width: auto;
  height: 40px;
  margin: 0;
  margin-left: 7px;
  padding: 0;
  }

ul.tabs li {
  position: relative;
  float: left;
  height: 40px;
  margin: 0;
  margin-bottom: -2px;
  padding: 0;
  line-height: 40px;
  border: none;
  overflow: hidden;
  }

ul.tabs li a {
  display: block;
  padding: 0 5px;
  text-decoration: none;
  color: transparent;
  }

ul.tabs li a:hover {
  background: transparent;
  border: none;
  }

html ul.tabs li.active {
  background: transparent;
  border: none;
  }

html ul.tabs li.active a:hover {
  background: transparent;
  border: none;
  }

.tab_container1 {
  clear: both;
  float: left; 
  width: 415px;
  height: 260px;
  margin-top: 15px;
  margin-left: 2px;
  text-align: center;
  background: transparent;
  }

.tab_content {
  width: 98%;
  padding: 5px 1%;
  }

.tab_content h3 {
  margin: 5px 0;
  font-weight: bold;
  text-align: center;
  text-transform: uppercase;
  }

#pun-announcement .container #links-men a {
  display: block;
  margin-bottom: 10px;
  text-align: center;
  font: normal normal 14px 'palatino linotype', serif!important;
  }
</style>
<!-- Конец -->

А объявление на такое:

Код:
<table style="width: 933px; height: 324px; background: transparent url(http://s019.radikal.ru/i643/1407/86/8a7ab283b5a0.png) center top no-repeat; border: none;" cellspacing="0" cellpadding="0">
 <tr>
  <td style="width: 255px; text-align: left; vertical-align: top;">
   <div style="width: 230px; height: 268px; margin: 42px 0 0 10px; padding: 2px 5px; overflow-y: auto; text-align: center;">

   Уважаемые игроки, не забываем кликать ТОПы!<br/><br/>
   <!-- Top.Roleplay.Ru -->
   <script type="text/javascript" language="javascript">
   var topRPGc="<img src='http://top.roleplay.ru/cgi-bin/iv.cgi?a=ins&id=9771&rnd=" + Math.random();
   topRPGc += "&r="+escape(document.referrer)+"' width='1' height='1' border='0'><a href='http://top.roleplay.ru/9771' title='Рейтинг Ролевых Ресурсов - RPG TOP'   target='top_'>"+"<img src='http://img.rpgtop.su/88x31x11x1.gif' alt='Рейтинг Ролевых Ресурсов - RPG TOP' border='0' width='88' height='31'></a> ";
   document.write(topRPGc);
   </script>
   <noscript>
   <img src='http://top.roleplay.ru/cgi-bin/iv.cgi?a=ins&id=9771' width='1' height='1' border='0'><a href='http://top.roleplay.ru/9771' target='_top'><img src='http://img.rpgtop.su/88x31x11x1.gif' alt='Рейтинг Ролевых Ресурсов - RPG TOP' border='0' width='88' height='31'></a>
   </noscript>
   <!-- /Top.Roleplay.Ru -->
   <br/><br/>05.05.14 <b>Внимание!</b> Администрация наконец-то расшевелилась и подготовила для большинства участников глобальный квест. Ознакомиться с ними Вы можете <a href="http://wolvessignatureblood.rolka.su/viewtopic.php?id=6835#p381094">>>здесь<<.</a> Для грядущего квеста остро требуются патрули ЯТ, СК и ПС. Если Вы желаете занять свободные должности, пишите в гостевую. Возможно упрощённое принятие анкеты (по-минимуму в каждом пункте) в том случае, если Вы обещаете полноценную игру.

   </div>
  </td>
  <td style="width: 423px;">
   <!-- Контейнер с вкладками -->
    <ul class="tabs">
    <li class="active"><a href="#tab1"><img src="http://s5.uploads.ru/WPT7Q.png"/></a></li>
    <li><a href="#tab2"><img src="http://s4.uploads.ru/ZPkLq.png"/></a></li>
    <li><a href="#tab3"><img src="http://s5.uploads.ru/dpIia.png"/></a></li>
    <li><a href="#tab4"><img src="http://s4.uploads.ru/RPZQd.png"/></a></li>
    </ul>

    <div class="tab_container1">
     <div style="display: block;" id="tab1" class="tab_content">
      <div style="width: 100%; height: 250px; overflow-y: auto;">

       <h3>Время года</h3>
       <i>Время листопадов, на нашем языке - поздний октябрь.</i>
       <h3>Время суток</h3>
       <i>Ночь. 00:00 - 03:00.</i>
       <h3>Погода</h3>
       <!-- Таблица с погодой -->
        <table style="width: 100%; border: none;" cellspacing="0" cellpadding="0">
         <tbody>
          <tr>
           <td><img src="http://s019.radikal.ru/i629/1403/b4/981ff26e727e.png" border="0"/><br/><i>Дождь. Гроза.</i></td>
           <td><img src="http://s020.radikal.ru/i722/1403/09/1aa25a8fad46.png" border="0"/><br/><i>Дождь. Ураган.</i></td>
          </tr>
         </tbody>
        </table>
       <!-- Конец Таблицы с погодой -->
       <br/>
       <p><i>Температура скачет от 17 до 12 градусов.</i></p>
       <p><i>В этот октябрь природа разбушевалась не на шутку. Что на территории стай, что на территории нежити стоит сильный ветер и дождь. Вторым повезло больше, к ним пришёл в добавок ещё и сильный ураган, вырывающий некоторые деревья с корнем, но дождь у них меньше.</i></p>

      </div>
     </div>

     <div style="display: none;" id="tab2" class="tab_content">
      <div style="width: 100%; height: 250px; overflow-y: auto;">

      <h3>Админ-состав</h3>
      <a href="http://wolvessignatureblood.rolka.su/profile.php?id=2"><img src="http://i069.radikal.ru/1403/3c/28b2c9d1ceec.png" title="Администратор Инверно. Создатель ВПК и главный руководитель." border="0"></a>
      <a href="http://wolvessignatureblood.rolka.su/profile.php?id=436"><img src="http://s019.radikal.ru/i633/1403/53/15632d6a4009.png" title="Администратор Умка. Главный руководитель и заместитель Инверно." border="0"></a>
      <a href="http://wolvessignatureblood.rolka.su/profile.php?id=2114"><img src="http://s43.radikal.ru/i099/1406/44/4fa3ad377165.png" title="Администратор Атрокс. Дизайнер и ответственный за техническое состояние форума." border="0"></a>
      <br/>
      <a href="http://wolvessignatureblood.rolka.su/profile.php?id=2104"><img src="http://s004.radikal.ru/i208/1405/ed/3067c87cd6dd.png" title="Администратор Коннор. Квестоплёт, ответственный за развитие форума и анкеты." border="0"></a>
      <a href="http://wolvessignatureblood.rolka.su/profile.php?id=1200"><img src="http://s019.radikal.ru/i605/1403/1a/82a6d44fb513.png" title="Администратор Амнез. Ответственный за проверку анкет и текстовое содержание форума." border="0"></a>

      </div>
     </div>

     <div style="display: none;" id="tab3" class="tab_content"> 
      <h3>Наши партнёры</h3>
      <br/>
      ...

     </div>

     <div style="display: none;" id="tab4" class="tab_content">
      <div style="width: 100%; height: 250px; overflow-y: auto;">

       Здесь можешь быть ты!

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

   </td>
   <td style="width: 255px; vertical-align: top;">
    <div id="links-men" style="margin-top: 52px;">

     <a href="http://wolvessignatureblood.rolka.su/viewtopic.php?id=6158&p=15#p378241">Гостевая книга</a>
     <a href="http://wolvessignatureblood.rolka.su/viewtopic.php?id=6159#p345598">Требуются в игру</a>
     <a href="http://wolvessignatureblood.rolka.su/viewtopic.php?id=6152">Техпомощь</a>
     <a href="http://wolvessignatureblood.rolka.su/viewtopic.php?id=7#p14">Сюжет</a>
     <a href="http://wolvessignatureblood.rolka.su/viewtopic.php?id=6160#p345603">Описание стай</a>
     <a href="http://wolvessignatureblood.rolka.su/viewtopic.php?id=6743">Список персонажей</a>
     <a href="http://wolvessignatureblood.rolka.su/viewtopic.php?id=16#p24">Шаблон анкеты</a>
     <a href="http://wolvessignatureblood.rolka.su/viewtopic.php?id=5692#p321446">Запись в квест-игры</a>
     <a href="http://wolvessignatureblood.rolka.su/viewtopic.php?id=6181#p345919">Готовые сюжетные линии</a>

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

Если усе же все равно чо-то куда-то сползло, (я частенько не тестирую на кроссбраузерность за отсутствием свободного времени), отпишитесь. Желательно прилагать скриншот с проблемой и "имя" браузера..


Confetti, солнце, я про тебя помню. Завтра после работы доделаю.

+1

911

Rion Leonheart, жду  ^^

0

912

Rion Leonheart
Вы просто волшебник *.*
Спасибо, всё работает). Огромнейшее спасибо.

0

913

Rion Leonheart, огромное спасибо! Таблица супер)

0

914

Rion Leonheart, а можно сделать так чтобы кнопки максимально касались левой и правой границ таблицы?

0

915

Ondulation, ссылку на форум с установленной таблицей? Моя так не понимат.

0

916

Confetti,

лови плюшку.

только предварительно нужно подчистить настройки нынешнего объявления

В html-верх:

Код:
<style type="text/css">
#kotey {
  width: 100%;
  margin-top: 75px;
  border: none;
  }

#kotey td {
  margin: 0;
  padding: 0;
  text-align: center;
  vertical-align: middle;
  }

#kotey h3, #menu span {
  margin: 2px 0 8px 0;
  font: bold italic 14px 'palatino linotype', serif;
  }

#kotey .navigat a {
  display: block;
  width: 160px;
  margin: 0 auto 5px auto;
  padding-bottom: 2px;
  font-family: arial, sans-serif;
  color: #b2bbaa;
  background-color: #527268;
  border-left: 2px solid #3d4d49;
  border-radius: 8px;
  }

#kotey .bann img {
  margin: 2px;
  }

#kotey .navigat a:hover {
  color: #000;
  background-color: transparent;
  border-left: 2px solid #527268;
  }

#kotey #active_pl img {
  width: 60px;
  height: 60px;
  border: none;
  margin: 2px;
  }

#kotey .verti-menya {
  width: 100%;
  overflow-y: auto;
  }

#menu {margin: 0}

#menu span {
  display: block;
  margin: 0;
  padding: 0;
  }

#menu .tabactive {
  color: #fff;
  }

#submenu {
  width: 100%;
  padding: 0;
  }

.submenutext {
  display: none;
  text-align: center;
  height: 180px;
  }
</style>

В объявление:

Код:
<table id="kotey">
 <tbody>
  <tr>
   <td style="width: 25%;">

    <!-- Блок ссылок слева -->
    <div class="navigat">
     <a href="ссылка_на_тему">Тема_0-1</a>
     <a href="ссылка_на_тему">Тема_0-2</a>
     <a href="ссылка_на_тему">Тема_0-3</a>
     <a href="ссылка_на_тему">Тема_0-4</a>
     <a href="ссылка_на_тему">Тема_0-5</a>
     <a href="ссылка_на_тему">Тема_0-6</a>
    </div>
    <!-- Конец блока ссылок слева -->

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

    <h3>Добро пожаловать на CW. Morning of Remembrance</h3>

    Дата открытия - 8 июля 2013 года
    <p>Локационная система игры</p>
    <p>Рейтинг - G</p>
    <p>Действия разворачиваются спустя много лун после событий, описанных в серии книг, а потому просим взять на заметку:</p>
    <br/>
    <p>1) в игре только одно племя;</p>
    <p>2) изменились многие церемонии и обычаи, появились новые праздники;</p>
    <p>3) одиночки в игру не принимаются;</p> 
    <p>4) разрешена регистрация мёртвых (духов-хранителей и онрё).</p>

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

    <!-- Блок ссылок справа -->
    <div class="navigat">
     <a href="ссылка_на_тему">Тема_1-1</a>
     <a href="ссылка_на_тему">Тема_1-2</a>
     <a href="ссылка_на_тему">Тема_1-3</a>
     <a href="ссылка_на_тему">Тема_1-4</a>
     <a href="ссылка_на_тему">Тема_1-5</a>
     <a href="ссылка_на_тему">Тема_1-6</a>
    </div>    
    <!-- Конец блока ссылок справа -->

   </td>
  </tr>
  <tr>
   <td rowspan="2" colspan="2" style="vertical-align: bottom;">

<!-- Таблица с вкладками -->
<table style="width: 100%; border: none;" cellpadding="0" cellspacing="0">
 <tbody>
  <tr>
   <td id="MenuTxT" align="center" valign="top">
    <div id="submenu">
     <div id="sm1" class="submenutext" style="display: block;">

      <h3>Объявления:</h3>
      <div class="verti-menya" style="height: 150px;">

      <b>Новости на 2 июня</b>
      <p>Большинство старых тем перенесено в архив. Колючка взялась-таки за ролевую.</p>
      <p>В ближайшее время будет дополнена информация об игровом мире, откорректировано описание локаций, внесена система охоты и боя, программа, по которой следует обучать оруженосцев и много-много других вкусностей :3</p>
      <p>Не стоит ожидать того, что проект возобновит свою работу ранее, чем через неделю или две. Тише едешь - дальше будешь.</p>

      </div>
     </div>
     <div id="sm2" class="submenutext">

     <table style="width: 100%; border: none;" cellpadding="0" cellspacing="0">
      <tbody>
       <tr>
        <td style="width: 50%; vertical-align: top;">

         <h3>Погода и время:</h3>

         <img style="width: 30px; height: 30px;" src="ссылка_на_картинку"/><br/>

         В игре 31 луна с момента основания племени, 
         <p><b>62</b> день Зелёных Листьев</p>
         <p> (07:00-10:00)</p>
         <p>+30°C, Солнечно</p>

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

         <h3>События в игре:</h3>
         <div class="verti-menya" style="height: 150px;">

          Хоть и многие коты Вечного племени были против того, чтобы Колючка заняла должность глашатая, предводитель своего решения не изменил. Новоиспеченная глашатая решилась на сделку с онрё, а потому отправилась к Холму Предателя. Тем временем большая часть воителей уже проснулась, а Беломордый Демон начал объявлять патрули и раздавать воинам прочие мелкие указания.

         </div>

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

     </div>
     <div id="sm3" class="submenutext">

     <table style="width: 100%; border: none;" cellpadding="0" cellspacing="0">
      <tbody>
       <tr>
        <td style="width: 50%; vertical-align: top;">

         <h3>Пост недели:</h3>

         <img style="width: 150px; height: 60px;" src="ссылка_на_картинку"/>

         <p>Глаза слипались, желания что-либо делать не было. Впрочем, как и всегда. Большая часть лагеря уже принялась за работу и позабыла о сне, а Колючка только-только поднялась с подстилки. Погодка была не очень хорошая, ибо жара стояла ужасная. etc</p>

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

        <div id="active_pl">
         <a href='http://cwmor.0pk.ru/profile.php?id=31' target='_blank' title='Победитель рекламного состязания'><img src='http://s4.uploads.ru/MbPeE.png' alt='Победитель рекламного состязания'/></a>
         <a href='http://cwmor.0pk.ru/profile.php?id=16' target='_blank' title='Победитель конкурса квестоплётов'><img src='http://s4.uploads.ru/FJmZ0.png' alt='Победитель конкурса квестоплётов'/></a>
         <a href='http://cwmor.0pk.ru/profile.php?id=10 target='_blank' title='Победитель викторины'><img src='http://s5.uploads.ru/argZ9.png' alt='Победитель викторины'/></a>
         </div>

         <div class="verti-menya" style="height: 110px;">

          Текст

         </div>

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

     </div>
    </div>
   </td>
  </tr>
  <tr>
   <td>
    <div id="menu" align="center">
     <table style="width: 60%; border: none;" cellpadding="0" cellspacing="0">
      <tbody>
       <tr>
        <td style="width: 20%;"><span alt="#sm1" style="cursor: pointer;">Новости</span></td>
        <td style="width: 20%;"><span alt="#sm2" style="cursor: pointer;">В игре</span></td>
        <td style="width: 20%;"><span alt="#sm3" style="cursor: pointer;">Лучшие</span></td>
       </tr>
      </tbody>
     </table>
    </div>
   </td>
  </tr>
 </tbody>
</table>
<!-- Конец Таблицы с вкладками -->

   </td>
   <td>

    <h3>Партнёры:</h3>
     <div class="bann">
    <!-- Блок баннеров партнеров -->
     <a href="http://warriorssupport.ru/" target="_blank"><img src="http://uploads.ru/i/H/1/P/H1Pfw.gif"></a> 
     <a href="http://cwbh.rusff.ru/" target="_blank"><img src="http://s5.uploads.ru/8IAGv.gif"title="Cats Warriors. Brave hearts"border="0"width="88" height="31"></a>   
     <a href="http://rivercw.rolka.su/" target="_blank"><img src="http://s5.hostingkartinok.com/uploads/images/2013/07/db3eab1ccc2831488b163e1a22b2270f.gif" width="88" height="31" alt="Коты-Воители Река Истории" border="0"></a> 
     <a href="http://cwis.spybb.ru/" target="_blank"><img src="http://s5.uploads.ru/FwoQU.png" border="0" alt="Игра Стихий!"></a>
    <!-- Конец блока баннеров партнеров -->
    </div>

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

    <h3>Каталоги и ТОПы:</h3>
     <div class="bann">
    <!-- Блок баннеров топов и каталогов -->
     <a href="http://zephyr.f-rpg.ru/"><img src="http://s8.uploads.ru/q3zX5.png" alt="Зефир, помощь ролевым" title="Зефир, помощь ролевым"/></a>
     <a href="http://reilana.mybb.ru/"><img src="http://uploads.ru/t/n/d/S/ndS05.gif"/></a>

    <!-- Конец блока топов и каталогов -->
    </div>

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

0

917

Rion Leonheart,
http://warriorscatcats.rolka.su/misc.php?action=rules - форум

Хотелось бы, чтобы кнопки слева и справа больше примыкали к границе таблице. Ну или что-нибудь другое придумать, чтобы в контентах было больше места для информации.

0

918

Ondulation,

ну обновите на такую

развернуть
Код:
<style type="text/css">
#pun-rules .info .container {
  padding: 0em;
  outline: 1px solid red;
  }

#pun-announcement h2 {display: none}
#pun-announcement .container {padding-top: 1em}

#menu-left, #menu-right {
  width: 172px;
  margin-top: 0;
  margin-bottom: 0.1em
  }

#menu-left {
  float: left;
  margin-left: -10px;
  margin-right: 5px
  }

#menu-right {
  float: right;
  margin-left: 5px;
  margin-right: -10px
  }

#menu-left span, #menu-right span {
  display: block;
  margin: 0 0 -9px 0;
  padding: 0;
  width: 172px;
  height: 82px;
  outline: 1px solid red;
  }

#submenu {
  width: 100%;
  padding: 0
  }

.submenutext {
  display: none;
  text-align: center;
  height: auto
  }
</style>

<table style="width: 100%; background: transparent url(https://pp.vk.me/c619326/v619326770/94d3/L4tAWim43W4.jpg) center center repeat; border: 1px solid #988764; outline: 1px solid lime;" cellpadding="0" cellspacing="0">
 <tbody>
  <tr>
   <td align="center"><img src="http://cs613525.vk.me/v613525484/1bab5/EA64BODMAQc.jpg"/></td>
  </tr>
  <tr>
   <td id="MenuTxT" align="center" valign="top">
    <div id="menu-left">
     <br><span alt="#sm1" style="cursor: pointer;"><img src="https://pp.vk.me/c614823/v614823484/15261/4KrSEgtEmxc.jpg"></span></br>
     <span alt="#sm2" style="cursor: pointer;"><img src="https://pp.vk.me/c614823/v614823484/15253/_JdaS5be_Ds.jpg"></span>
     <br><span alt="#sm3" style="cursor: pointer;"><img src="https://pp.vk.me/c614823/v614823484/1525a/T2WIJutxFHw.jpg"></span></br>
     <span alt="#sm4" style="cursor: pointer;"><img src="http://cs613525.vk.me/v613525484/1b9e0/PkF_8P62-n0.jpg"></span>
     <br><span alt="#sm5" style="cursor: pointer;"><img src="http://cs613525.vk.me/v613525484/1b9cf/mEyPS97E47E.jpg"></span></br>
     <span alt="#sm6" style="cursor: pointer;"><img src="http://cs613525.vk.me/v613525484/1b9f1/sgzBbEFfO2Y.jpg"></span>
    </div>
    <div id="menu-right">
     <br><span alt="#sm7" style="cursor: pointer;"><img src="https://pp.vk.me/c614823/v614823484/1526f/Dei5pe76UsU.jpg"></span></br>
     <span alt="#sm8" style="cursor: pointer;"><img src="https://pp.vk.me/c614823/v614823484/15276/aivu4XSqZcE.jpg"></span>
     <br><span alt="#sm9" style="cursor: pointer;"><img src="http://cs613525.vk.me/v613525484/1ba14/AlmfP7icW_c.jpg"></span></br>
     <span alt="#sm10" style="cursor: pointer;"><img src="http://cs613525.vk.me/v613525484/1b9ff/cS24uUmPkW0.jpg"></span>
     <br><span alt="#sm11" style="cursor: pointer;"><img src="http://cs613525.vk.me/v613525484/1ba06/ybfkhgd-ELU.jpg"></span></br>
     <span alt="#sm12" style="cursor: pointer;"><img src="http://cs613525.vk.me/v613525484/1ba0d/Mk-mg81xie0.jpg"></span>
    </div>
    <div id="submenu">
     <div id="sm1" class="submenutext" style="display:block;">

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

     </div>
     <div id="sm2" class="submenutext">

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

     </div>
     <div id="sm3" class="submenutext">

<br><img src="https://pp.vk.me/c614824/v614824484/1501c/tfs10XOlFO4.jpg"> <img src="https://pp.vk.me/c614824/v614824484/15007/Qrqnu7ykdkI.jpg"> </br>
    <br><img src="https://pp.vk.me/c614824/v614824484/15015/-n2MXZzZlVw.jpg"> <img src="https://pp.vk.me/c618026/v618026484/b593/keZ_32CVAdQ.jpg"></br>
    <br><img src="https://pp.vk.me/c618026/v618026484/b5c5/_wrdJ0y_gVU.jpg"> <img src="https://pp.vk.me/c614824/v614824484/15000/QGi4uao5-NE.jpg"><img src="https://pp.vk.me/c618026/v618026484/b59a/1liPfLTLcfo.jpg"></br>
    <br><img src="https://pp.vk.me/c614824/v614824484/1500e/Ssz73HzqGas.jpg"></br>

     </div>
     <div id="sm4" class="submenutext">

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

     </div>
     <div id="sm5" class="submenutext">

Контент пятой кнопки

     </div>
     <div id="sm6" class="submenutext">

Контент шестой кнопки

     </div>
     <div id="sm7" class="submenutext">

<br><a href="http://warriorscatcats.rolka.su/viewtopic.php?id=236"><img src="http://cs618922.vk.me/v618922484/aba7/tGmBIBIOOJI.jpg"></a></br>
<br><a href="http://warriorscatcats.rolka.su/viewtopic.php?id=240#p1168"><img src="http://cs618922.vk.me/v618922484/abbb/7YEFP29pOC4.jpg"></a></br>
<br><a href="http://warriorscatcats.rolka.su/viewtopic.php?id=237"><img src="http://cs618922.vk.me/v618922484/abc5/EJFFV7JzFps.jpg"></a></br>
<br><a href="http://warriorscatcats.rolka.su/viewtopic.php?id=238"><img src="http://cs618922.vk.me/v618922484/abcf/1tBR3PLs020.jpg"></a></br>
<br><a href="http://warriorscatcats.rolka.su/viewtopic.php?id=239"><img src="http://cs618922.vk.me/v618922484/abd9/yXu8xWI2zGs.jpg"></a></br>


     </div>
     <div id="sm8" class="submenutext">

Контент восьмой кнопки

     </div>
     <div id="sm9" class="submenutext">

Контент девятой кнопки

     </div>
     <div id="sm10" class="submenutext">

<br><b>Основные понятия:</b>

    <br><b>Бродяга</b> [Rogue] – обычно враждебно настроенный кот, который повсюду скитается и не имеет постоянной обители.</br>
   <br><b> Гнездо Двуногого</b> [Twolegnest] – дом человека.</br>
   <br><b>Гремящая тропа</b> [Thunderpath] – асфальтированная дорога с едким неприятным запахом, по которой передвигаются чудища Двуногих, издавая страшное рычание. Одна из таких троп разделяет территории Грозового и племени Теней.</br>
   <br><b>Двуногий</b> [Twoleg] – человек.</br>
   <br><b>Детёныш Двуногого</b> [Twoleg kit] – ребёнок человека.</br>
   <br><b> Добыча</b> [Fresh-kill] – недавно убитая дичь, пойманная для пропитания (пойманная в качестве пищи). Добывается воинами или оруженосцами; приносится либо в общую кучу, либо сразу к старейшинам. Получают пищу в первую очередь старики, королевы, котята и больные коты, а затем уже воины и оруженосцы. До востребования хранится в общей куче.</br>
   <br><b>Домашний, домашняя киска (Игрушка Двуногих - реже) </b>[Kittypet] – домашний кот</br>
   <br><b> Древогрыз</b> [Tree-eater] – бульдозер.</br>
   <br><b> Лунное Озеро </b>[Moonpool] – место возле озера, где целители и предводители могут общаться со Звёздным племенем.</br>
   <br><b>Лунный Камень</b> [Moonstone] – место в лесу, где целители и предводители беседовали со Звёздным племенем.</br>
   <br><b>  Материнский Исток </b>[Mothermouth] – проход в пещеру, где находится Лунный Камень.</br>
   <br><b> Место-Где-Тонет-Солнце </b>[Sun-drown-place]– океан, который находится на западе, вдали от территории племён.</br>
   <br><b>Место отдыха Двуногих </b>[Greenleaf Twolegplace] – место, посещаемое Двуногими на протяжении всего лета; используется в качестве кемпинга или курорта.</br>
   <br><b> Одиночка [Loner]</b> – кот, который живёт сам по себе и не защищает свою территорию.</br>
   <br><b> Охотничий патруль </b>[Hunting Patrol] – группа котов, охотящихся за дичью, чтобы принести её в племя в качестве еды.</br>
   <br><b>Падаль </b>[Crowfood, crow-food] – мёртвая дичь, которая сгнила или находится на стадии гниения; также используется в качестве оскорбления (см. ниже).</br>
   <br><b>Пастбище</b> [Horseplace] – ферма или конюшня.</br>
   <br><b> Полумостик</b> [Halfbridge] – пирс, причал для лодок. Впервые был использован Белкой, когда патруль Ежевики исследовал новую территорию в книге «Звёздный свет».</br>
   <br><b> Поляна четырёх деревьев </b>[Fourtrees] – место, которое окружает четыре исполинских дуба, где соприкасаются все территории племён, и где каждое полнолуние собираются все племена, когда в лесу объявляется перемирие.</br>
  <br><b>  Резчик </b>[Cutter] – ветеринар, специализирующийся на стерилизации кошек или кастрации котов.</br>
  <br><b>Серебряный пояс </b>[Silverpelt] – широкая полоса звёзд (по мнению читателей – Млечный Путь), представляющая собой Звёздное племя.</br>
  <br><b>Совет </b>[Gathering] – ежемесячное собрание всех племён, которое проходит в ночь полнолуния на поляне четырёх деревьев или на Острове Советов. На время проведения объявляется Священное перемирие и запрещаются все битвы.</br>
  <br><b>Территория Двуногих </b>[Twolegplace] – посёлок, город или деревня, где живут люди.</br>
  <br><b>Чудище [Monster] </b>– любое транспортное средство, управляемое человеком: автомобили, грузовики, тракторы, вездеходы и т.п.</br>

    <div>
    <input type="Button" value="Основные пояния" onclick="return showhide(this)">
    <p style="display:none">
     <br><b>Бродяга</b> [Rogue] – обычно враждебно настроенный кот, который повсюду скитается и не имеет постоянной обители.</br>
   <br><b> Гнездо Двуногого</b> [Twolegnest] – дом человека.</br>
   <br><b>Гремящая тропа</b> [Thunderpath] – асфальтированная дорога с едким неприятным запахом, по которой передвигаются чудища Двуногих, издавая страшное рычание. Одна из таких троп разделяет территории Грозового и племени Теней.</br>
    </p>
    </div>

    

     </div>
     <div id="sm11" class="submenutext">

Контент одиннадцатой кнопки

     </div>
     <div id="sm12" class="submenutext">

Контент двенадцатой кнопки

     </div>
    </div>
   </td>
  </tr>
  <tr>
   <td align="center"><img src="http://cs618922.vk.me/v618922484/abf6/bOcgdACKTPQ.jpg"/></td>
  </tr>
 </tbody>
</table>



<script type="text/javascript">
$(document).ready(function() {
$("td.#MenuTxT div.submenutext").hide();
$("#menu-left span:first").addClass("tabactive").show();
$("td.#MenuTxT div.submenutext:first").show();
$("div.#menu-left span, div.#menu-right span").click(function() {
    $("div.#menu-left span, div.#menu-right span").removeClass("tabactive");
    $(this).addClass("tabactive");
    $("td.#MenuTxT div.submenutext").hide();
    var activeDiv = $(this).attr("alt");
    $("div."+activeDiv).fadeIn();
    return false; });
});
</script>

0

919

Подскажите, какой скрипт и куда нужно вставить, чтобы поле объявления было выделено графически (картинкой). Например, как здесь http://pangea.rusff.ru/

Отредактировано The First Lady (Сб, 5 Июл 2014 11:37:36)

0

920

The First Lady, на указанном вами примере - картинка объявления - это нижняя часть пикчи шапки..

0


Вы здесь » Единый форум поддержки » Архив » Таблицы на заказ (15)