29.08 Чиби пришла, чтобы проститься и передать свою корону в надежные руки урсы. Всех люблю и буду скучать, котики ♥

30.06 В связи с отсутствием Чибимун примерно до сентября, главной по тарелочкам пока будет урса (⁄ ⁄•⁄ω⁄•⁄ ⁄) Так что функционируем в обычном режиме, не забывая про тему исправлений!

12.01 С новым годом, ребятки! немного юбилеев, новых крутых дизайнов и мандаринок в ваш дом ヽ(・∀・)ノ

17.10 Чибимун тут болела серьезно, периодами училась и впадала в реальную жизнь, а на ролевых все так же ничего не меняется. Но вы не теряйте, котики!

27.08 Новый дизайн, спасибо великолепной полтергейст ♥

18.08 Чиби уходит в отпуск до 24 числа (даже заходить не будет возможности), так что не грустите и новые ролочки не делайте :")

07.05 Светло, розово (и немного непривычно), но все по-старому футурно, не переживайте! А за дизайн спасибо большое cannibals circus. Надеюсь, он растопит ваши холодные сердца и подарит чуточку тепла и весны вам, господа любители посплетничать ♥

02.04 Стряхну пыль с колонки новостей (тут должна быть шутка про то, что какая активность на аниме сообществе, такие и мы), напомню неравнодушным про тему исправления в каталоге, где Чибимун горячо желает видеть ссылки на новые форумы, поскольку сама не успевает все отслеживать. Спасибо, что остаетесь с нами, ребятки, даже в такие тяжелые времена. Всех люблю, не стесняйтесь писать, обращаться с вопросами и проявлять признаки жизни ♥

Futura: каталог аниме форумов

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

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


Вы здесь » Futura: каталог аниме форумов » Таблицы » Таблицы, панельки и пр.


Таблицы, панельки и пр.

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

1

В отдельную тему вынесены таблицы, панельки, всплывающие окошки и т.п. вещи.
Все вопросы — здесь.


Навигация
J
- JampPanel

В
- Выпадающее меню по клику

Е
- Ежесуточное уведомление для зарегистрированных

И
- Информационная панель с данными пользователей

К
- Контейнер с боковыми вкладками
- Контейнер с вкладками

С
- Слайдер

0

2

JampPanel [by Deff]
всплывающая панель справа

DEMO

в style_cs.css или между тегами <style> и </style> в html-вверх

Код:
#JampPanel:hover{
margin-right:-8px;
}
#JampPanel,#JampPanel .container{
border-radius:10px;
-webkit-border-radius:10px;
-khtml-border-radius:10px;
-moz-border-radius:10px;
-o-border-radius:10px;
border:1px solid #4f4f4f;
background-color:#6A6075;
box-shadow: 0px 5px 5px #4f4f4f;
-webkit-box-shadow:0px 5px 5px #4f4f4f;
-khtml-box-shadow:0px 5px 5px #4f4f4f;
-moz-box-shadow:0px 5px 5px #4f4f4f;
}
#JampPanel {opacity:0.86;
position:fixed;z-index:1200;
height:190px;top:8px;right:0;margin-right:-202px;
background:#6A6075 url(КАРТИНКА) 4px 2px no-repeat;
width:230px;
}
#JampPanel .container{
padding:12px;
height:400px;
width: 100%; margin:-1px 0 0 30px;
}
#Zaslonyalka{ /*прикрывает область тени на стыке уха с container*/
position:absolute;
height:190px;width:14px;
background-color:#6A6075;
margin:-12px 0 0 -18px;
}

Подробная настройка
#JampPanel:hover
margin-right: -20px; - величина отступа от правого края элемента. Отступом является расстояние от внешнего края правой границы текущего элемента до внутренней границы его родительского элемента.

#JampPanel, #JampPanel .container
border-radius: 10px;
-webkit-border-radius:10px;
-khtml-border-radius:10px;
-moz-border-radius:10px;
-o-border-radius:10px;
закругление рамки.

border: 1px solid #FE2323; - цвет рамки и ее размер;

background-color: #F0F0F0; - цвет фона. можно поставить текстуру или картинку, заменив строчку на: background: url(ссылка)

box-shadow: 0px 5px 5px #626262;
-webkit-box-shadow:0px 5px 5px #626262;
-khtml-box-shadow:0px 5px 5px #626262;
-moz-box-shadow:0px 5px 5px #626262;
- тень контейнера, ее размер и цвет.

