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

Объявление

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

Дата и время: начало 17 февраля в 17:00 по МСК;
Сделаем обзор на дизайн из нашей постоянной рубрики и расскажем последние новости комьюнити.
Потом будет сессия вопросов и ответов. Прозвучат провокационные и неоднозначные вопросы.
Расчехляйте свой вопросомёт! 🔥 🔥 🔥

Подробности

☕ 7 вечеров с Авалон

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

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

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
🎨 Голосуйте за лучшие парные аватарки до 29.02! Отдать голос.
❗ ❗ ❗ 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 страница 6 из 6

1

1. Ссылка на форум:
http://cwtpoa.mybb.ru/
2. Эскиз таблицы:
http://sd.uploads.ru/3QUIg.pnghttp://sd.uploads.ru/qjy0T.pnghttp://sd.uploads.ru/l0ot3.png
3. Дополнительные предпочтения:
-

0

2

Могу попробовать сделать, но уточните размеры таблицы и ячеек

0

3

Лайфстрим
высота - 350 px
ширина - 725 px

283х350 - первый скрин, вертикальные полосы прокрутки
159х350 - первый скрин, узкая полоса для ссылок

230х350 - второй скрин, вертикальная полоса прокрутки (размер аватарок, если считать именно по этим размерам: 109 в ширину и 160 в высоту. Расстояние между ними и от краев таблицы/границы в 10 px)

725х110 - третий скрин, узкая полоса для аватарок
241х240 - узкая полоса посредине (ширина всех трех колонок одинаковая - 241 px)

Я не знал, какие именно размеры Вам нужны, поэтому постарался отмерить как можно точнее. Отличаться, конечно же, может, все на Ваше усмотрение. Заранее спасибо с:

0

4

БеС написал(а):

241х240 - узкая полоса посредине

а где на скрине она изображена? я вижу только 3 колонки

0

5

В общем вот что получилось.

HTML-верх
Код:
<!--Контейнер с вкладками для информации-->
<style>
.container1 {width: 725px; 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;
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>
HTML-низ
Код:
<!--Контейнер с вкладками для информации-->
</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>
Объявление
Код:
<ul class="tabs">
    <li class="active"><a href="#tab1">Новости</a></li>
    <li class=""><a href="#tab2">Персонажи</a></li>
    <li class=""><a href="#tab3">Реклама</a></li>
</ul>

      <div class="tab_container1">

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

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

        <td style="width: 22%; text-align: center;"><div style="height: 332px; width: 100%; overflow-y:auto; overflow-x: hidden;">
    <p><a href="url">Ссылка</a></p>
    <p><a href="url">Ссылка</a></p>
    <p><a href="url">Ссылка</a></p>
    <p><a href="url">Ссылка</a></p>
    <p><a href="url">Ссылка</a></p>
    <p><a href="url">Ссылка</a></p>
    <p><a href="url">Ссылка</a></p>
    	<div></div></div></td> 

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

</div>

<div style="display: block;" id="tab2" class="tab_content">
<table border="1" cellpadding="1" cellspacing="1" style=" width: 100%;  height: 332px;">
	<tbody>
    <tr>
    	<td style="width: 32%; text-align: center;"><div style="height: 100%;width: 100%; overflow-y: scroll;  overflow-x: hidden;">
    Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст 
Т<div></div></div></td>
    	
    	<td style="text-align: center; cellpadding: 10px"><div style="height: 100%;  width: 100%;  overflow-y: scroll;  overflow-x: hidden; cellpadding: 10px">
    <img src="http://sd.uploads.ru/Zik4n.jpg">
    <img src="http://sd.uploads.ru/Zik4n.jpg">
    <img src="http://sd.uploads.ru/Zik4n.jpg">
    <img src="http://sd.uploads.ru/Zik4n.jpg">
    <img src="http://sd.uploads.ru/Zik4n.jpg">
    <img src="http://sd.uploads.ru/Zik4n.jpg">
    	<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" style="text-align: center;height: 110px;">Баннеры</td>
    </tr>
    <tr>
    	<td style="width: 33%; height: 222px; text-align: center;"><div style="height: 100%; width: 100%; overflow-y: auto; overflow-x: hidden;">
    Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
    	<div></div></div></td>

        <td style="width: 33%; height: 222px; text-align: center;"><div style="height: 100%; width: 100%; overflow-y:auto; overflow-x: hidden;">
    <p><a href="url">Ссылка</a></p>
    <p><a href="url">Ссылка</a></p>
    <p><a href="url">Ссылка</a></p>
    <p><a href="url">Ссылка</a></p>
    <p><a href="url">Ссылка</a></p>
    <p><a href="url">Ссылка</a></p>
    <p><a href="url">Ссылка</a></p>
    	<div></div></div></td> 

    	<td style="width: 33%; height: 222px; text-align: center;"><div style="height: 100%;  width: 100%;  overflow-y: auto;  overflow-x: hidden;">
    Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст 
    	 Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст 

<div></div></div></td>
    </tr>
    
	</tbody>
</table>

</div>

      </div>

Прокрутка стоит во всех колонках, только она появится в том случае, если размер текста будет больше размера таблица (пример вкладка 3). Если хотите её совсем убрать найдите строчку в объявлении (общий вид строки начитается с тега <td>)

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

Замените
scroll - всегда добавляются полосы прокрутки
на
auto - полосы прокрутки добавляются только при необходимости
Если надо совсем убрать прокрутку, то замените на hidden - отображается только область внутри элемента, остальное будет скрыто.

P.S. Извиняюсь за выбор картинок во второй вкладке, использовались просто для примера. Если будут косяки, то сообщите - будем исправлять  http://uploads.ru/i/g/p/f/gpfN7.gif

+1

6

Лайфстрим
Спасибо большое, все чудесно)

0