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

Объявление

🎲 Майский ваншот

Ленивая сезонная майская акция
Сыграем мотивам второсортных и низкобюджетных хоррор-фильмов.
Сбор 19 мая, в 19:00 по МСК в игровой таверне в дискорде.

Подробности

GEMcross

Кроссовер, ориентированный на активную игру и уютный флуд.
Собираем у себя драгоценных игроков уже почти три года.

Посетить

🔥 Новинка в портфолио: ДИЗАЙН И ГРАФИКА В СТИЛЕ GENSHIN IMPACT

Платформа: MyBB.ru (RusFF)
Стоимость: 6500 рублей;
Авторы: Moju & wasurenagusa

Посмотреть

💰 Крутой функционал от Alex_63 для MyBB.ru

"Мгновенные уведомления от Алекса": скрипт оповещает пользователей о событиях на форуме в реальном времени - Подробности & купить скрипт

"Комментарии к оценкам за сообщения": стабильно работающий функционал для комментирования оценок - Подробности & купить скрипт

Профиль разработчика

🌟 ОПЛАТА ЗАКАЗА НАГРАДНЫМИ БАЛЛАМИ И СКИДКИ

Заказы можно оплачивать наградными баллами (НБ). Полностью или частично.
Бартер за НБ осуществляется на условиях платного заказа, в качестве оплаты - НБ.
А если у вас есть любой платный заказ, вы можете обменять НБ на скидочные купоны.

узнать подробности

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

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

Подробнее

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.

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

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

Таблицы для форумов

Страница:   1 … 5 6 7 8 9 … 31  
Тема закрыта

Сообщений 61 страница 70 из 303

61

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

46

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

Отредактировано Jii-Jo (01.09.11 16:09)

0

62

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

43

как ни странно, но Вам сюда:
[link]

0

63

  • Автор: Selectica
  • Участник
  • Selectica
  • Уважение: +12

1. ссылка на форум - http://africaworld.rolka.su/
2. эскиз таблицы.: http://s39.radikal.ru/i084/1108/6d/64853991b0b2.jpg
3. дополнительные предпочтения - Контейнер, переключение кнопками(новости, Реклама и проч.). Прокрутка в самом контейнере и центрирование текста там же.
В графе Администрация - две кликабельные картинки (потом сделаю и вставлю их сама, можете просто словом в коде указать, куда)
Если можно, сделать все кнопки и контейнер не просто прямоугольными, а как бы со скругленными краями, как тут http://s52.radikal.ru/i137/1108/bc/2aa3fc75ec78.jpg В кнопках - текст жирный, цвет всего текста в таблице - черный.

0

64

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

Selectica,
плохо брать примеры таблиц с популярных форумов. :З Ога.
Вот Ваша таблица:

Код:
    <style>
    #menu {
    margin-top: -5px;
    width: 200px;
    height: 60px;
    background-repeat : no-repeat;}

    #menu span {
    text-align:left;
    display:block;
    color:#fff;
    margin: 7px 0;
    padding: 11px;
    }
    #submenu,#menu span {
        border-radius:5px;
        -webkit-border-radius:5px;
        -khtml-border-radius:5px;
        -moz-border-radius:5px;
        -o-border-radius:5px;
    background:#aa5f5f;
    }

    #menu .tabactive {
    color: #2662DF;
        background:#F9F1DD;
    }

    #submenu {
    padding: 3px;
    height: 200px;
    text-align: center;
    font-size: 12px;
    width: 540px;
    }

    .submenutext {
    display: none;
    height: 40px;
    }
    </style>
    <center><table style="width: 615px">
    <tbody>
      <tr>
       <td valign=top>
        <div id="menu"> <b>
    <span alt="#sm1" style="cursor: pointer;">Новости</span>
    <span alt="#sm2" style="cursor: pointer;">В игре</span>
    <span alt="#sm3" style="cursor: pointer;">Администрация</span>
    <span alt="#sm4" style="cursor: pointer;">Реклама</span>
               </b>
        </div>
       </td>
       <td id="MenuTxT"  align="center" valign="top">
        <div id="submenu" align="center">
         <div id="sm1" class="submenutext" style="display:block;"><br/><br/>
    Текст
    </div>

         <div id="sm2" class="submenutext"><br /><br />
    Текст
    </div>
         <div id="sm3" class="submenutext"><br /><br />
    Текст
    </div>

         <div id="sm4" class="submenutext"><br /><br />
    Текст
    </div>

         <div id="sm5" class="submenutext"><br /><br />
    Текст
    </div>


    </div>
       </td>
    </tr>
    </tbody>
    </table></center>
    <script type="text/javascript">
    $(document).ready(function() {
    $("td.#MenuTxT div.submenutext").hide();
    <!--$(".tabs span:first").addClass("active").show(); -->
    $("td.#MenuTxT div.submenutext:first").show();
    $("div.#menu span").click(function() {
        $("div.#menu span").removeClass("tabactive");
        $(this).addClass("tabactive");
        $("td.#MenuTxT div.submenutext").hide();
        var activeDiv = $(this).attr("alt");
        $("div."+activeDiv).fadeIn();
        return false; });
    });
    </script>

А что-бы не засорять таблицу можно раздельно:
В HTML-низ:

Код:
<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>

В HTML-верх:

Код:
<style>
.container1 {width: 900px; margin: 0 auto; padding: 0;}
ul.tabs {
    margin: 0;
    padding: 0;
    float: left;
    list-style: none;
    height: 40px;
    width: 467px;
    width: 100%;
}
ul.tabs li {
    float: left;
    margin: 0;
    padding: 0;
    height: 40px;
    line-height: 40px;
    border: 0px;
border-top: 1px dotted #000000;
    border-bottom: 1px dotted #000000;
        border-right: 1px dotted #000000;
        border-left: 1px dotted #000000;
    margin-bottom: -2px;
    background: url();
    overflow: hidden;
    position: relative;
}

ul.tabs li a {
    text-decoration: none;
    color: transparent;
    display: block;
    padding: 0 5px;
    background: url();
    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: 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 a:hover  {
        background: url();
    border-bottom: 0px solid #160f0a;
}

.tab_container1 {
    clear: both;
    float: left; 
    width: 900px;
    height: 343px;
    background-image : url();   
background-color: #FFFFFF;  
    border-bottom: 1px solid #000000;
        border-top: 0px solid #000000;    
        border-left: 0px solid #000000;    
        border-right: 0px solid #000000;  

    -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: 0px dashed #000000;
}
</style>

И в таблицу:

Код:
    <center><table style="width: 615px">
    <tbody>
      <tr>
       <td valign=top>
        <div id="menu"> <b>
    <span alt="#sm1" style="cursor: pointer;">Новости</span>
    <span alt="#sm2" style="cursor: pointer;">В игре</span>
    <span alt="#sm3" style="cursor: pointer;">Администрация</span>
    <span alt="#sm4" style="cursor: pointer;">Реклама</span>
               </b>
        </div>
       </td>
       <td id="MenuTxT"  align="center" valign="top">
        <div id="submenu" align="center">
         <div id="sm1" class="submenutext" style="display:block;"><br/><br/>
    Текст
    </div>

         <div id="sm2" class="submenutext"><br /><br />
    Текст
    </div>
         <div id="sm3" class="submenutext"><br /><br />
    Текст
    </div>

         <div id="sm4" class="submenutext"><br /><br />
    Текст
    </div>

         <div id="sm5" class="submenutext"><br /><br />
    Текст
    </div>


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

+1

65

  • Автор: Ann B.
  • Бестелесный дух прошлого
  • Ann B.
  • Уважение: +0

1. ссылка на форум - Тест
2. эскиз таблицы.: http://s50.radikal.ru/i129/1109/82/e0103efc527ct.jpg
3. дополнительные предпочтения - Не могли бы Вы сделать спойлер, выпадающим вниз? И можно ли кнопки сделать прозрачными? Если да, то пожалуйста)