#JampPanel
height: 190px; - высота окошка, которое будет показываться все время.
width: 230px; - ширина этого окошка.
background: #6A6075 url(КАРТИНКА) - цвет и картинка. например, сюда можно поместить картинку http://s2.uploads.ru/2PgvJ.png и т.д.

#JampPanel .container
height: 400px; - высота всплывающего контейнера.
width: 100%; - его ширина.

#Zaslonyalka - прикрывает область тени на стыке уха с container
background-color: #F0F0F0; - цвет, желательно должен соотв. цвету контейнера или уха.

Контент
в html-вверх

Код:
<div id=JampPanel>
  <div class=container>
    <div id=Zaslonyalka></div>
.......
  </div>
</div>

0

3

Выпадающее меню по клику от rps
взято с qssupport.ru

1. Установка
в HTML-верх:

Код:
<style> 
div .splLink {width: 130px; height: 40px; border: 2px solid #FFD700; background: #FFFFCC; text-align: center; font-family: Comic Sans Ms; font-size: 15px; padding: 5px;}
.spll {width: 130px; height: 70px; }
.spll div .splCont {height: auto; width: 300px; background:  url(http://tps.bbmy.ru/uploads/0003/83/96/1556-1.png); padding: 5px; z-index: 1000; margin-top: 5px; border: 2px solid #FFD700; font-size: 12px; font-family: Microsoft Sans Serif; text-align: center;}
</style>

в HTML-низ:

Код:
<script type="text/javascript"> 
  $(document).ready(function(){
    $('.splLink').click(function(){
      $(this).parent().children('div.splCont').toggle('normal');
      return false;
    });
  });
</script>

ставите туда, где хотите увидеть само меню (объявление или шапка, например)

Код:
<center><table style="width: 90%">
        <tr>
        
                <td><div class="spll">
<DIV jQuery1259073801391="4"><div class=splLink href="javscript://" jQuery1259073801391="2">Первый контейнер</div>
<DIV style="DISPLAY: none; position: absolute;" class=splCont jQuery1259073801391="5">
Тут будет что-то</DIV></DIV>
</div></td>
                <td><div class="spll">
<DIV jQuery1259073801391="4"><div class=splLink href="javscript://" jQuery1259073801391="2">Второй контейнер</div>
<DIV style="DISPLAY: none; position: absolute;" class=splCont jQuery1259073801391="5">
Тут будет что-то</DIV></DIV>
</div></td>
                <td><div class="spll">
<DIV jQuery1259073801391="4"><div class=splLink href="javscript://" jQuery1259073801391="2">Третий контейнер</div>
<DIV style="DISPLAY: none; position: absolute;" class=splCont jQuery1259073801391="5">
Тут будет что-то</DIV></DIV>
</div></td>
                <td><div class="spll">
<DIV jQuery1259073801391="4"><div class=splLink href="javscript://" jQuery1259073801391="2">Четвёртый контейнер</div>
<DIV style="DISPLAY: none; position: absolute;" class=splCont jQuery1259073801391="5">
Тут будет что-то</DIV></DIV>
</div></td>
                <td><div class="spll">
<DIV jQuery1259073801391="4"><div class=splLink href="javscript://" jQuery1259073801391="2">Пятый контейнер</div>
<DIV style="DISPLAY: none; position: absolute;" class=splCont jQuery1259073801391="5">
Тут будет что-то</DIV></DIV>
</div></td>                
<td><div class="spll">
<DIV jQuery1259073801391="4"><div class=splLink href="javscript://" jQuery1259073801391="2">Шестой контейнер</div>
<DIV style="DISPLAY: none; position: absolute;" class=splCont jQuery1259073801391="5">
Тут будет что-то</DIV></DIV>
</div></td>

        </tr>
</table></center>

2. Заполнение меню
Чтобы заполнить меню своим содержимым, надо обратиться к третьей части кода.

а) По-умолчанию в коде содержится 6 блоков. По своему усмотрению Вы можете изменить это число, добавив новые или удалив какие-либо. Чтобы осуществить это, достаточно размножить (в случае увеличения числа блоков) или удалить (для уменьшения их числа) такой фрагмент:

Код:
<td><div class="spll">
<DIV jQuery1259073801391="4"><div class=splLink href="javscript://" jQuery1259073801391="2">Шестой контейнер</div>
<DIV style="DISPLAY: none; position: absolute;" class=splCont jQuery1259073801391="5">
Тут будет что-то</DIV></DIV>
</div></td>

Внимание! Не меняйте НИКАКИЕ числовые значения в этой части кода! В противном случае меню перестанет работать!

б) Чтобы заменить информацию в основных блоках, найдите в коде слова "Первый блок". Замените их на нужное Вам. Это может быть как текстовая информация, так и графическая (картинки). Можно использовать любой HTML.

в) Чтобы заменить информацию в выпадающих блоках, найдите в коде слова "Тут будет что-то" и замените на нужную Вам информацию. Это может быть как текстовая информация, так и графическая (картинки). Можно использовать любой HTML.

