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

Страница: « 1 … 5 6 7 8 9 … 31 »

Тема закрыта

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

Поделиться6101.09.11 16:09

Автор: Jii-Jo
Призрак
Последний визит:
18.04.14 17:05
Уважение: +392

Kizi написал(а):

46

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

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

Поделиться6201.09.11 16:52

Автор: Jii-Jo
Призрак
Последний визит:
18.04.14 17:05
Уважение: +392

ФанфикГП написал(а):

43

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

Поделиться6301.09.11 21:10

Автор: Selectica
Участник
Последний визит:
25.11.25 20:25
Уважение: +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 В кнопках - текст жирный, цвет всего текста в таблице - черный.

Поделиться6402.09.11 07:11

Автор: Jii-Jo
Призрак
Последний визит:
18.04.14 17:05
Уважение: +392

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>

Поделиться6502.09.11 09:46

Автор: Ann B.
Призрак
Последний визит:
19.10.11 17:09
Уважение: 0

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

Поделиться6602.09.11 15:46

Автор: Selectica
Участник
Последний визит:
25.11.25 20:25
Уважение: +12

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

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

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

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

Поделиться6702.09.11 15:58

Автор: Selectica
Участник
Последний визит:
25.11.25 20:25
Уважение: +12

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

Поделиться6802.09.11 19:19

Автор: Jii-Jo
Призрак
Последний визит:
18.04.14 17:05
Уважение: +392

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>

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

Поделиться6902.09.11 19:20

Автор: Jii-Jo
Призрак
Последний визит:
18.04.14 17:05
Уважение: +392

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

Поделиться7002.09.11 19:53

Автор: Selectica
Участник
Последний визит:
25.11.25 20:25
Уважение: +12

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

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

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

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

Тема закрыта

Страница: « 1 … 5 6 7 8 9 … 31 »

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

Меню навигации

Пользовательские ссылки

Объявление

🎧 Подкаст «НЕТЕРОЛЕВЫЕ»

🍁 Что такое осень? Конкурс осенних дизайнов!

🔥 Акция! Осенние скидки на Мгновенные уведомления

❤️ Поддержи проект! Стань модератором!

💌 Акция! Подписка, лайк, коммент, репост!

🌟 SPECIAL OFFER: We distribute designs for free

❤️ Support the project

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

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

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

Поделиться6101.09.11 16:09

Поделиться6201.09.11 16:52

Поделиться6301.09.11 21:10

Поделиться6402.09.11 07:11

Поделиться6502.09.11 09:46

Поделиться6602.09.11 15:46

Поделиться6702.09.11 15:58

Поделиться6802.09.11 19:19

Поделиться6902.09.11 19:20

Поделиться7002.09.11 19:53