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

Объявление

Загадочный Дом «Кузнечик»

Форумные игры, кино, позитивное отношение и душевное общение!
Есть в мире место, где душе тепло...
Заходи, мы будем тебе рады!

Подробнее

Мийрон

Качественный пиар быстро и недорого.
Красивейшие дизайны по низким ценам.
Каталог ролевых игр.

Подробнее

Дизайн «Warlords of Draenor»

Детализированный rpg-дизайн для MyBB форума гильдии «Warlords of Draenor»
Стоимость при покупке эксклюзивно: 6300р
В стоимость входит настройка и корректировка дизайна под ваш проект.

Подробнее

Светлый дизайн в фентези стиле с аниме-графикой

Макет для светлого дизайна в фентези стиле с аниме-графикой.
Стоимость: 2600р*
Дизайн продается эксклюзивно (в одни руки).

Подробнее

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

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

Предложения

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

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



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

Сообщений 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