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

Объявление

☕ Неделя графического дизайна с ocean

Дата: 8 - 14 декабря
Тема: Графический дизайн: тренды, инструменты, креативные подходы
наша прекрасная Ocean готова ответить на любые вопросы, что не противоречат законам РФ

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

🎄 РАСПАКОВКА ТАЛАНТОВ: БОНУСЫ ЗА ОТЗЫВЫ

До 31 декабря обмениваемся отзывами и комментариями о работах друг друга,
делимся советами и рекомендациями. Вдохновляйтесь и вдохновляйте!

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

❄️ САМЫЙ СНЕЖНЫЙ ФОРУМ: КОНКУРС ДИЗАЙНОВ

Показывайте зимние и новогодние дизайны ваших проектов
И да победит самый снежный!)

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

📩 ИНТЕРНЕТ-ВОССТАНИЕ 2.0: ПИСЬМО ДЕДУШКЕ МОРОЗУ

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

Написать письмо

🔥 Новинка в портфолио: Скрипт фильтров и поиска контента

Фильтры для сортировки и поиска контента, работают на любой платформе
Стоимость: бесплатно
Автор: Emerael

Забрать код

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

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

Как купить

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

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

Подробнее

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.

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

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

Таблица. HTML.

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

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

1

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

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

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

Актуально

0

3

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

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

0

4

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

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

0

5

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

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

0

6

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

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

0

7

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

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

0

8

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

Сова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

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

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

0

10

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

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

0

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