3. Оформление меню.
Оформление выпадающего меню необходимо менять в первой части кода.
Ниже приведены доступные для пользователей изменения в дизайне:

div .splLink {width: 130px; height: 40px; border: 2px solid #FFD700; background: #FFFFCC; text-align: center; font-family: Comic Sans Ms; font-size: 15px; padding: 5px;}

Отвечает за дизайн основных блоков.
width: 130px; - ширина основных блоков, в пикселах.
height: 40px; - высота основных блоков, в пикселах.
border: 2px solid #FFD700; - толщина, метод начертаний и цвет границ основных блоков.
background: #FFFFCC; - цвет фона основных блоков.
text-align: center; - выравнивание текста в основных блоках (по-умолчанию: центр).
font-family: Comic Sans Ms; - шрифт в основных блоках меню.
font-size: 15px; - размер текста в основных блоках меню.
padding: 5px; - отступ от краёв основных блокв (поля).

.spll div .splCont {height: auto; width: 300px; background:  url(http://tps.bbmy.ru/uploads/0003/83/96/1556-1.png); padding: 5px; z-index: 1000; margin-top: 5px; border: 2px solid #FFD700; font-size: 12px; font-family: Microsoft Sans Serif; text-align: center;}

Отвечает за дизайн выпадающих блоков.
height: auto; - высота выпадающих блоков. По-умолчанию осуществляется автоподгон по ширине. При необходимости можно заменить auto на любое числовое значение с указанием единиц измерения.
width: 300px; - ширина выпадающих блоков.
background:  url(http://tps.bbmy.ru/uploads/0003/83/96/1556-1.png); - фоновое изображение выпадающих блоков. При необходимости можно установить непрозрачный цвет, путём замены на background: #FFFFCC; с указанием нужного цвета.
padding: 5px; - отступ от краёв выпадающих блокв (поля).
z-index: 1000; не рекомендовано к изменению. Данный параметр отвечает за наложение выпадающих блоков на форум. При уменьшении этого значения меню будет открывыться под таблицу форума. Если какой-либо элемент форума закрывает собой выпадающии меню, это значение необходимо увеличить.
margin-top: 5px; - отступ, между основными и выпадающими блоками. При значении 0 - без отступа.
border: 2px solid #FFD700; - толщина, метод начертаний и цвет границ выпадающих блоков.
font-size: 12px; - размер текста в выпадающих блоках меню.
font-family: Microsoft Sans Serif; - шрифт в выпадающих блоках меню.
text-align: center; - выравнивание текста в выпадающих блоках (по-умолчанию: центр).

0

4

Ежесуточное уведомление для зарегистрированных [by Deff]

начало html-верх

Код:
<!-- УВЕДОМЛЕНИЕ -->
<div id="inter2" style="display:none;position: fixed; z-index:10000;top: 40%; width: 390px; padding-left: 20px; padding-right: 0px; height:137px;  left:50%!important;margin-left: -200px!important; background: url(http://savepic.org/2101710.png); border-radius:15px; -webkit-border-radius:15px; -khtml-border-radius:15px; -moz-border-radius:15px; -o-border-radius:15px; box-shadow: 0px 5px 18px #000; -webkit-box-shadow:0px 5px 18px #000; -khtml-box-shadow:0px 5px 18px #000; -moz-box-shadow:0px 5px 18px #000; font-weight: bold; border: none; font-family: arial; font-size: 12px; font-style: oblique; line-height: 9px;"><img class="img1809" style="position: absolute;cursor:pointer;right:0;" src="http://savepic.org/2110923.gif"/><div style="COLOR: #FFF; font-variant: normal;line-height:125%; font-size: 14px; text-shadow: #000  1px 1px  0; margin-bottom: 8px; margin-top: 7px; padding-top: 6px; overflow-y: auto!important; width: 400px; height: 100px!important; scrollbar-face-color: #5f1b1b;scrollbar-highlight-color: #212126; scrollbar-shadow-color: #ae5151;scrollbar-3dlight-color: #212126; scrollbar-arrow-color: #5f1b1b; scrollbar-track-color: #761a1a;scrollbar-darkshadow-color: #ae5151;">
<!-- КОНТЕНТ -->

<center>какая-либо надпись по центру</center>

<!--/End КОНТЕНТ -->
</div></div>
<script src="http://hostjs-mybb2011.narod.ru/js/CookieJsLibrary_v_011_4.js"></script>
<script type="text/javascript">
if(typeof(getCookie01)!="undefined"){
var UwOn=1 //1-Уведомление Включено; 0 - Выключено
RabRegim=1 // 1 - Рабочий Режим  -(Если - 0 Тестовый режим и Всплывает все время
if(!RabRegim){deleteCookie01('#inter2')}
var TimePOP=12 // раз в 12 часов повторяемость - для одного юзера
if(GroupID!=3&&UwOn&&!getCookie01('#inter2')&&document.URL=="http://"+location.hostname+"/"){
$("#inter2").show();setCookie01('#inter2','off',TimePOP*60*60*1000)}
$(".img1809").click(function(){$("#inter2").hide();});
}
</script><!--//КОНЕЦ - УВЕДОМЛЕНИЕ -->

Настройка
width: 390px; - ширина.
height: 137px; - высота.
background: url(http://savepic.org/2101710.png); - картинка фона или заменяем на background: #FFFFCC и указываем цвет фона.
border-radius:15px; -webkit-border-radius:15px; -khtml-border-radius:15px; -moz-border-radius:15px; -o-border-radius:15px;  - настраивает закругление краев.
box-shadow: 0px 5px 18px #000; -webkit-box-shadow:0px 5px 18px #000; -khtml-box-shadow:0px 5px 18px #000; -moz-box-shadow:0px 5px 18px #000;  - размер и цвет тени.
font-weight: bold; font-family: arial; font-size: 12px; font-style: oblique; - параметры шрифта.
<img class="img1809" style="position: absolute;cursor:pointer;right:0;" src="http://savepic.org/2110923.gif"/> иконка крестика, который закрывает окошко.
COLOR: #FFF; - цвет текста.

var UwOn=1 // 1-Уведомление Включено; 0 - Выключено
RabRegim=1 // 1 - Рабочий Режим, 0 - Тестовый режим и Всплывает все время (актуально для настройки окна)

0

5

Контейнер с боковыми вкладками [by rps, Deff, Кофеман]

http://uploads.ru/i/2/Z/S/2ZSPu.jpg

в свой стиль или, поставив теги <style> </style>, в html-верх

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

#menu span {
text-align:left;
display:block;
color:#000000;
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:#efeff0;}

#menu .tabactive {
color: #000000;
    background:#777777;}

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

.submenutext {
display: none; 
height: 40px;}

html-низ

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

В место установки контейнера:

Код:
<center><table style="width: 800px">
 <tbody>
  <tr>
   <td valign=top>
    <div id="menu"> <b>
<span alt="#sm1" style="cursor: pointer;">Название1</span>
<span alt="#sm2" style="cursor: pointer;">Название2</span>
<span alt="#sm3" style="cursor: pointer;">Название3</span>
<span alt="#sm4" style="cursor: pointer;">Название4</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>
   </td>
</tr>
 </tbody>
</table></center>

Добавить вкладки

<span alt="#sm4" style="cursor: pointer;">Название</span>

меняем цифру на 5, 6 и далее.
в основу добавляем

<div id="sm4" class="submenutext"><br><br>
текст контейнера
</div>

цифра изменяется на номер контейнера.

Настраиваем внешний вид
#menu - общий стиль блока меню.
width: 180px; - ширина.
height: 60px; - высота.

#menu span - стиль ссылок в меню.
text-align: left; - выравнивание текста.
color: #000000; - цвет текста.

#submenu, #menu span
border-radius: 5px;
    -webkit-border-radius:5px;
    -khtml-border-radius:5px;
    -moz-border-radius:5px;
    -o-border-radius:5px;
- закругление всей таблицы.
background: #efeff0; - фон всей таблицы.

#menu .tabactive - стиль нажатой вкладки, "подсвечивание" (на скриншоте это "новости форума").
color: #000000; - цвет текста.
background: #777777; - цвет фона.

#submenu - стиль основного блока текста.
height: 180px; - высота.
text-align: center; - выравнивание текста.
font-size: 12px; - размер шрифта.
width: 540px; - ширина.

все background: #цвет; можно заменить на картинки с помощью background: url(ссылка);

Название вкладок с помощью картинки
данный код

<span alt="#sm1" style="cursor: pointer;">Название1</span>

меняем на

<span alt="#sm1" style="cursor: pointer;"><img src="картинка"></span>

в таком случае пункт #menu и #menu span можно убрать. при желании так же убирается #menu .tabactive.

0

6

Контейнер с вкладками [by Герда]

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-верх вставляем css-код, который позволит вам настроить стиль контейнеров.
если убрать <style> </style>, стиль можно поместить в css

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

контейнер

Код:
<ul class="tabs">
    <li class="active"><a href="#tab1">Вкладка 1</a></li>
    <li><a href="#tab2">Вкладка 2</a></li>
    <li><a href="#tab3">Вкладка 3</a></li>
</ul>

      <div class="tab_container1">

<div style="display: block;" id="tab1" class="tab_content">
текст 1
</div>

<div style="display: none;" id="tab2" class="tab_content">
текст 2
</div>

<div style="display: none;" id="tab3" class="tab_content"> 
текст 3
</div>

      </div>

[align=center]Создание вкладок
Вкладка
Вкладки создаются в этом куске:

<ul class="tabs">
    <li class="active"><a href="#tab1">Вкладка 1</a></li>
    <li><a href="#tab2">Вкладка 2</a></li>
    <li><a href="#tab3">Вкладка 3</a></li>
</ul>

чтобы добавить вкладку нужно дублировать строчку:

<li><a href="#tab3">Вкладка 3</a></li>

и заменить 3 на 4, 5 и далее по порядку.
<li class="active"> - обозначает вкладку, которая по умолчанию открыта.
отображаться вкладки будут в том порядке, в котором вы их впишете.

Контейнер
Вкладки создаются в контейнерах

<div style="display: block;" id="tab1" class="tab_content">
текст 1
</div>

Обязательно поменяйте цифру на нужную. (если вы создали 4 вкладку, то добавить это нужно тоже с 4 цифрой, 5 - с 5 и т.д.)
Контейнеры могут идти в любом порядке, который вам удобен, т.к. отображаться они будут при клике.

Внешний вид
.container1 - стиль контейнера, который содержит вкладки и содержимое вкладок.
width: 900px - ширина.

ul.tabs - стиль всего списка вкладок.
float: left; - расположение: left - слева; right - справа.
height: 40px; - высота.
width: 467px; или width: 100%; - ширина. оставьте сточку в пикселях, либо в процентах в зависимости от ваших предпочтений.

ul.tabs li - стиль названий вкладок.
float: left; - расположение: left - слева; right - справа; center - по центру.
height: 40px; - высота.
border: 0px; - граница. для отображение вместо 0 пишется 1, 2, 3 далее (толщина)
   border-top: 1px dotted #000000; - верхняя граница, ширина и цвет.
   border-bottom: 1px dotted #000000; - нижняя граница, ширина и цвет.
   border-right: 1px dotted #000000; - правая граница, ширина и цвет.
   border-left: 1px dotted #000000; - левая граница, ширина и цвет.
background: #000000 url(ссылка); - фон. вписывается либо цвет, либо ссылка на картинку.

далее все настраивается по одной схеме.

ul.tabs li a:hover - стиль списка при наведении курсора.
html ul.tabs li.active - стиль активной (открытой) вкладки.
html ul.tabs li.active a:hover - стиль активной (открытой) вкладки при наведении курсора.

.tab_container1 - стиль контейнера с содержимым.

   -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, .tab_content h2 - стиль самого содержимого.
padding: 5px; - отступ от границ в пикселях.

0

7

Информационная панель с данными пользователей [by Duka]

http://s44.radikal.ru/i103/0808/17/5ebbe80ed347.jpg

Появляется блок с информацией: Ник, Имя, Аватар, Статус, Возраст, Дата рождения, уважение, позитив, время на форуме, дата регистрации и прочее. Пользователям показывает одну информацию, гостям - другую.

html-низ

Код:
<script type="text/javascript">
var mon_array = new Array("", "Января", "Февраля", "Марта", "Апреля", "Мая", "Июня", "Июля", "Августа", "Сентября", "Октября", "Ноября", "Декабря");
Tm = new Date();
Tm.setTime(1000*UserRegistered);
m=Tm.getMonth()+1;
if (m<10) m=m;
hh=Tm.getHours();
mm=Tm.getMinutes()+'';
if (mm<10) mm=mm;
tm='<strong>'+Tm.getDate()+'&nbsp;'+mon_array[m]+'</strong>&nbsp;в&nbsp;<strong>'+hh+':'+mm+'</strong>';
var UserTotalReg = Math.floor(UserTotalTime/86400)
var UserTotalPost = Math.floor(UserPosts/60)
var sex_array = new Array("Пол неопределен. Войдите в <a href='/profile.php?section=personal&id="+UserID+"'>Профиль</a> и установите пол", "Ваш пол: <strong>Муж</strong>", "Ваш пол: <strong>Жен</strong>");
var sex = sex_array[UserSex]
if (UserAvatar == ""){UserAvatar = "http://s54.radikal.ru/i145/0808/84/e1fbc11ac605.png"}
if (UserBirthDate == ""){UserBirthDate = "Дата не выставлена"}
if (UserAge == "0"){UserAge = "[Нет сведений]"}
var user=", <strong>"+UserName+"</strong>";
if (user == ", <strong></strong>"){user = ""}
var arr=document.getElementsByTagName("div")
i=0
while(arr[i] ){
if(arr[i].id=="pun-main") {
name=arr[i].innerHTML
name=name.substring(0)
arr[i].innerHTML="<div class=category><h2>Информационное табло</h2><div class=container><table border=0><tr><td><a href='/profile.php?section=avatar&id="+UserID+"' title='Изменить аватару'><img src="+UserAvatar+"></a><br /><strong>"+UserTitle+"</strong></td><td width=40%>Приветствуем на форуме"+user+"!<br />"+sex+"<br />Вы используете стиль: <strong>"+BoardStyle+"</strong><br />Вы в группе  <strong>"+GroupTitle+"</strong><br />На форуме Вами было оставлено <strong>"+UserPosts+"</strong> сообщений<br />Ваш возраст: <strong>"+UserAge+"</strong>.<Br />Ваш день рождения: <strong>"+UserBirthDate+"</strong><br /><br />Профиль <a href='/profile.php?id="+UserID+"'>"+UserLogin+"</a> | Ваши <a href='/userlist.php?&show_group="+GroupID+"'>соучастники</a></td><td width=40%><strong>Отношения</strong><br /><br /><a href='/respect.php?id="+UserID+"'>Уважение</a>: <strong>"+UserRespectPlus+"</strong>/<strong>"+UserRespectMinus+"</strong><br /><a href='/positive.php?id="+UserID+"'>Позитив</a>: <strong>"+UserPositivePlus+"</strong>/<strong>"+UserPositiveMinus+"</strong><Br /><Br />Вы зарегистрировались "+tm+" и провели на форуме <strong>"+UserTotalReg+"</strong> дней</td></tr></table></div></div><br /><br />"+name
}i++}
</script>
<script type="text/javascript">
var arr=document.getElementsByTagName("div")
i=0
str=document.URL
while(arr[i] ){
if(arr[i].id=="pun-main" && GroupID == "3") {
name=arr[i].innerHTML
name=name.substring(0)
arr[i].innerHTML="<div class=category><h2>Информационное табло</h2><div class=container><table border=0><tr><td><img src=http://s54.radikal.ru/i145/0808/84/e1fbc11ac605.png></td><td width=80%>Приветствуем тебя на форуме, Гость.<br />Для участия в конференциях просьба <a href='login.php'>войти</a> или <a href='register.php'>зарегистрироваться</a>.</td></tr></table></div></div><Br />"+name
}
i++
}
</script>

0

8

Таблица-слайдер (с переключением стрелками)

в html-низ
здесь var slideWidth = 560; - ширина слайдера, меняется в том числе обязательно

Код:
<script type="text/javascript">
$(document).ready(function(){
  var currentPosition = 0;
  var slideWidth = 560;
  var slides = $('.slide');
  var numberOfSlides = slides.length;
  // С помощью скрипта убираем прокрутку в контейнере.
  $('#slidesContainer').css('overflow', 'hidden');
  // Свернем все вкладки .slides в блок #slideInner 
  slides .wrapAll('<div id="slideInner"></div>')
.css({
      'float' : 'left',
      'width' : slideWidth
    });
  // Проставим блоку #slideInner ширину, равную общей ширине контейнеров
  $('#slideInner').css('width', slideWidth * numberOfSlides);
  $('#slideshow')
    .prepend('<span class="control" id="leftControl">Clicking moves left</span>')
    .append('<span class="control" id="rightControl">Clicking moves right</span>');
  manageControls(currentPosition);
  $('.control')
    .bind('click', function(){
currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;
    manageControls(currentPosition);
    $('#slideInner').animate({
      'marginLeft' : slideWidth*(-currentPosition)
    });
  });
  function manageControls(position){
    // Скрыть левую стрелку у первого контейнера
if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
// Скрыть правую стрелку у последнего контейнера
    if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show() }
  }	
});
</script>

стиль слайдера, во второе окно стиля или в html-верх (между тегами <style> </style>)

Код:
#slideshow {
margin: 0 auto;
width: 640px;
height: 263px;
background: transparent url(http://uploads.ru/i/H/l/O/HlOZA.jpg) no-repeat 0 0;
position: relative;}

#slideshow #slidesContainer {
  margin: 0 auto;
  width: 560px;
  height: 263px;
  overflow: auto; /* поддержка прокрутки */
  position: relative;}

#slideshow #slidesContainer .slide {
  margin: 0 auto;
  width: 540px; /* На двадцать пикселев меньше чем ширина #slidesContainer */
  height: 263px;}

.control {
  display: block;
  width: 39px;
  height: 263px;
  text-indent: -10000px;
  position: absolute;
  cursor: pointer;
  z-index: 100;}

#leftControl {
  top: 0px;
  left: 0px;
  background: transparent url(http://uploads.ru/i/M/Y/u/MYu8W.jpg) no-repeat 0 0;}

#rightControl {
  top: 0px;
  right: 0px;
  background: transparent url(http://uploads.ru/i/D/z/Q/DzQ6a.jpg) no-repeat 0 0;}

Внешний вид
в первых трех блоках
width: 640px; - ширина (не забудьте поменять так же и в первой части когда)
height: 263px; - высота

в #slideshow можно установить свой фон
background: transparent url(http://uploads.ru/i/H/l/O/HlOZA.jpg) no-repeat 0 0;

блок .control отвечает за стрелки, здесь можно установить их ширину и высоту (width: 39px; height: 263px;)

#leftControl - левая стрелка
#rightControl - правая стрелка
background: transparent url(http://uploads.ru/i/M/Y/u/MYu8W.jpg) no-repeat 0 0;} - изменяет изображение
top: 0px; - двигает стрелки вниз, если поставить отрицательное значение - вверх
left:0; и right: 0px; - двигает стрелки вправо (влево), при отрицательном значении - влево (вправо).

Слайдер

Код:
<div id="slideshow" style="-"><div id="slidesContainer">

      <div class="slide">
Первый
      </div>

<div class="slide">
Второй
      </div>

<div class="slide" style="background-image: url(http://uploads.ru/i/g/f/p/gfpLE.jpg);">
Третий
      </div>

<div class="slide">
Четвертый
      </div>

</div></div>

<div id="slideshow" style="-"> поможет задать стиль слайдера в целом. в кавычках (style="-") можно прописать цвет шрифта, шрифт, размер и т.д. как в обычном css (не забывая разделять ;)
в третьем контейнере установлен свой фон, style="background-image: url(http://uploads.ru/i/g/f/p/gfpLE.jpg); - такой же прием можно использовать и для других контейнеров, кроме того добавляя туда все остальное (шрифт, цвет и т.д.)

0


Вы здесь » Futura: каталог аниме форумов » Таблицы » Таблицы, панельки и пр.


Рейтинг форумов | Создать форум бесплатно © 2007–2017 «QuadroSystems» LLC