ForumD.ru - Дизайн, графика, скрипты, техническая поддержка для форумов и сайтов

Объявление

GEMcross

Кроссовер, ориентированный на активную игру и уютный флуд.
Собираем у себя драгоценных игроков уже почти три года.

Посетить

💰 Теперь у нас можно приобрести "Мгновенные уведомления от Алекса"

Скрипт оповещает пользователей о событиях на форуме в реальном времени, придавая динамики общению.
Автор: Alex_63 | Платформа: MyBB.ru.

У нас: структурированная документация, возможность платить иностранными картами, перевыпустить подписку или купить бессрочно.

Купить скрипт

🔥 Новинка в портфолио: ДИЗАЙН ФОРУМА В СТИЛЕ ФЭНТЭЗИ С ПРОЗРАЧНОСТЬЮ

Платформа: MyBB.ru (RusFF)
Стоимость: 8000 рублей;
Авторы: Moju & Gerda

Посмотреть

🌟 ОПЛАТА ЗАКАЗА НАГРАДНЫМИ БАЛЛАМИ И СКИДКИ

Заказы можно оплачивать наградными баллами (НБ). Полностью или частично.
Бартер за НБ осуществляется на условиях платного заказа, в качестве оплаты - НБ.
А если у вас есть любой платный заказ, вы можете обменять НБ на скидочные купоны.

узнать подробности

📣 Наш проект: Ролевой поисковик

Поиск роли на текстовых ролевых
Проект от специалистов FD

Спойлеры и обсуждение

❤️ Поддержать проект

Если у вас есть желание помочь нам сделать наш проект лучше:
Реклама на сайте • Предложения
Стать модератором • Отзывы

Подробнее

SPECIAL OFFER: We distribute designs for free

Finalizing the layout for your project;
Developing a style code;
Mobile version included if you wish.

Details

Support the project

If you want to help us:
Become a moderator
Suggestions • Reviews

Details
СкрытьПоказать
❗ ❗ ❗ Technical work is underway. We'll fix it soon. :) If you're english-speaker and want to use our forum, switch to the russian language. This is temporary, until the works with multi-language option will be done. Sorry for the inconvenience.

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

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

[выполнено]Таблица. Аниме.

Страница: 1
Тема закрыта

Сообщений 1 страница 8 из 8

1

  • Автор: SergeyRatkin
  • Бестелесный дух прошлого
  • SergeyRatkin
  • Уважение: +322

1) http://futurenaruto.anihub.ru/
2) В общем.  http://s1.uploads.ru/t/BqCu8.jpg
3)
• Края каждой ячейки закругленные это принципиально. 
• Каждую ячейку залить цветом, любым на выбор, ну или просто создать форму я сам вставлю цвет.
Так же если можно создать еще и форму, для вставки картинки для фона всей таблицы (картинку вставлю сам, если понадобится. Ширина всей таблицы должна быть 700 х 400 пикселей ).
• Границы ячеек сделать пунктирной точкой "......"
• Прокрутка только в крупных ячейках, их 4, 1 в простой ячейке, и 3 в контенте.
• Текст в кнопках простой размер если можно 13-ый. И так же сделать формы для вставки картинок.

0

2

  • Автор: Бу
  • Бестелесный дух прошлого
  • Бу
  • Уважение: +298

SergeyRatkin
Не знаю, получится ли так разместить кнопки, но попробую. Там, где баннер, тоже фон заливать?

0

3

  • Автор: SergeyRatkin
  • Бестелесный дух прошлого
  • SergeyRatkin
  • Уважение: +322
Бу написал(а):

Не знаю, получится ли так разместить кнопки, но попробую. Там, где баннер, тоже фон заливать?

да, тоже.
ну если не получится так разместить, то нижнюю замените на на еще один баннер. Следовательно только две.

0

4

  • Автор: SergeyRatkin
  • Бестелесный дух прошлого
  • SergeyRatkin
  • Уважение: +322

