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

Объявление

🔴 Разговорный стрим "Время уDEVительных историй"

Дата и время: начало 2 марта в 17:00 по МСК;
Разберём несколько распространённых мифов о дизайне и программировании.
Готовы узнать правду о том что скрывается за кулисами этой индустрии? 🔥

Подробности

☕ 7 вечеров с magia

Дата: с 27 февраля по 5 марта;
Хотите узнать, что таит в себе magia?
Присоединяйтесь к обсуждению и подготовьте вопросы!

Задать вопрос

ДОРАБОТАЕМ ВМЕСТЕ СКРИПТ ПЕРВОАПРЕЛЬСКИХ РОЗЫГРЫШЕЙ

Акция продлится до 1 апреля;
Поддержите нашего разработчика в улучшении его скрипта первоапрельских розыгрышей.
Мы отблагодарим баллами, как за предоставление идей новых шуток, так и за помощь в их реализации.

Принять участие

GEMcross

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

Посетить

TVD: FACELESS

В каждой истории есть две стороны.
Я и герой, и злодей.

Посетить

ЭНТЕРОС

Магия и технологии, эпизоды, 18+
ПутеводительХотим видетьРасы

Посетить

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

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

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

💰 Продаётся: функционал, упрощающий жизнь админу форума

Ивент-календарь, вкладки и слайдеры в постах облегчат оформление и информирование игроков о событиях на форуме.
Скрипт подсчёта постов за вас посчитает активистов и тех кто не пишет посты в указанных разделах и за указанный период времени.
Чат на отдельной странице на форуме, без регистрации, используются форумные аккаунты.
Ультимативный список тем - картинки, описания и иконки для топиков.

Как купить

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

Поиск роли на текстовых ролевых
Проект от специалистов 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
SuggestionsReviews

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 страница 8 из 8

1

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

0

2

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

0

3

Бу написал(а):

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

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

0

4

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

0

5

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

Код:
<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

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

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

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

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

0

7

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

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

0