0

66

  • Автор: Selectica
  • Участник
  • Selectica
  • Уважение: +12

Jii-Jo
эм, все работает, только нет еще одной кнопки "Полезные ссылки")

Jii-Jo написал(а):

плохо брать примеры таблиц с популярных форумов. :З

я брала не пример самой таблицы, а пример скругленных углов. Этот форум я вообще не знаю, так что популярным не считаю.

0

67

  • Автор: Selectica
  • Участник
  • Selectica
  • Уважение: +12

Jii-Jo
а еще не работает прокрутка, содержимое буквально выскакивает за пределы таблицы(см. Администрация)

0

68

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

Selectica
упс. совсем забыла про прокрутку, простите, пожалуйста.
+насчет блока "администрация". Картинки лучше сделать стошками, то бишь уменьшить размер до 100х100, ну, или 150х150, ибо так будет компактнее и смотреться будет лучше, при чем намного.
Разве? Писала, вроде оо ладно, вот код, вроде все как надо. ога.

одним кодом|одним кодом
Код:
    <style>
    #menu {
    margin-top: -5px;
    width: 200px;
    height: 60px;
    background-repeat : no-repeat;}

    #menu span {
    text-align:left;
    display:block;
    color:#fff;
    margin: 7px 0;
    padding: 11px;
    }
    #submenu,#menu span {
        border-radius:5px;
        -webkit-border-radius:5px;
        -khtml-border-radius:5px;
        -moz-border-radius:5px;
        -o-border-radius:5px;
    background:#aa5f5f;
    }

    #menu .tabactive {
    color: #2662DF;
        background:#F9F1DD;
    }

    #submenu {
    padding: 3px;
    height: 200px;
    text-align: center;
    font-size: 12px;
    width: 540px;
    }

    .submenutext {
    display: none;
    height: 40px;
    }
    </style>
    <center><table style="width: 615px">
    <tbody>
      <tr>
       <td valign=top>
        <div id="menu"> <b>
    <span alt="#sm1" style="cursor: pointer;">Новости</span>
    <span alt="#sm2" style="cursor: pointer;">В игре</span>
    <span alt="#sm3" style="cursor: pointer;">Администрация</span>
    <span alt="#sm4" style="cursor: pointer;">Полезные ссылки</span>
    <span alt="#sm5" style="cursor: pointer;">Реклама</span>
               </b>
        </div>
       </td>
       <td id="MenuTxT"  align="center" valign="top">
        <div id="submenu" align="center">
         <div id="sm1" class="submenutext" style="display:block;"><br/><br/>
<div style="overflow: scroll; overflow-x: hidden; height:160px;">Ваш текст...</div>
    </div>

         <div id="sm2" class="submenutext"><br /><br />
<div style="overflow: scroll; overflow-x: hidden; height:160px;">Ваш текст...</div>
    </div>
         <div id="sm3" class="submenutext"><br /><br />
<div style="overflow: scroll; overflow-x: hidden; height:160px;">Ваш текст...</div>
    </div>

         <div id="sm4" class="submenutext"><br /><br />
<div style="overflow: scroll; overflow-x: hidden; height:160px;">Ваш текст...</div>
    </div>

         <div id="sm5" class="submenutext"><br /><br />