кнопки с контейнерами. Блин сообщения редактировать нельзя, жалко, приходиться печатать несколько сообщений.

0

5

  • Автор: Бу
  • Бестелесный дух прошлого
  • Бу
  • Уважение: +298

Вроде все, возможно потом под ширину и высоту кнопок нужно будет изменить значение в хтмл верху.

Код:
<style>
.container1 {width: 400px; margin: 0 auto; padding: 0;}
ul.tabs {
    margin: 0;
    padding: 0;
    float: left;
    list-style: none;
    height: 40px;
    width: 400px;
}
ul.tabs li {
    float: left;
    margin-btop:-20px;
    padding: 0;
    height: 40px;
    line-height: 40px;
 background-color: #c8c6c2;  
    border: 1px;
border-top: 1px dotted #000000;
    border-bottom: 1px dotted #000000;
        border-right: 1px dotted #000000;
        border-left: 1px dotted #000000;
    
    overflow: hidden;
    position: relative;
border-radius:5px;
    -moz-border-radius-bottomright: 5px;
    -khtml-border-radius-bottomright: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-radius-bottomleft: 5px;
    -khtml-border-radius-bottomleft: 5px;
    -webkit-border-bottom-left-radius: 5px;
}

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

ul.tabs li a:hover {
       border-top: 1px dotted #000000;
    border-bottom: 1px dotted #000000;
        border-right: 1px dotted #000000;
        border-left: 1px dotted #000000;
}    

html ul.tabs li.active  {
   border-top: 1px dotted #000000;
    border-bottom: 1px dotted #000000;
        border-right: 1px dotted #000000;
        border-left: 1px dotted #000000;
}  

html ul.tabs li.active a:hover  {
border-bottom: 1px dotted #000000;
}

.tab_container1 {
    clear: both;
    float: left; 
    width: 400px;
    height: 400px;

    background-color: #c8c6c2;  
    border-top: 1px dotted #000000;
    border-bottom: 1px dotted #000000;
        border-right: 1px dotted #000000;
        border-left: 1px dotted #000000;
border-radius:5px;
    -moz-border-radius-bottomright: 5px;
    -khtml-border-radius-bottomright: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-radius-bottomleft: 5px;
    -khtml-border-radius-bottomleft: 5px;
    -webkit-border-bottom-left-radius: 5px;
}

.tab_content {
    padding: 5px;
}

.tab_content h2 {
    font-weight: normal;
    padding-bottom: 2px;
    border-bottom: 1px dotted #000000;
}
</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 width="700px">
<tr>
<td rowspan="2"><div style="background:#c8c6c2; border: 1px dotted  #55423a; border-radius:5px; padding: 5px; height: 400px;"><div style="width: 100%; height: 400px; overflow-y: scroll; ">ячейка</div>
</div></td>

<td ><div class="container">
    <div class="html-box">

<ul class="tabs">
    <li class="active"><a href="#tab1"><img src="картинка"></a></li>
    <li><a href="#tab2"><img src="картинка"></a></li>
<li><a href="#tab3"><img src="картинка"></a></li>
    </ul>

      <div class="tab_container1">

<div style="display: block;" id="tab1" class="tab_content">
<div style="width: 100%; height: 390px; overflow-y: scroll; ">текст 1</div>
</div>

<div style="display: none;" id="tab2" class="tab_content">
<div style="width: 100%; height: 390px; overflow-y: scroll; ">текст 2</div>
</div>

<div style="display: none;" id="tab3" class="tab_content">
<div style="width: 100%; height: 390px; overflow-y: scroll; ">текст 3</div>
</div>

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

<tr>
<td ><div style="background:#c8c6c2; border: 1px dotted  #55423a; border-radius:5px; padding: 5px; height: 31px; width: 60px;">баннер
</div></td>
</tr>
</table>

цвет меняем

