Есть таблица из блоков . Строки добавляются как надо, но при попытке добавить ещё один блок, нижняя строка не смещается, а находит на блок.
$(document).ready(function () {
$('div.table_row.workplace_row').hover(
function () {
$(this).find('div.workplace_td.pointer').fadeIn(200)
},
function () {
$(this).find('div.workplace_td.pointer').fadeOut(200)
}).click(
function () {
$(this).find('div.item_body').fadeToggle(200);
$(this).css({'border-radius' : '5px 5px 0 0'});
}
)
});
@import url('https://fonts.googleapis.com/css?family=Roboto:400,700');
body, html {
width: 100%;
height: 100%;
}
body {
margin: 0;
background: #000;
}
h1, h2, h3, h4, label, input {
font-family: Roboto, sans-serif;
}
h2 {
color: #435063;
font-size: 22px;
margin: 20px 0 0 30px;
}
h3 {
color: #b5babc;
font-size: 12px;
font-weight: normal;
margin: 5px 0 0 30px;
}
p {
font-family: Roboto, sans-serif;
}
a {
font-family: Roboto, sans-serif;
text-decoration: none;
}
.site_header {
position: absolute;
width:100% - 300px;
background: #29313C;
height: 66px;
z-index: 2;
left: 150px;
right: 150px;
top: 0%;
bottom: 0%;
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3);
}
.site_logo_icon{
position: absolute;
margin: 15px 0 0 27px;
}
.site_logo_name{
position: absolute;
margin: 17px 0 0 63px;
}
.site_logo_name p{
color: #f2f2f2;
font-size: 30px;
font-weight: bold;
margin: 0 0 0 0;
}
.side_menu {
position: absolute;
height: 100% - 66px;
background: #323A45;
width: 80px;
z-index: 1;
top: 66px;
left: 150px;
right: 0%;
bottom: 0%;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
}
.side_button{
float: left;
width: 50px;
height: 40px;
background: #282E37;
border-radius: 4px;
}
.side_button.first {
margin: 30px 0 0 13px;
}
.side_button.second{
margin: 5px 0 0 13px;
}
.side_button a{
display: block;
height: 40px;
width: 50px;
}
.side_button img{
margin: -18px 0 0 -29px;
}
.side_button_image {
position: absolute;
margin: 13px 0 0 16px;
}
.svg_ {
margin: 6px 0 0 6px;
}
.svg_client {
margin: 6px 0 0 8px;
}
.svg_error {
margin: 13px 0 0 12px;
}
.svg_side_button {
margin: 13px 0 0 16px;
}
.svg_side_find {
margin: 8px 0 0 12px;
}
.svg_side_money {
margin: 7.5px 0 0 12.5px;
}
.svg_side_report {
margin: 7px 0 0 12.5px;
}
.main_workplace {
position: absolute;
background: #f2f2f2;
height: 100% - 66px;
width: 100% - 230px;
top: 66px;
left: 230px;
right: 150px;
bottom: 0%;
overflow: auto;
}
.workplace_title{
width: 400px;
height: 42px;
margin: 25px 0 0 10px;
}
.table_row {
width: 1400px;
background: #ffffff;
border-radius: 5px;
margin: 2px 30px 0;
box-shadow: 0 0 9px -4px rgba(0, 0, 0, .5);
}
.table_row.workplace_row {
margin: 5px 40px 0 40px;
height: 50px;
}
.table_row.title_table {
margin: 20px 40px 0 40px;
height: 40px;
}
.title_td {
height: 100%;
}
.title_td.td_1 {
float: left;
width: 250px;
}
.title_table.p{
color: #435063;
font-size: 13px;
font-weight: bold;
margin: 13px 20px 0;
}
.title_td.td_2 {
float: left;
width: 550;
}
.title_td.td_3 {
float: left;
width: 300;
}
.title_td.td_4 {
float: left;
width: 200px;
}
.title_td.td_5 {
float: right;
width: 100px;
}
.workplace_td {
position: absolute;
}
.workplace_td.icon_block {
position: absolute;
width: 30px;
height: 30px;
border-radius: 3px;
margin: 10px 0 0 19px;
}
.workplace_td.icon_block.active {
background: #B2D170;
}
.workplace_td.icon_block.not_active {
background: #FF5943;
}
.workplace_td.pointer {
margin: 14px 0 0 37px;
display: none;
}
.workplace_td.icon.pointer a{
display: block;
width: 24px;
height: 24px;
}
.workplace_td.title {
margin: 0 0 0 35px;
}
.workplace_td.title p{
color: #435063;
font-size: 14px;
font-weight: bold;
margin: 17px 0 0 25px;
}
.workplace_td.date p{
color: #435063;
font-size: 14px;
font-weight: bold;
margin: 17px 0 0 20px;
}
.item_body{
width: 1400px;
height: 300px;
background: #ffffff;
border-radius: 0 0 5px 5px;
/*margin: 0 0 0 40px;*/
padding: 0 0 20px 0;
box-shadow: 0px 6px 9px -4px rgba(0, 0, 0, .5);
/*display: none;*/
}
.list_title {
margin: 18px 0 0 5px;
}
.list_title h2{
font-size: 16px;
font-weight: bold;
}
.list_title p{
color: #b5babc;
font-size: 12px;
font-weight: normal;
margin: 5px 0 0 30px;
}
.list_row {
float: left;
width: 95.5%;
background: #ffffff;
height: 40px;
box-shadow: 0 0 9px -4px rgba(0, 0, 0, .5);
}
.list_row p{
color: #435063;
font-size: 11px;
font-weight: bold;
margin: 13px 0 0 10px;
}
.list_row.title {
margin: 15px 0 0 35px;
}
.list_row.workrow {
margin: 5px 0 0px 35px;
}
.list_button{
float: left;
width: 10%;
background: #ffffff;
height: 36px;
box-shadow: 0 0 9px -4px rgba(0, 0, 0, .5);
margin: 25px 0 0px 35px;
}
.list_button_title p{
color: #435063;
font-size: 11px;
font-weight: bold;
margin: 13px 0 0 30px;
}
.list_button_icon {
position: absolute;
margin: 12px 0 0px 10px;
}
.list_hide{
float: left;
font-size: 12px;
margin: 25px 0 0px 1295px;
}
.table_row.find_place {
margin: 20px 40px 0 40px;
width: 800px;
height: 650px;
}
.table_row.find_place select{
margin: 0 0 0 30px;
}
.find_label {
float: left;
width: 800px;
margin: 30px 0 0 0;
}
.find_label label{
color: #435063;
font-size: 16px;
margin: 0 0 0 30px;
font-weight: bold;
}
.find_label input{
margin: 0 0 0 10px;
width: 243px;
}
.find_label.street input{
width: 300px;
}
.find_label.home input{
width: 90px;
}
.find_label.name input{
width: 298px;
}
.button {
position: relative;
display: inline-block;
font-size: 90%;
font-weight: 700;
color: rgb(209,209,217);
text-decoration: none;
text-shadow: 0 -1px 2px rgba(0,0,0,.2);
padding: .5em 1em;
outline: none;
border-radius: 3px;
background: linear-gradient(rgb(63, 76, 94), rgb(50, 58, 69)) rgb(63, 76, 94);
box-shadow:
0 1px rgba(255,255,255,.2) inset,
0 3px 5px rgba(0,1,6,.5),
0 0 1px 1px rgba(0,1,6,.2);
transition: .2s ease-in-out;
margin: 30px 0 0 30px;
}
.button:hover:not(:active) {
background: linear-gradient(rgb(98, 114, 135), rgb(50, 58, 69)) rgb(98, 114, 135);
}
.button:active {
top: 1px;
background: linear-gradient(rgb(79, 96, 119), rgb(50, 58, 69)) rgb(79, 96, 119);
box-shadow: 0 -1px 3px rgba(0,0,0,.3), 0 1px 1px #fff, inset 0 1px 2px rgba(0,0,0,.8), inset 0 -1px 0 rgba(0,0,0,.05);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css">
<script src="jquery-3.2.1.min.js"></script>
<script src="listhelpers.js"></script>
</head>
<body>
<div class="site_header">
<div class="site_logo_icon">
<svg width="26" height="36" viewBox="0 0 26 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M4 8H22C25 8 25 11 25 11V32C25 32 25 35 22 35H3.73244C3.38663 35.5978 2.74028 36 2 36C0.89543 36 0 35.1046 0 34C0 32.8954 0.89543 32 2 32C2.74028 32 3.38663 32.4022 3.73244 33H21C23 33.0288 23 31 23 31V12C23 12 23 10 21 10H5C3 10 3 12 3 12V24.2676C3.5978 24.6134 4 25.2597 4 26C4 27.1046 3.10457 28 2 28C0.89543 28 0 27.1046 0 26C0 25.2597 0.402199 24.6134 1 24.2676V11C1 11 1 8 4 8ZM26 5C26 6 25 6 25 6H1C1 6 0 6 0 5C0 4 1 4 1 4H8V2C8 2 8 0 10 0H16C18 0 18 2 18 2V4H25C25 4 26 4 26 5ZM16 4V2H10V4H16ZM9 14C9 14 9 13 10 13C11 13 11 14 11 14V29C11 29 11 30 10 30C9 30 9 29 9 29V14ZM15 14C15 14 15 13 16 13C17 13 17 14 17 14V29C17 29 17 30 16 30C15 30 15 29 15 29V14Z" fill="#00D4FF"/>
</svg>
</div>
<div class="site_logo_name">
<p>ЭкоТэк</p>
</div>
</div>
<div class="side_menu">
</div>
<div class="main_workplace">
<div class="workplace_title">
<h2>Лицевые счета</h2>
<h3>Всего счетов: 50 000</h3>
</div>
<div class="table_row title_table">
<div class="title_td td_1">
<p class="title_table p">ЛИЦЕВОЙ СЧЁТ</p>
</div>
<div class="title_td td_2">
<p class="title_table p">АДРЕС</p>
</div>
<div class="title_td td_3">
<p class="title_table p">СОБСТВЕННИК</p>
</div>
<div class="title_td td_4">
<p class="title_table p">НОМЕР ДОГОВОРА</p>
</div>
<div class="title_td td_5"></div>
</div>
<div class="table_row workplace_row">
<div class="title_td td_1">
<div class="workplace_td icon_block active">
<svg class="svg_" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 11V12H6V11H1V18H17V11H12ZM5 0V4H0V10H6V8H12V10H18V4H13V0H5ZM7 4L7 2H11V4H7ZM7 9H11V11H7V9Z" fill="white"/>
</svg>
</div>
<div class="workplace_td title">
<p>л/c № 3843050000</p>
</div>
</div>
<div class="title_td td_2">
<div class="workplace_td date">
<p>653000, Кемеровская обл, Прокопьевск г, Селиванова ул, дом № 3, Кв. 7</p>
</div>
</div>
<div class="title_td td_3">
<div class="workplace_td date">
<p>Наумов Вячеслав Викторович</p>
</div>
</div>
<div class="title_td td_4">
<div class="workplace_td date">
<p>105298/2018</p>
</div>
</div>
<div class="title_td td_5">
<div class="workplace_td pointer">
<svg width="24" height="24" viewBox="0 0 330.59 401.98" xmlns="http://www.w3.org/2000/svg">
<path cfill-rule="evenodd" d="M73.67,164.16H206.33a15,15,0,0,0,0-30H73.67a15,15,0,1,0,0,30Z" fill="323a45"/>
<path fill-rule="evenodd" d="M259.61,254h-8a16.27,16.27,0,0,0-16.26,16.26v19.65h40.56V270.24A16.27,16.27,0,0,0,259.61,254Z" fill="323a45"/>
<path fill-rule="evenodd" d="M319.31,271.58v-1.34A59.8,59.8,0,0,0,280,214.13V73.7a14.82,14.82,0,0,0-4.34-10.48L216.78,4.34A14.82,14.82,0,0,0,206.3,0H29.11A29.14,29.14,0,0,0,0,29.11v312.1a29.14,29.14,0,0,0,29.11,29.11H180.59v1.44A30.26,30.26,0,0,0,210.82,402h89.54a30.26,30.26,0,0,0,30.23-30.22V295.12A30.18,30.18,0,0,0,319.31,271.58Zm-127.44-1.34v1.34a30.18,30.18,0,0,0-11.28,23.54v42.79h-149V32.41H185.7V76A19.12,19.12,0,0,0,204.81,95.1h43.58V210.62a59.42,59.42,0,0,0-36.14,14.75,15,15,0,0,0-5.92-1.21H73.67a15,15,0,1,0,0,30H194.09A59.3,59.3,0,0,0,191.87,270.24Zm113.72,45.24H287.82a8.11,8.11,0,1,0,0,16.22h17.77v15H287.82a8.12,8.12,0,0,0,0,16.23h17.77v8.83a5.23,5.23,0,0,1-5.23,5.22H210.82a5.23,5.23,0,0,1-5.23-5.22V295.12a5.23,5.23,0,0,1,5.23-5.23h6.05V270.24a34.73,34.73,0,0,1,34.7-34.7h8a34.73,34.73,0,0,1,34.7,34.7v19.65h6.05a5.23,5.23,0,0,1,5.23,5.23v20.36Z" fill="323a45"/>
</svg>
</div>
</div>
<div class="item_body">
</div>
</div>
<div class="table_row workplace_row">
<div class="title_td td_1">
<div class="workplace_td icon_block active">
<svg class="svg_" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 11V12H6V11H1V18H17V11H12ZM5 0V4H0V10H6V8H12V10H18V4H13V0H5ZM7 4L7 2H11V4H7ZM7 9H11V11H7V9Z" fill="white"/>
</svg>
</div>
<div class="workplace_td title">
<p>л/c № 3843050000</p>
</div>
</div>
<div class="title_td td_2">
<div class="workplace_td date">
<p>653000, Кемеровская обл, Прокопьевск г, Селиванова ул, дом № 3, Кв. 7</p>
</div>
</div>
<div class="title_td td_3">
<div class="workplace_td date">
<p>Наумов Вячеслав Викторович</p>
</div>
</div>
<div class="title_td td_4">
<div class="workplace_td date">
<p>105298/2018</p>
</div>
</div>
<div class="title_td td_5">
<div class="workplace_td pointer">
<svg width="24" height="24" viewBox="0 0 330.59 401.98" xmlns="http://www.w3.org/2000/svg">
<path cfill-rule="evenodd" d="M73.67,164.16H206.33a15,15,0,0,0,0-30H73.67a15,15,0,1,0,0,30Z" fill="323a45"/>
<path fill-rule="evenodd" d="M259.61,254h-8a16.27,16.27,0,0,0-16.26,16.26v19.65h40.56V270.24A16.27,16.27,0,0,0,259.61,254Z" fill="323a45"/>
<path fill-rule="evenodd" d="M319.31,271.58v-1.34A59.8,59.8,0,0,0,280,214.13V73.7a14.82,14.82,0,0,0-4.34-10.48L216.78,4.34A14.82,14.82,0,0,0,206.3,0H29.11A29.14,29.14,0,0,0,0,29.11v312.1a29.14,29.14,0,0,0,29.11,29.11H180.59v1.44A30.26,30.26,0,0,0,210.82,402h89.54a30.26,30.26,0,0,0,30.23-30.22V295.12A30.18,30.18,0,0,0,319.31,271.58Zm-127.44-1.34v1.34a30.18,30.18,0,0,0-11.28,23.54v42.79h-149V32.41H185.7V76A19.12,19.12,0,0,0,204.81,95.1h43.58V210.62a59.42,59.42,0,0,0-36.14,14.75,15,15,0,0,0-5.92-1.21H73.67a15,15,0,1,0,0,30H194.09A59.3,59.3,0,0,0,191.87,270.24Zm113.72,45.24H287.82a8.11,8.11,0,1,0,0,16.22h17.77v15H287.82a8.12,8.12,0,0,0,0,16.23h17.77v8.83a5.23,5.23,0,0,1-5.23,5.22H210.82a5.23,5.23,0,0,1-5.23-5.22V295.12a5.23,5.23,0,0,1,5.23-5.23h6.05V270.24a34.73,34.73,0,0,1,34.7-34.7h8a34.73,34.73,0,0,1,34.7,34.7v19.65h6.05a5.23,5.23,0,0,1,5.23,5.23v20.36Z" fill="323a45"/>
</svg>
</div>
</div>
</div>
</div>
</body>
</html>
Простите за большой код, все, что мог, убрал! Проблема в том, что появляющийся блок не смещает строку! Подскажите пожалуйста
Блок .table_row.workplace_row
имеет фиксированую высоту. Из за этого следующий блок не смещается в низ. Когда блок "Активен" вам нужно менять его высоту на auto
. В примере это делается через класс --is_show
.
$(document).ready(function() {
$('div.table_row.workplace_row').hover(
function() {
$(this).find('div.workplace_td.pointer').fadeIn(200)
},
function() {
$(this).find('div.workplace_td.pointer').fadeOut(200)
}).click(
function() {
$(this).find('div.item_body').fadeToggle(200);
$(this).toggleClass('--is_show').css({
'border-radius': '5px 5px 0 0'
});
}
)
});
/* ---- New ---- */
.table_row.workplace_row {
overflow: hidden;
}
.workplace_row.--is_show {
height: auto !important;
}
/* ---- | ---- */
@import url('https://fonts.googleapis.com/css?family=Roboto:400,700');
body,
html {
width: 100%;
height: 100%;
}
body {
margin: 0;
background: #000;
}
h1,
h2,
h3,
h4,
label,
input {
font-family: Roboto, sans-serif;
}
h2 {
color: #435063;
font-size: 22px;
margin: 20px 0 0 30px;
}
h3 {
color: #b5babc;
font-size: 12px;
font-weight: normal;
margin: 5px 0 0 30px;
}
p {
font-family: Roboto, sans-serif;
}
a {
font-family: Roboto, sans-serif;
text-decoration: none;
}
.site_header {
position: absolute;
width: 100% - 300px;
background: #29313C;
height: 66px;
z-index: 2;
left: 150px;
right: 150px;
top: 0%;
bottom: 0%;
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3);
}
.site_logo_icon {
position: absolute;
margin: 15px 0 0 27px;
}
.site_logo_name {
position: absolute;
margin: 17px 0 0 63px;
}
.site_logo_name p {
color: #f2f2f2;
font-size: 30px;
font-weight: bold;
margin: 0 0 0 0;
}
.side_menu {
position: absolute;
height: 100% - 66px;
background: #323A45;
width: 80px;
z-index: 1;
top: 66px;
left: 150px;
right: 0%;
bottom: 0%;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
}
.side_button {
float: left;
width: 50px;
height: 40px;
background: #282E37;
border-radius: 4px;
}
.side_button.first {
margin: 30px 0 0 13px;
}
.side_button.second {
margin: 5px 0 0 13px;
}
.side_button a {
display: block;
height: 40px;
width: 50px;
}
.side_button img {
margin: -18px 0 0 -29px;
}
.side_button_image {
position: absolute;
margin: 13px 0 0 16px;
}
.svg_ {
margin: 6px 0 0 6px;
}
.svg_client {
margin: 6px 0 0 8px;
}
.svg_error {
margin: 13px 0 0 12px;
}
.svg_side_button {
margin: 13px 0 0 16px;
}
.svg_side_find {
margin: 8px 0 0 12px;
}
.svg_side_money {
margin: 7.5px 0 0 12.5px;
}
.svg_side_report {
margin: 7px 0 0 12.5px;
}
.main_workplace {
position: absolute;
background: #f2f2f2;
height: 100% - 66px;
width: 100% - 230px;
top: 66px;
left: 230px;
right: 150px;
bottom: 0%;
overflow: auto;
}
.workplace_title {
width: 400px;
height: 42px;
margin: 25px 0 0 10px;
}
.table_row {
width: 1400px;
background: #ffffff;
border-radius: 5px;
margin: 2px 30px 0;
box-shadow: 0 0 9px -4px rgba(0, 0, 0, .5);
}
.table_row.workplace_row {
margin: 5px 40px 0 40px;
height: 50px;
}
.table_row.title_table {
margin: 20px 40px 0 40px;
height: 40px;
}
.title_td {
height: 100%;
}
.title_td.td_1 {
float: left;
width: 250px;
}
.title_table.p {
color: #435063;
font-size: 13px;
font-weight: bold;
margin: 13px 20px 0;
}
.title_td.td_2 {
float: left;
width: 550;
}
.title_td.td_3 {
float: left;
width: 300;
}
.title_td.td_4 {
float: left;
width: 200px;
}
.title_td.td_5 {
float: right;
width: 100px;
}
.workplace_td {
position: absolute;
}
.workplace_td.icon_block {
position: absolute;
width: 30px;
height: 30px;
border-radius: 3px;
margin: 10px 0 0 19px;
}
.workplace_td.icon_block.active {
background: #B2D170;
}
.workplace_td.icon_block.not_active {
background: #FF5943;
}
.workplace_td.pointer {
margin: 14px 0 0 37px;
display: none;
}
.workplace_td.icon.pointer a {
display: block;
width: 24px;
height: 24px;
}
.workplace_td.title {
margin: 0 0 0 35px;
}
.workplace_td.title p {
color: #435063;
font-size: 14px;
font-weight: bold;
margin: 17px 0 0 25px;
}
.workplace_td.date p {
color: #435063;
font-size: 14px;
font-weight: bold;
margin: 17px 0 0 20px;
}
.item_body {
width: 1400px;
height: 300px;
background: #ffffff;
border-radius: 0 0 5px 5px;
/*margin: 0 0 0 40px;*/
padding: 0 0 20px 0;
box-shadow: 0px 6px 9px -4px rgba(0, 0, 0, .5);
/*display: none;*/
}
.list_title {
margin: 18px 0 0 5px;
}
.list_title h2 {
font-size: 16px;
font-weight: bold;
}
.list_title p {
color: #b5babc;
font-size: 12px;
font-weight: normal;
margin: 5px 0 0 30px;
}
.list_row {
float: left;
width: 95.5%;
background: #ffffff;
height: 40px;
box-shadow: 0 0 9px -4px rgba(0, 0, 0, .5);
}
.list_row p {
color: #435063;
font-size: 11px;
font-weight: bold;
margin: 13px 0 0 10px;
}
.list_row.title {
margin: 15px 0 0 35px;
}
.list_row.workrow {
margin: 5px 0 0px 35px;
}
.list_button {
float: left;
width: 10%;
background: #ffffff;
height: 36px;
box-shadow: 0 0 9px -4px rgba(0, 0, 0, .5);
margin: 25px 0 0px 35px;
}
.list_button_title p {
color: #435063;
font-size: 11px;
font-weight: bold;
margin: 13px 0 0 30px;
}
.list_button_icon {
position: absolute;
margin: 12px 0 0px 10px;
}
.list_hide {
float: left;
font-size: 12px;
margin: 25px 0 0px 1295px;
}
.table_row.find_place {
margin: 20px 40px 0 40px;
width: 800px;
height: 650px;
}
.table_row.find_place select {
margin: 0 0 0 30px;
}
.find_label {
float: left;
width: 800px;
margin: 30px 0 0 0;
}
.find_label label {
color: #435063;
font-size: 16px;
margin: 0 0 0 30px;
font-weight: bold;
}
.find_label input {
margin: 0 0 0 10px;
width: 243px;
}
.find_label.street input {
width: 300px;
}
.find_label.home input {
width: 90px;
}
.find_label.name input {
width: 298px;
}
.button {
position: relative;
display: inline-block;
font-size: 90%;
font-weight: 700;
color: rgb(209, 209, 217);
text-decoration: none;
text-shadow: 0 -1px 2px rgba(0, 0, 0, .2);
padding: .5em 1em;
outline: none;
border-radius: 3px;
background: linear-gradient(rgb(63, 76, 94), rgb(50, 58, 69)) rgb(63, 76, 94);
box-shadow: 0 1px rgba(255, 255, 255, .2) inset, 0 3px 5px rgba(0, 1, 6, .5), 0 0 1px 1px rgba(0, 1, 6, .2);
transition: .2s ease-in-out;
margin: 30px 0 0 30px;
}
.button:hover:not(:active) {
background: linear-gradient(rgb(98, 114, 135), rgb(50, 58, 69)) rgb(98, 114, 135);
}
.button:active {
top: 1px;
background: linear-gradient(rgb(79, 96, 119), rgb(50, 58, 69)) rgb(79, 96, 119);
box-shadow: 0 -1px 3px rgba(0, 0, 0, .3), 0 1px 1px #fff, inset 0 1px 2px rgba(0, 0, 0, .8), inset 0 -1px 0 rgba(0, 0, 0, .05);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css">
<script src="jquery-3.2.1.min.js"></script>
<script src="listhelpers.js"></script>
</head>
<body>
<div class="site_header">
<div class="site_logo_icon">
<svg width="26" height="36" viewBox="0 0 26 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M4 8H22C25 8 25 11 25 11V32C25 32 25 35 22 35H3.73244C3.38663 35.5978 2.74028 36 2 36C0.89543 36 0 35.1046 0 34C0 32.8954 0.89543 32 2 32C2.74028 32 3.38663 32.4022 3.73244 33H21C23 33.0288 23 31 23 31V12C23 12 23 10 21 10H5C3 10 3 12 3 12V24.2676C3.5978 24.6134 4 25.2597 4 26C4 27.1046 3.10457 28 2 28C0.89543 28 0 27.1046 0 26C0 25.2597 0.402199 24.6134 1 24.2676V11C1 11 1 8 4 8ZM26 5C26 6 25 6 25 6H1C1 6 0 6 0 5C0 4 1 4 1 4H8V2C8 2 8 0 10 0H16C18 0 18 2 18 2V4H25C25 4 26 4 26 5ZM16 4V2H10V4H16ZM9 14C9 14 9 13 10 13C11 13 11 14 11 14V29C11 29 11 30 10 30C9 30 9 29 9 29V14ZM15 14C15 14 15 13 16 13C17 13 17 14 17 14V29C17 29 17 30 16 30C15 30 15 29 15 29V14Z" fill="#00D4FF"/>
</svg>
</div>
<div class="site_logo_name">
<p>ЭкоТэк</p>
</div>
</div>
<div class="side_menu">
</div>
<div class="main_workplace">
<div class="workplace_title">
<h2>Лицевые счета</h2>
<h3>Всего счетов: 50 000</h3>
</div>
<div class="table_row title_table">
<div class="title_td td_1">
<p class="title_table p">ЛИЦЕВОЙ СЧЁТ</p>
</div>
<div class="title_td td_2">
<p class="title_table p">АДРЕС</p>
</div>
<div class="title_td td_3">
<p class="title_table p">СОБСТВЕННИК</p>
</div>
<div class="title_td td_4">
<p class="title_table p">НОМЕР ДОГОВОРА</p>
</div>
<div class="title_td td_5"></div>
</div>
<div class="table_row workplace_row --is_show">
<div class="title_td td_1">
<div class="workplace_td icon_block active">
<svg class="svg_" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 11V12H6V11H1V18H17V11H12ZM5 0V4H0V10H6V8H12V10H18V4H13V0H5ZM7 4L7 2H11V4H7ZM7 9H11V11H7V9Z" fill="white"/>
</svg>
</div>
<div class="workplace_td title">
<p>л/c № 3843050000</p>
</div>
</div>
<div class="title_td td_2">
<div class="workplace_td date">
<p>653000, Кемеровская обл, Прокопьевск г, Селиванова ул, дом № 3, Кв. 7</p>
</div>
</div>
<div class="title_td td_3">
<div class="workplace_td date">
<p>Наумов Вячеслав Викторович</p>
</div>
</div>
<div class="title_td td_4">
<div class="workplace_td date">
<p>105298/2018</p>
</div>
</div>
<div class="title_td td_5">
<div class="workplace_td pointer">
<svg width="24" height="24" viewBox="0 0 330.59 401.98" xmlns="http://www.w3.org/2000/svg">
<path cfill-rule="evenodd" d="M73.67,164.16H206.33a15,15,0,0,0,0-30H73.67a15,15,0,1,0,0,30Z" fill="323a45"/>
<path fill-rule="evenodd" d="M259.61,254h-8a16.27,16.27,0,0,0-16.26,16.26v19.65h40.56V270.24A16.27,16.27,0,0,0,259.61,254Z" fill="323a45"/>
<path fill-rule="evenodd" d="M319.31,271.58v-1.34A59.8,59.8,0,0,0,280,214.13V73.7a14.82,14.82,0,0,0-4.34-10.48L216.78,4.34A14.82,14.82,0,0,0,206.3,0H29.11A29.14,29.14,0,0,0,0,29.11v312.1a29.14,29.14,0,0,0,29.11,29.11H180.59v1.44A30.26,30.26,0,0,0,210.82,402h89.54a30.26,30.26,0,0,0,30.23-30.22V295.12A30.18,30.18,0,0,0,319.31,271.58Zm-127.44-1.34v1.34a30.18,30.18,0,0,0-11.28,23.54v42.79h-149V32.41H185.7V76A19.12,19.12,0,0,0,204.81,95.1h43.58V210.62a59.42,59.42,0,0,0-36.14,14.75,15,15,0,0,0-5.92-1.21H73.67a15,15,0,1,0,0,30H194.09A59.3,59.3,0,0,0,191.87,270.24Zm113.72,45.24H287.82a8.11,8.11,0,1,0,0,16.22h17.77v15H287.82a8.12,8.12,0,0,0,0,16.23h17.77v8.83a5.23,5.23,0,0,1-5.23,5.22H210.82a5.23,5.23,0,0,1-5.23-5.22V295.12a5.23,5.23,0,0,1,5.23-5.23h6.05V270.24a34.73,34.73,0,0,1,34.7-34.7h8a34.73,34.73,0,0,1,34.7,34.7v19.65h6.05a5.23,5.23,0,0,1,5.23,5.23v20.36Z" fill="323a45"/>
</svg>
</div>
</div>
<div class="item_body">
</div>
</div>
<div class="table_row workplace_row">
<div class="title_td td_1">
<div class="workplace_td icon_block active">
<svg class="svg_" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 11V12H6V11H1V18H17V11H12ZM5 0V4H0V10H6V8H12V10H18V4H13V0H5ZM7 4L7 2H11V4H7ZM7 9H11V11H7V9Z" fill="white"/>
</svg>
</div>
<div class="workplace_td title">
<p>л/c № 3843050000</p>
</div>
</div>
<div class="title_td td_2">
<div class="workplace_td date">
<p>653000, Кемеровская обл, Прокопьевск г, Селиванова ул, дом № 3, Кв. 7</p>
</div>
</div>
<div class="title_td td_3">
<div class="workplace_td date">
<p>Наумов Вячеслав Викторович</p>
</div>
</div>
<div class="title_td td_4">
<div class="workplace_td date">
<p>105298/2018</p>
</div>
</div>
<div class="title_td td_5">
<div class="workplace_td pointer">
<svg width="24" height="24" viewBox="0 0 330.59 401.98" xmlns="http://www.w3.org/2000/svg">
<path cfill-rule="evenodd" d="M73.67,164.16H206.33a15,15,0,0,0,0-30H73.67a15,15,0,1,0,0,30Z" fill="323a45"/>
<path fill-rule="evenodd" d="M259.61,254h-8a16.27,16.27,0,0,0-16.26,16.26v19.65h40.56V270.24A16.27,16.27,0,0,0,259.61,254Z" fill="323a45"/>
<path fill-rule="evenodd" d="M319.31,271.58v-1.34A59.8,59.8,0,0,0,280,214.13V73.7a14.82,14.82,0,0,0-4.34-10.48L216.78,4.34A14.82,14.82,0,0,0,206.3,0H29.11A29.14,29.14,0,0,0,0,29.11v312.1a29.14,29.14,0,0,0,29.11,29.11H180.59v1.44A30.26,30.26,0,0,0,210.82,402h89.54a30.26,30.26,0,0,0,30.23-30.22V295.12A30.18,30.18,0,0,0,319.31,271.58Zm-127.44-1.34v1.34a30.18,30.18,0,0,0-11.28,23.54v42.79h-149V32.41H185.7V76A19.12,19.12,0,0,0,204.81,95.1h43.58V210.62a59.42,59.42,0,0,0-36.14,14.75,15,15,0,0,0-5.92-1.21H73.67a15,15,0,1,0,0,30H194.09A59.3,59.3,0,0,0,191.87,270.24Zm113.72,45.24H287.82a8.11,8.11,0,1,0,0,16.22h17.77v15H287.82a8.12,8.12,0,0,0,0,16.23h17.77v8.83a5.23,5.23,0,0,1-5.23,5.22H210.82a5.23,5.23,0,0,1-5.23-5.22V295.12a5.23,5.23,0,0,1,5.23-5.23h6.05V270.24a34.73,34.73,0,0,1,34.7-34.7h8a34.73,34.73,0,0,1,34.7,34.7v19.65h6.05a5.23,5.23,0,0,1,5.23,5.23v20.36Z" fill="323a45"/>
</svg>
</div>
</div>
</div>
</div>
</body>
</html>
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
хочу поднять блок с картинками регистрации и логина на 50 пикселей в верхно при использовании margin-top:50px; не работает почему хз
Пытаюсь сделать фон из нескольких gif-картинокХотелось бы чтобы и справа была гифка и слева, и соответственно так же вверху и внизу
Как добавить автоматическую прокрутку в чат ? Вот пример кода, который я думаю отвечает за показ сообщений и следовательно сюда куда-то можно...