<div style="overflow: scroll; overflow-x: hidden; height:160px;">Ваш текст...</div>
    </div>


    </div>
       </td>
    </tr>
    </tbody>
    </table></center>
    <script type="text/javascript">
    $(document).ready(function() {
    $("td.#MenuTxT div.submenutext").hide();
    <!--$(".tabs span:first").addClass("active").show(); -->
    $("td.#MenuTxT div.submenutext:first").show();
    $("div.#menu span").click(function() {
        $("div.#menu span").removeClass("tabactive");
        $(this).addClass("tabactive");
        $("td.#MenuTxT div.submenutext").hide();
        var activeDiv = $(this).attr("alt");
        $("div."+activeDiv).fadeIn();
        return false; });
    });
    </script>
раздельно|раздельно

В Низ:

Код:
<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>

В Верх:

Код:
<style>
.container1 {width: 900px; margin: 0 auto; padding: 0;}
ul.tabs {
    margin: 0;
    padding: 0;
    float: left;
    list-style: none;
    height: 40px;
    width: 467px;
    width: 100%;
}
ul.tabs li {
    float: left;
    margin: 0;
    padding: 0;
    height: 40px;
    line-height: 40px;
    border: 0px;
border-top: 1px dotted #000000;
    border-bottom: 1px dotted #000000;
        border-right: 1px dotted #000000;
        border-left: 1px dotted #000000;
    margin-bottom: -2px;
    background: url();
    overflow: hidden;
    position: relative;
}

ul.tabs li a {
    text-decoration: none;
    color: transparent;
    display: block;
    padding: 0 5px;
    background: url();
    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: 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 a:hover  {
        background: url();
    border-bottom: 0px solid #160f0a;
}

.tab_container1 {
    clear: both;
    float: left; 
    width: 900px;
    height: 343px;
    background-image : url();   
background-color: #FFFFFF;  
    border-bottom: 1px solid #000000;
        border-top: 0px solid #000000;    
        border-left: 0px solid #000000;    
        border-right: 0px solid #000000;  

    -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: 0px dashed #000000;
}
</style>

В табло:

Код:
    <center><table style="width: 615px">
    <tbody>
      <tr>
       <td valign=top>
        <div id="menu"> <b>
    <span alt="#sm1" style="cursor: pointer;">Новости</span>
    <span alt="#sm2" style="cursor: pointer;">В игре</span>
    <span alt="#sm3" style="cursor: pointer;">Администрация</span>
    <span alt="#sm4" style="cursor: pointer;">Полезные ссылки</span>
    <span alt="#sm5" style="cursor: pointer;">Реклама</span>
               </b>
        </div>
       </td>
       <td id="MenuTxT"  align="center" valign="top">
        <div id="submenu" align="center">
         <div id="sm1" class="submenutext" style="display:block;"><br/><br/>
<div style="overflow: scroll; overflow-x: hidden; height:160px;">Ваш текст...</div>
    </div>

         <div id="sm2" class="submenutext"><br /><br />
<div style="overflow: scroll; overflow-x: hidden; height:160px;">Ваш текст...</div>
    </div>
         <div id="sm3" class="submenutext"><br /><br />
<div style="overflow: scroll; overflow-x: hidden; height:160px;">Ваш текст...</div>
    </div>

         <div id="sm4" class="submenutext"><br /><br />
<div style="overflow: scroll; overflow-x: hidden; height:160px;">Ваш текст...</div>
    </div>

         <div id="sm5" class="submenutext"><br /><br />
<div style="overflow: scroll; overflow-x: hidden; height:160px;">Ваш текст...</div>
    </div>


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

Если что еще не так, говори. Переделаю, сделав дубль три.

+1

69

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

Ann B.
ссылку не на тест, а на ФОРУМ, для которого делается таблца.

0

70

  • Автор: Selectica
  • Участник
  • Selectica
  • Уважение: +12

Jii-Jo
спасибо большое, все отлично работает)

Jii-Jo написал(а):

Картинки лучше сделать стошками, то бишь уменьшить размер до 100х100, ну, или 150х150, ибо так будет компактнее и смотреться будет лучше, при чем намного.

спасибо за совет)

0

Тема закрыта
Страница:   1 … 5 6 7 8 9 … 31