ul.tabs li {
    float: left;
    margin-btop:-20px;
    padding: 0;
    height: 40px;
    line-height: 40px;
background-color: #c8c6c2;

.tab_container1 {
    clear: both;
    float: left;
    width: 400px;
    height: 400px;

    background-color: #c8c6c2;

<td rowspan="2"><div style="background:#c8c6c2; border: 1px dotted  #55423a; border-radius:5px; padding: 5px; height: 400px;"><div style="width: 100%; height: 400px; overflow-y: scroll; ">ячейка

<td ><div style="background:#c8c6c2; border: 1px dotted  #55423a; border-radius:5px; padding: 5px; height: 31px; width: 60px;">баннер

вот здесь меняем высоту и ширину ячейки с баннером

<td ><div style="background:#c8c6c2; border: 1px dotted  #55423a; border-radius:5px; padding: 5px; height: 31px; width: 60px;">баннер

0

6

  • Автор: SergeyRatkin
  • Бестелесный дух прошлого
  • SergeyRatkin
  • Уважение: +322

http://s1.uploads.ru/t/M7A1P.jpg
что то оно совсем не похоже на то что я хотел. Почему "форма" таблицы не держится? 

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

Так же если можно создать еще и форму, для вставки картинки для фона всей таблицы

это забыли, или это невозможно?.
И в кнопках что бы текст был.
Можете конечно ничего не переделывать и просто закрыть тему, я жаловаться не буду)))

0

7

  • Автор: Бу
  • Бестелесный дух прошлого
  • Бу
  • Уважение: +298

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

Код:
<table width="700px">
<tr>
<td rowspan="2"><div style="background:#c8c6c2; border: 1px dotted  #55423a; border-radius:5px; padding: 5px; height: 400px; width: 300px; "><div style="width: 100%; height: 400px; overflow-y: scroll; ">ячейка</div>
</div></td>

<td ><div class="container">
    <div class="html-box">

<ul class="tabs">
    <li class="active"><a href="#tab1"><img src="картинка"></a></li>
    <li><a href="#tab2"><img src="картинка"></a></li>
<li><a href="#tab3"><img src="картинка"></a></li>
    </ul>

      <div class="tab_container1">

<div style="display: block;" id="tab1" class="tab_content">
<div style="width: 100%; height: 390px; overflow-y: scroll; ">текст 1</div>
</div>

<div style="display: none;" id="tab2" class="tab_content">
<div style="width: 100%; height: 390px; overflow-y: scroll; ">текст 2</div>
</div>

<div style="display: none;" id="tab3" class="tab_content">
<div style="width: 100%; height: 390px; overflow-y: scroll; ">текст 3</div>
</div>

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

<tr>
<td ><div style="background:#c8c6c2; border: 1px dotted  #55423a; border-radius:5px; padding: 5px; height: 31px; width: 60px;">баннер
</div></td>
</tr>
</table>

ширину и высоту первой ячейки меняем здесь

<div style="background:#c8c6c2; border: 1px dotted  #55423a; border-radius:5px; padding: 5px; height: 400px; width: 300px; "><div style="width: 100%; height: 400px; overflow-y: scroll; ">ячейка

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

И в кнопках что бы текст был.

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

И так же сделать формы для вставки картинок

Либо картинки, либо текст. Хотите второй вариант, убирайте выделенное

<ul class="tabs">
    <li class="active"><a href="#tab1"><img src="картинка"></a></li>
    <li><a href="#tab2"><img src="картинка"></a></li>
<li><a href="#tab3"><img src="картинка"></a></li>
    </ul>

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

это забыли, или это невозможно?.

добавьте

<table width="700px" background="ссылка_на_картинку">

0

8

  • Автор: SergeyRatkin
  • Бестелесный дух прошлого
  • SergeyRatkin
  • Уважение: +322

Спасибо, большое!

0

Тема закрыта
Страница: 1