[html]
<style>
/*вся таблица*/
#box {
width: 600px;
background: #d8dedf;
height: 400px;
position: relative;
margin: 20px auto;
border: 1px solid #d59f5f;
outline: 1px solid #bb9656;
outline-offset: 10px;
font-family: Coffee;
color: #191919;
line-height: 170%;
font-size: 11px;
}
/*изображение*/
#box picture {
height: 400px;
width: 150px;
position: absolute;
left: 0px;
top: 0px;
background-size: cover;
display: block;
border-right: 1px solid #bb9656;
}
/*информация*/
#box infobox {
width: 400px;
height: 360px;
position: absolute;
top: 20px;
right: 20px;
overflow: auto;
font-family: Coffee;
font-size: 13px;
line-height: 170%;
text-align: justify;
padding-right: 5px;
color: #191919;
display: block;
}
/*заголовки*/
#name h1 {
color: #272d52;
position: relative;
font-size: 20px;
text-transform: uppercase;
font-family: Fixedsys;
display: block;
width: auto;
text-align: right;
font-weight: 900;
margin:10px 0px;
border-bottom: 1px solid #bababa;
}
#box data {
font-size: 10px;
font-style: oblique;
}
#box a {
color: #000;
font-weight: 700;
text-decoration: none;
}
#box infobox::-webkit-scrollbar{width:2px}
#box infobox::-webkit-scrollbar-thumb{border:none!important;background:#bababa!important}
#box infobox::-webkit-scrollbar-track{background:none!important;border:none!important}
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #c9d4d6;
}
/* Style the buttons inside the tab */
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 7px 32px;
transition: 0.3s;
font-size: 17px;
font-family: Book Antiqua;
}
/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
}
/* Create an active/current tablink class */
.tab button.active {
background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}
</style>
<script>
function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>
<link rel="stylesheet" type="text/css" href="table.css">
<div id="name"> <h1>Записная книга</h1> </div>
<div id="box">
<picture style="background-image: url(https://forumupload.ru/uploads/001b/2b/63/4/348641.jpg)"></picture>
<infobox>
<div class="tab">
<button class="tablinks" onclick="openCity(event, 'London')" id="defaultOpen">активные</button>
<button class="tablinks" onclick="openCity(event, 'Paris')">архив</button>
<button class="tablinks" onclick="openCity(event, 'Tokyo')">заморозка</button>
</div>
<div id="London" class="tabcontent">
<p>
<data> дата | имя </data> <br>
<a href="https://ссылка">эпизод </a> - заметка
<br> <br>
<data> дата | имя </data> <br>
<a href="https://ссылка">эпизод </a> - заметка
<br> <br>
<data> дата | имя </data> <br>
<a href="https://ссылка">эпизод </a> - заметка
<br> <br>
</p>
</div>
<div id="Paris" class="tabcontent">
<p><data> дата | имя </data> <br>
<a href="https://ссылка">эпизод </a> - заметка
<br> <br></p>
</div>
<div id="Tokyo" class="tabcontent">
<p><data> дата | имя </data> <br>
<a href="https://ссылка">эпизод </a> - заметка
<br> <br></p>
</div>
</infobox>
</div>
[/html]
[html]
<style>
/*вся таблица*/
#box {
width: 600px;
background: #d8dedf;
height: 400px;
position: relative;
margin: 20px auto;
border: 1px solid #d59f5f;
outline: 1px solid #bb9656;
outline-offset: 10px;
font-family: Coffee;
color: #191919;
line-height: 170%;
font-size: 11px;
}
/*изображение*/
#box picture {
height: 400px;
width: 150px;
position: absolute;
left: 0px;
top: 0px;
background-size: cover;
display: block;
border-right: 1px solid #bb9656;
}
/*информация*/
#box infobox {
width: 400px;
height: 360px;
position: absolute;
top: 20px;
right: 20px;
overflow: auto;
font-family: Coffee;
font-size: 13px;
line-height: 170%;
text-align: justify;
padding-right: 5px;
color: #191919;
display: block;
}
/*заголовки*/
#name h1 {
color: #272d52;
position: relative;
font-size: 20px;
text-transform: uppercase;
font-family: Fixedsys;
display: block;
width: auto;
text-align: right;
font-weight: 900;
margin:10px 0px;
border-bottom: 1px solid #bababa;
}
#box data {
font-size: 10px;
font-style: oblique;
}
#box a {
color: #000;
font-weight: 700;
text-decoration: none;
}
#box infobox::-webkit-scrollbar{width:2px}
#box infobox::-webkit-scrollbar-thumb{border:none!important;background:#bababa!important}
#box infobox::-webkit-scrollbar-track{background:none!important;border:none!important}
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #c9d4d6;
}
/* Style the buttons inside the tab */
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 7px 32px;
transition: 0.3s;
font-size: 17px;
font-family: Book Antiqua;
}
/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
}
/* Create an active/current tablink class */
.tab button.active {
background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}
</style>
<script>
function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>
<link rel="stylesheet" type="text/css" href="table.css">
<div id="name"> <h1>Записная книга</h1> </div>
<div id="box">
<picture style="background-image: url(https://forumupload.ru/uploads/001b/2b/63/4/348641.jpg)"></picture>
<infobox>
<div class="tab">
<button class="tablinks" onclick="openCity(event, 'London')" id="defaultOpen">активные</button>
<button class="tablinks" onclick="openCity(event, 'Paris')">архив</button>
<button class="tablinks" onclick="openCity(event, 'Tokyo')">заморозка</button>
</div>
<div id="London" class="tabcontent">
<p>
<data> дата | имя </data> <br>
<a href="https://ссылка">эпизод </a> - заметка
<br> <br>
<data> дата | имя </data> <br>
<a href="https://ссылка">эпизод </a> - заметка
<br> <br>
<data> дата | имя </data> <br>
<a href="https://ссылка">эпизод </a> - заметка
<br> <br>
</p>
</div>
<div id="Paris" class="tabcontent">
<p><data> дата | имя </data> <br>
<a href="https://ссылка">эпизод </a> - заметка
<br> <br></p>
</div>
<div id="Tokyo" class="tabcontent">
<p><data> дата | имя </data> <br>
<a href="https://ссылка">эпизод </a> - заметка
<br> <br></p>
</div>
</infobox>
</div>
[/html]
