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

Объявление

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

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

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

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

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

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

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

02.04 Стряхну пыль с колонки новостей (тут должна быть шутка про то, что какая активность на аниме сообществе, такие и мы), напомню неравнодушным про тему исправления в каталоге, где Чибимун горячо желает видеть ссылки на новые форумы, поскольку сама не успевает все отслеживать. Спасибо, что остаетесь с нами, ребятки, даже в такие тяжелые времена. Всех люблю, не стесняйтесь писать, обращаться с вопросами и проявлять признаки жизни ♥
just one story
В городе начали происходить похищения и убийства людей, а преступника не могут поймать даже самые опытные офицеры полиции. По этому поводу городской совет решает вызвать команду детективов из ближайшего большого города, чтобы наконец закончить этот ад на земле.
Noster
Уже много лет люди, вампиры, оборотни и гаргульи сожительствуют бок о бок в мире и гармонии.
ЦОАР
Совсем юное микрогосудартсво в один город на берегах Мертвого мора (территория Израиля) в своей официальной и независимой регистрации – всего около 50 лет. Политический режим (официально): султанат, абсолютная монархия.
ЭНСК
В чёрном-чёрном городе на чёрной-чёрной улице стояло чёрное-чёрное здание. Многие из вас наверняка слышали подобную историю. На самом деле Энск вовсе не чёрный и пестрит множеством оттенков серого, от тёмных тонов побитого асфальта до белёсого смога металлургического завода. И чёрное-чёрное здание, в котором, кстати, располагается школа, тоже вовсе не чёрное, а посеревшее от времени некогда жёлтое.
PGSM: L'Ascension
Их история не была окончена. Трагедия, разлучившая принцесс в далеком прошлом, не сумела отнять у них право на второй шанс. На новое рождение и новый путь, который им вновь предстояло пройти рука об руку.
Naruto: After War
Год назад закончилась Четвертая Великая Война Шиноби. Альянс Шиноби в силе и процветает, Скрытые деревни отстраиваются и разрастаются. После войны многое изменилось, люди стали добрее друг к другу. Однако там, где есть Инь, всегда будет Ян. И там, где есть сила, всегда будут те, кто возжелают ее. История нового мира только начинается, а какой она окажется — решать лишь настоящим ниндзя.
Eternal Blaze - Naruto FRPG
Чем ярче горит пламя надежды, тем сильнее клубится тьма неизвестности. В то время, когда Великие Деревни забывают старые обиды и стараются всячески наладить дипломатические связи, призрачная угроза становится всё отчётливей...
Naruto. Everything is changing.
Един закон мироздания: все имеет свое начало и конец, Мирное время, установленное после Четвертой мировой войны шиноби, подходит к концу. Мир меняется, и люди меняются вместе с ним.
Soul Taker
Приключение Кида и его товарищей подошло к концу. Много воды с тех пор утекло, и если прежде они были обычными учениками Академии Шибусен с необычными силами, то теперь они спасли мир, заточив могущественного Асуру Кишина на чёрной луне.

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

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


Вы здесь » 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://forumupload.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://forumupload.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://forumupload.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: каталог аниме форумов » Таблицы » Таблицы, панельки и пр.


Рейтинг форумов | Создать форум бесплатно