ForumDesign TechSupport - Дизайн для форумов и техническая поддержка

Объявление

Акция! Дизайн «MyBB Technical Support»

Дизайн для форума MyBB в тематике компьютерных сообществ или технической поддержки
Стоимость при покупке эксклюзивно: 2000р 1200р
Скидка 40%. В стоимость входит настройка и корректировка дизайна.

Подробнее

Дизайн «Warlords of Draenor»

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

Подробнее

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

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

Подробнее

Дизайн для MyBB форума гильдии WoW Exodar

Детализированный rpg-дизайн для mybb форума гильдии в тематике Экзодара.
Стоимость: 2150р*
В стоимость входит настройка и корректировка дизайна.

Подробнее

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

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

Предложения

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

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



Таблица. 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