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

Объявление

АКЦИЯ: Раздаём дизайны бесплатно

Доработаем макет под ваш проект;
Сверстаем;
Сделаем мобильную версию по желанию.

Подробнее

Поисковой ресурс

Проект от команды FD
для текстовых ролевиков

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

Мийрон

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

Подробнее

FD Chat - Чат на вашем форуме

Чат на отдельной странице на форуме. Без регистрации, используются форумные аккаунты.
Стоимость: 1500р
Первым 10 покупателям скидка 20%.

Подробнее

Макет для сайта «Fantasy Calalogue»

Детализированный макет «Fantasy catalogue» для тёмного дизайна многостраничного сайта
Стоимость при покупке эксклюзивно: 3600р
В стоимость входит корректировка макета и доработка недостающих страничек под ваш проект.

Подробнее

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

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

Подробнее
Конкурс! Интерфейс и взаимодействие! Главный приз - 2000 рублей.
Ищешь чем бы украсить свой форум или сайт к Новому году? 🎄 Мы поможем нарядиться! 🎄
❗ ❗ ❗ Technical work is underway. Something here and there may be crooked. We'll fix it soon. :)

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

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



Таблица. HTML.

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

1

1. Ссылка на форум: http://perfectaworld.rolka.su/
2. Эскиз таблицы:

Первая вкладка (открыта по умолчанию)

http://zagruzitfoto.com/images/2014/02/17/6IK3Z.png

Вторая вкладка

http://zagruzitfoto.com/images/2014/02/17/uOvJD.png

Третья вкладка

http://zagruzitfoto.com/images/2014/02/17/tsaRp.png

3. Дополнительные предпочтения:
Фон - прозрачный.

0

2

Актуально

0

3

Сова717
Принимаю, к среде будет готово http://uploads.ru/i/K/Z/U/KZUwI.gif

0

4

Среда... Уже прошла. Я не имею права торопить, но хотелоь бы узнать на счет таблицы...

0

5

Все еще актуально

0

6

Сова717
Извините, что так вот получилось)
Завтра будет :)

0

7

Jii-Jo
Ничего, я все понимаю, все мы люди. Спасибо, что вспомнили

0

8

Сова717

Объявление
Код:
<ul class="tabs">
    <li class="active"><a href="#tab1">Контейнер 2</a></li>
    <li class=""><a href="#tab2">Контейнер 1</a></li>
    <li class=""><a href="#tab3">Контейнер 3</a></li>
</ul>

      <div class="tab_container1">

<div style="display: none;" id="tab2" class="tab_content">

<table border="1" cellpadding="1" cellspacing="1" style="width: 100%; height: 334px;">
	<tbody>
    <tr>
    	<td style="text-align: center;height: 17%;"><div style="height: 320px; width: 100%; overflow-y: scroll; overflow-x: hidden;">
    Текст
    	<div></div></div></td>

    	<td style="text-align: center;height: 17%;"><div style="height: 320px;  width: 100%;  overflow-y: scroll;  overflow-x: hidden;">
    Текст
    	<div></div></div></td>
    </tr>
	</tbody>
</table>

</div>

<div style="display: block;" id="tab1" class="tab_content">
<table border="1" cellpadding="1" cellspacing="1" style=" width: 100%;  height: 332px;">
	<tbody>
    <tr>
    	<td style="width: 50%;"><div style="height: 100%;width: 100%; overflow-y: scroll;  overflow-x: hidden;">
    Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст 
Т<div></div></div></td>
    	<td rowspan="2" style="text-align: center;"><div style="height: 320px; width: 100%; overflow-y: scroll; overflow-x: hidden;">
    Текст
    	<div></div></div></td>
    </tr>
    <tr>
    	<td style="text-align: center;"><div style="height: 100%;  width: 100%;  overflow-y: scroll;  overflow-x: hidden;">
    Текст
    	<div></div></div></td>
    </tr>
	</tbody>
</table>


</div>

<div style="display: none;" id="tab3" class="tab_content"> 

<table border="1" cellpadding="1" cellspacing="1" style="width: 100%; height: 332px;">
	<tbody>
    <tr>
    	<td colspan="3" rowspan="1" style="text-align: center;height: 17%;">Баннеры</td>
    	<td style="text-align: center;">ПР</td>
    </tr>
    <tr>
    	<td colspan="3" rowspan="1" style="text-align: center;height: 7%;">Навигация</td>
    	<td colspan="1" rowspan="2">
        <p align="center">АМС</p>
        <p align="center"><div style="height: 248px;  width: 100%;  overflow-y: scroll;  overflow-x: hidden;">
    	список
        </div></p>
    	</td>
    </tr>
    <tr>
    	<td colspan="2" style="text-align: center;">1</td>
    	<td style="text-align: center;">2</td>
    </tr>
	</tbody>
</table>

</div>

      </div>
<style>
.container1 {width: 900px; margin: 0 auto; padding: 0;}
ul.tabs {
    margin: 0;
    padding: 0;
    float: left;
    list-style: none;
    height: 40px;
    width: 100%;
}
ul.tabs li {
    float: left;
    margin: 0;
    padding: 0;
    height: 38px;
    line-height: 40px;

        
        
    overflow: hidden;
    position: relative;
    border: 1px solid black;
    margin-left: 140px;
}

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

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

html ul.tabs li.active  {
    background: transparent;    
            
            
           
    box-shadow: 0px 0px 1px black;
}  

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

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

    background: transparent;  
            
            
        
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.6);  

    -khtml-border-radiua: 4px;
    -moz-border-radius: 4px;
    -khtml-border-radius: 4px;
    -webkit-border-radius: 4px;
}

.tab_content {
    padding: 5px;
}

.tab_content h2 {
    font-weight: normal;
    padding-bottom: 2px;
    border-bottom: 0px dashed #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>

Чтобы убрать границы таблицы - заменяем в трех таблицах 1 на 0:

<table border="1" cellpadding="1" cellspacing="1" style="width: 100%; height: 334px;">

Чтобы сделать прокрутку, которая появляется только при содержимом, больше чем она вмещается, заменяем все scroll на auto:

<div style="height: 248px;  width: 100%;  overflow-y: scroll;  overflow-x: hidden;">

http://uploads.ru/i/K/Z/U/KZUwI.gif

0

9

Jii-Jo
Спасибо огромное.
А, еще вопрос. Как ее сдвинуть на центр? <center></center> Что то не работает. Я, наверно, что то не так сделала

0

10

Jii-Jo
Все, проблема решена

0