/*вся таблица*/

#box { 
width: 600px;
background: #d8dedf;
height: 400px;
position: relative;
margin: 50px;
border: 1px solid #8a1e17;
outline: 1px solid #8a1e17;
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 #8a1e17;

#box infobox {
width: 400px;
height: 360px;
position: absolute;
top: 20px;
right: 20px;
overflow: auto;
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;

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

<link rel="stylesheet" type="text/css" href="table.css">
<div id="name"> <h1>Хронология</h1> </div>
<div id="box">

<picture style="background-image: url(https://i.ibb.co/WctrkBh/image.png)"></picture>


<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 id="London" class="tabcontent">
<data> 27.05.2001 | Август </data> <br>
<a href="https://shadeparadox.ru/viewtopic.php?id=378#p53164">В твоих глазах</a> -  прощание с Августом в Детройте
<br> <br>

<data> 10.03.2010 | Энтони </data> <br>
<a href="https://shadeparadox.ru/viewtopic.php?id=405#p58964">maybe we can help each other</a> - заметка
<br> <br>

<data> дата | имя </data> <br>
<a href="https://ссылка">эпизод </a> -  заметка
<br> <br>

<div id="Paris" class="tabcontent">
  <p><data> дата | имя </data> <br>
<a href="https://ссылка">эпизод </a> -  заметка
<br> <br></p>

<div id="Tokyo" class="tabcontent">
  <p><data> дата | имя </data> <br>
<a href="https://ссылка">эпизод </a> -  заметка
<br> <br></p>


Отредактировано Louise Costello (2022-10-13 14:24:51)