Deff, Табла

Поделиться127-08-2020 17:57:57

Автор: тоха с пельменной
Уважение: +0
Сообщений: 55
мамин бродяга папин симпатяга
ФИО:
Lorem ipsum
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Провел на форуме:
1 день 2 часа
КЛАСС:

ОБЩАЯ ИНФОРМАЦИЯ

ИМЯ ФАМИЛИЯ
статус

Ссылка

Общая информация

Хронология

Взаимоотношения

Вкладка 1

Вкладка 2

Вкладка 3

Достижения!

0

Поделиться227-08-2020 23:02:04

Автор: тоха с пельменной
Уважение: +0
Сообщений: 55
мамин бродяга папин симпатяга
ФИО:
Lorem ipsum
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Провел на форуме:
1 день 2 часа
КЛАСС:

Cтиль( В конце Первого Окна Стиля):

Код:

/****************************
  Cтиль Всплывающей Таблички
****************************/
.table_for {
  position:relative;
  box-sizing:border-box;
  background:url(https://forumstatic.ru/files/001a/da/fd/85405.jpg);
  width: 769px;
  height: 520px;
  padding:10px;
  border: 2px solid #f1ba5b;
}
.table_for p{/*
  display:inline-block;
  margin:0!important;
  padding:0!important;*/
}
.table_for .profile{
  width:200px;
  height:319px;
  background:url(https://forumstatic.ru/files/001a/da/fd/91538.jpg);
  text-align:center;
}
.table_for .profile .ava p{
 display:inline-block;
 padding: 0!important;
 margin: 0!important;
}
.table_for .profile .ava{
  width:180px;
  height:180px;
  margin-top:7px;
  display:inline-block;
}
.table_for .profile .ava img{
  display:inline-block;
  margin:0!important;
  width:180px;
  height:180px;
}
.table_for .profile .ava img{   border: 1px solid #776444!important;
    box-shadow: 0 0 2px #5b7478 !important;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
}

.table_for .profile .ava img:hover {
transform: rotate(30deg);
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
background-color: #fff !important;
}

.table_for .profile .status{
  margin-top:15px;
  color:#BF9E6B;
}

.table_for .profile .lnk1,
.table_for .profile .lnk2{
  display:inline-block;
  width:76px;
  margin: 7px;
  border: 2px solid #f1ba5b;
}

/*Блок с Вкладками*/
.table_for .switcher{
  width:540px;
  height:319px;
  position:absolute;
  top:10px;
  left:220px;
}

/*Кнопки переключалок*/
.table_for .switcher .but_1,
.table_for .switcher .but_2,
.table_for .switcher .but_3{
 text-align:center!important;
 background:url(https://365psd.ru/images/backgrounds/texturetastic_gray.png);
 margin: 0 1px -1px 0;
 cursor:pointer;
 padding-top:7px;
 display:inline-block;
 border: 1px solid rgba(100,100,100,.25);
 border-bottom-color: #E9E9E9;
 font: normal normal 400 11px/16.5px 'Bebas Neue Regular';
 letter-spacing:1px;
 word-spacing:3px;
 width:142px;
 height:37px;
 box-sizing:border-box;
}
.table_for .switcher div[class^="but_"].active{
  background: #2d3132;
  color: #776444;
}
/*Сброс внутренних <p> Кнопок*/
.table_for .switcher .but_1 p,
.table_for .switcher .but_2 p,
.table_for .switcher .but_3 p{
 display:inline-block;
 padding: 0!important;
 margin: 0!important;
}

/*Блоки переключалок*/
.table_for .switcher .Tab1,
.table_for .switcher .Tab2,
.table_for .switcher .Tab3{
 background:url(https://365psd.ru/images/backgrounds/texturetastic_gray.png);
 height: 283px;
 padding:6px;
 overflow:hidden;
 overflow-y:auto;
 box-sizing:border-box;
 border: 1px solid rgba(100,100,100,.25);
}
.table_for .switcher .Tab2,
.table_for .switcher .Tab3{
 display:none;
}

.table_for table{
  width: 749px!important;
  position:absolute;
  margin-top:auto;
  left:8px;
  bottom:-6px;
}
.table_for table td{
  text-align:center!important;
  vertical-align:middle;
}
.table_for table td img{
  width:40px!important;
  height:auto;
  border: 2px solid #000;
}
/****************************
       END//Cтиль  Таблички
****************************/

Cкрипт Переключалки(В HTML низ):

Код:

!--Cкрипт Переключалок к Табличке © Deff-->
<script>
$('.table_for .switcher div[class^="but_"]').live('click', function(){
  $('.table_for .switcher div[class^="but_"]').removeClass('active');
  $(this).addClass('active');
  var ind = $('.table_for .switcher div[class^="but_"]').index(this);
  $('.table_for .switcher div[class^="Tab"]').hide();
    $('.table_for .switcher div[class^="Tab"]').eq(ind).show() ;
});
</script>

Код Самой таблички в сообщении Выше:

Код:

[mark]ОБЩАЯ ИНФОРМАЦИЯ[/mark]
[block=table_for]
[block=profile]
[block=ava]
[img]https://forumavatars.ru/img/avatars/001a/da/fd/2-1596017906.jpg[/img]
[/block]
[block=status]
ИМЯ ФАМИЛИЯ
статус
[/block]

[block=lnk1]
[url=http://judastest.artbb.ru/viewtopic.php?id=4#p43]Ссылка[/url]
[/block]
[block=lnk2]
[url=http://judastest.artbb.ru/viewtopic.php?id=4#p43]Ссылка[/url]
[/block]

[/block]


[block=switcher]
[block=but_1 active]Общая информация [/block][block=but_2]Хронология [/block][block=but_3]Взаимоотношения [/block]

[block=Tab1]
Вкладка 1
[/block]

[block=Tab2]
Вкладка 2
[/block]

[block=Tab3]
Вкладка 3
[/block]

[/block]
[color=#FFA000][align=center][b][font=Georgia][i]Достижения![/i][/font][/b][/align][/color]

[table layout=fixed width=100%]
[tr]
[td][img]http://img.icons8.com/bubbles/2x/food-cart.png[/img][/td]
[td][img]http://img.icons8.com/bubbles/2x/food-cart.png[/img][/td]
[td][img]http://img.icons8.com/bubbles/2x/food-cart.png[/img][/td]
[td][img]http://img.icons8.com/bubbles/2x/food-cart.png[/img][/td]
[td][img]http://img.icons8.com/bubbles/2x/food-cart.png[/img][/td]
[td][img]http://img.icons8.com/bubbles/2x/food-cart.png[/img][/td]
[td][img]http://img.icons8.com/bubbles/2x/food-cart.png[/img][/td]
[td][img]http://img.icons8.com/bubbles/2x/food-cart.png[/img][/td]
[td][img]http://img.icons8.com/bubbles/2x/food-cart.png[/img][/td]
[td][img]http://img.icons8.com/bubbles/2x/food-cart.png[/img][/td]
[td][img]http://img.icons8.com/bubbles/2x/food-cart.png[/img][/td]
[td][img]http://img.icons8.com/bubbles/2x/food-cart.png[/img][/td]
[td][img]http://img.icons8.com/bubbles/2x/food-cart.png[/img][/td]
[td][img]http://img.icons8.com/bubbles/2x/food-cart.png[/img][/td]
[td][img]http://img.icons8.com/bubbles/2x/food-cart.png[/img][/td]
[td][img]http://img.icons8.com/bubbles/2x/food-cart.png[/img][/td]
[/tr]
[tr]
[td][img]http://img.icons8.com/bubbles/2x/food-cart.png[/img][/td]
[td][img]http://img.icons8.com/bubbles/2x/food-cart.png[/img][/td]
[td][img]http://img.icons8.com/bubbles/2x/food-cart.png[/img][/td]
[td][img]http://img.icons8.com/bubbles/2x/food-cart.png[/img][/td]
[td][img]http://img.icons8.com/bubbles/2x/food-cart.png[/img][/td]
[td][img]http://img.icons8.com/bubbles/2x/food-cart.png[/img][/td]
[td][img]http://img.icons8.com/bubbles/2x/food-cart.png[/img][/td]
[td][img]http://img.icons8.com/bubbles/2x/food-cart.png[/img][/td]
[td][img]http://img.icons8.com/bubbles/2x/food-cart.png[/img][/td]
[td][img]http://img.icons8.com/bubbles/2x/food-cart.png[/img][/td]
[td][img]http://img.icons8.com/bubbles/2x/food-cart.png[/img][/td]
[td][img]http://img.icons8.com/bubbles/2x/food-cart.png[/img][/td]
[td][img]http://img.icons8.com/bubbles/2x/food-cart.png[/img][/td]
[td][img]http://img.icons8.com/bubbles/2x/food-cart.png[/img][/td]
[td][img]http://img.icons8.com/bubbles/2x/food-cart.png[/img][/td]
[td][img]http://img.icons8.com/bubbles/2x/food-cart.png[/img][/td]
[/tr]
[tr]
[td][img]http://img.icons8.com/bubbles/2x/food-cart.png[/img][/td]
[td][img]http://img.icons8.com/bubbles/2x/food-cart.png[/img][/td]
[td][img]http://img.icons8.com/bubbles/2x/food-cart.png[/img][/td]
[td][img]http://img.icons8.com/bubbles/2x/food-cart.png[/img][/td]
[td][img]http://img.icons8.com/bubbles/2x/food-cart.png[/img][/td]
[td][img]http://img.icons8.com/bubbles/2x/food-cart.png[/img][/td]
[td][img]http://img.icons8.com/bubbles/2x/food-cart.png[/img][/td]
[td][img]http://img.icons8.com/bubbles/2x/food-cart.png[/img][/td]
[td][img]http://img.icons8.com/bubbles/2x/food-cart.png[/img][/td]
[td][img]http://img.icons8.com/bubbles/2x/food-cart.png[/img][/td]
[td][img]http://img.icons8.com/bubbles/2x/food-cart.png[/img][/td]
[td][img]http://img.icons8.com/bubbles/2x/food-cart.png[/img][/td]
[td][img]http://img.icons8.com/bubbles/2x/food-cart.png[/img][/td]
[td][img]http://img.icons8.com/bubbles/2x/food-cart.png[/img][/td]
[td][img]http://img.icons8.com/bubbles/2x/food-cart.png[/img][/td]
[td][img]http://img.icons8.com/bubbles/2x/food-cart.png[/img][/td]
[/tr]
[/table]



[/block]

0

Поделиться327-08-2020 23:13:53

Автор: тоха с пельменной
Уважение: +0
Сообщений: 55
мамин бродяга папин симпатяга
ФИО:
Lorem ipsum
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Провел на форуме:
1 день 2 часа
КЛАСС:

Доп. Правка стиля к всплывающей таблице (Правка стиля исходного скрипта, в HTML низ, после теша <link со cтилем таблички:

Код:

<style>/* Стиль вкладки(LI)*/
.my-tabs>.tab-a{width: 770px;height: 520px;position: relative;z-index: 1;display: none;/* overflow-y: auto; */overflow: hidden;text-align: center;vertical-align: middle;border-radius: 1px;border: 0px solid;border-width: 0px 1px 0px 0px;padding: 0px 0px!important;}
/*Отступ контента вкладки сверху*/
.tab-a .post-content{
    margin-top: 0px;
    margin-right: -3px;
    text-align: left;
    display: inline-block;
}
</style>

0

Tester #3

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

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

Объявление

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

Deff, Табла

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

Поделиться127-08-2020 17:57:57

Поделиться227-08-2020 23:02:04

Поделиться327-08-2020 23:13:53