Podozrevatel, вот, полностью переработал ваше объявление, включая и мобильный его вариант:
Код:<style>
.obtab {
display: grid;
grid-template: auto 1fr auto / 196px 1fr 196px;
padding: 2px;
width: 914px;
margin: 0 auto;
}
.obtab, .left_column, .right_column, .center_column_1, .center_column_2, .center_column_3 {border: 1px solid #0f3794;}
.left_column, .right_column {grid-row: 1/4;}
.right_column {
display: grid;
align-content: center;
justify-content: center;
grid-column: 3/4;
text-align: center;
}
.left_column {grid-column: 1/2;}
.center_column_1, .center_column_2, .center_column_3 {grid-column: 2/3;}
.center_column_1 {
display: grid;
align-content: center;
grid-row: 1/2;
margin: 0 2px 2px 2px;
}
.center_column_2 {
grid-row: 2/3;
margin: 0 2px;
background: url(https://forumstatic.ru/files/0000/0c/05/14845.png) no-repeat center center;
background-size: contain;
}
.center_column_3 {
grid-row: 3/4;
margin: 2px 2px 0 2px;
text-align: center;
padding: 6px 0;
}
.center_column_1 marquee {
font-family: Monotype Corsiva;
color: #474747;
font-size: 20pt;
font-weight: bold;
}
.center_column_3 a {
color: #474747 !important;
font-size: 11pt;
font-weight: bold;
}
@media screen and (max-width: 540px) {
.obtab {
grid-template: repeat(5, auto) / auto;
width: auto;
}
.left_column, .right_column, .center_column_1, .center_column_2, .center_column_3 {grid-column: 1/4; margin: 0 0 2px 0;}
.left_column {grid-row: 2/3;}
.right_column {grid-row: 4/5;}
.center_column_1 {grid-row: 1/2;}
.center_column_2 {grid-row: 3/4; min-height: 107px;}
.center_column_3 {grid-row: 5/6; margin: 0;}
}
</style>
<div class="obtab">
<div class="left_column">
<center>
<style>
#calendar3 {
width: 100px;
font: monospace;
line-height: 1.2em;
font-size: 15px;
text-align: center;
background: url(https://forumstatic.ru/files/000f/3e/e5/45969.gif) no-repeat;
background-size: cover;
}
#calendar3 thead tr:last-child {
font-size: small;
color: #FFFFFF;
}
#calendar3 td {border: none;}
#calendar3 tbody td {
color: #F5F5F5;
font-weight: bold;
text-shadow: 1px 1px 0px #000000;
}
#calendar3 tbody td:nth-child(n+6), #calendar3 .holiday {
color: #FF0000;
text-shadow: 1px 1px 0px #F5F5F5;
}
#calendar3 tbody td.today {
box-shadow: 0 0 3pt 2pt red;
border-radius: 20px;
}
#calendar3 select, #calendar3 input {
background: rgba(34, 139, 34, 0.6);
color: #F5F5F5;
border-color: rgba(34, 139, 34, 0.2);
}
</style>
<table id="calendar3">
<thead>
<tr><td colspan="4"><select>
<option value="0">Январь</option>
<option value="1">Февраль</option>
<option value="2">Март</option>
<option value="3" style="color: rgb(220, 0, 0);">Апрель</option>
<option value="4">Май</option>
<option value="5">Июнь</option>
<option value="6">Июль</option>
<option value="7">Август</option>
<option value="8">Сентябрь</option>
<option value="9">Октябрь</option>
<option value="10">Ноябрь</option>
<option value="11">Декабрь</option>
</select></td><td colspan="3"><input type="number" value="" min="0" max="9999" size="4">
</td></tr><tr><td>Пн</td><td>Вт</td><td>Ср</td><td>Чт</td><td>Пт</td><td>Сб</td><td>Вс
</td></tr></thead><tbody><tr><td></td><td></td><td></td><td></td><td></td><td>1</td><td>2</td></tr><tr><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td></tr><tr><td>10</td><td>11</td><td>12</td><td class="today">13</td><td>14</td><td>15</td><td>16</td></tr><tr><td>17</td><td>18</td><td>19</td><td>20</td><td>21</td><td>22</td><td>23</td></tr><tr><td>24</td><td>25</td><td>26</td><td>27</td><td>28</td><td>29</td><td>30</td></tr><tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr></tbody></table>
<script>
function Calendar3(id, year, month) {
var Dlast = new Date(year,month+1,0).getDate(),
D = new Date(year,month,Dlast),
DNlast = D.getDay(),
DNfirst = new Date(D.getFullYear(),D.getMonth(),1).getDay(),
calendar = '<tr>',
m = document.querySelector('#'+id+' option[value="' + D.getMonth() + '"]'),
g = document.querySelector('#'+id+' input');
if (DNfirst != 0) {
for(var i = 1; i < DNfirst; i++) calendar += '<td>';
}else{
for(var i = 0; i < 6; i++) calendar += '<td>';
}
for(var i = 1; i <= Dlast; i++) {
if (i == new Date().getDate() && D.getFullYear() == new Date().getFullYear() && D.getMonth() == new Date().getMonth()) {
calendar += '<td class="today">' + i;
}else{
if ( // список официальных праздников
(i == 1 && D.getMonth() == 0 && ((D.getFullYear() > 1897 && D.getFullYear() < 1930) || D.getFullYear() > 1947)) || // Новый год
(i == 2 && D.getMonth() == 0 && D.getFullYear() > 1992) || // Новый год
((i == 3 || i == 4 || i == 5 || i == 6 || i == 8) && D.getMonth() == 0 && D.getFullYear() > 2004) || // Новый год
(i == 7 && D.getMonth() == 0 && D.getFullYear() > 1990) || // Рождество Христово
(i == 23 && D.getMonth() == 1 && D.getFullYear() > 2001) || // День защитника Отечества
(i == 8 && D.getMonth() == 2 && D.getFullYear() > 1965) || // Международный женский день
(i == 1 && D.getMonth() == 4 && D.getFullYear() > 1917) || // Праздник Весны и Труда
(i == 9 && D.getMonth() == 4 && D.getFullYear() > 1964) || // День Победы
(i == 12 && D.getMonth() == 5 && D.getFullYear() > 1990) || // День России (декларации о государственном суверенитете Российской Федерации ознаменовала окончательный Распад СССР)
(i == 7 && D.getMonth() == 10 && (D.getFullYear() > 1926 && D.getFullYear() < 2005)) || // Октябрьская революция 1917 года
(i == 8 && D.getMonth() == 10 && (D.getFullYear() > 1926 && D.getFullYear() < 1992)) || // Октябрьская революция 1917 года
(i == 4 && D.getMonth() == 10 && D.getFullYear() > 2004) // День народного единства, который заменил Октябрьскую революцию 1917 года
) {
calendar += '<td class="holiday">' + i;
}else{
calendar += '<td>' + i;
}
}
if (new Date(D.getFullYear(),D.getMonth(),i).getDay() == 0) {
calendar += '<tr>';
}
}
for(var i = DNlast; i < 7; i++) calendar += '<td> ';
document.querySelector('#'+id+' tbody').innerHTML = calendar;
g.value = D.getFullYear();
m.selected = true;
if (document.querySelectorAll('#'+id+' tbody tr').length < 6) {
document.querySelector('#'+id+' tbody').innerHTML += '<tr><td> <td> <td> <td> <td> <td> <td> ';
}
document.querySelector('#'+id+' option[value="' + new Date().getMonth() + '"]').style.color = 'rgb(220, 0, 0)'; // в выпадающем списке выделен текущий месяц
}
Calendar3("calendar3",new Date().getFullYear(),new Date().getMonth());
document.querySelector('#calendar3').onchange = function Kalendar3() {
Calendar3("calendar3",document.querySelector('#calendar3 input').value,parseFloat(document.querySelector('#calendar3 select').options[document.querySelector('#calendar3 select').selectedIndex].value));
}
</script>
</center>
</div>
<div class="center_column_1">
<marquee scrollamount="2" scrolldelay="20">Добро пожаловать на форум!</marquee>
</div>
<div class="center_column_2">
</div>
<div class="center_column_3">
<a href="https://amorlatinoamericano.bbok.ru/viewtopic.php?id=4908#p411414/">Путеводитель по форуму</a>
</div>
<div class="right_column">
<p>Форум Латинопараисо</p>
<a href="https://forum.telenovelascomamor.ru/" target="_blank"><img src="https://i.postimg.cc/TwTzLjc1/25.jpg" border="0" alt="site"></a>
</div>
</div>
Сохраните полностью объявление в текстовом документе у вас на ПК, после чего удалите полностью объявление и вставьте мой код.
Что сделал: убрал устаревший HTML, перевел таблицу <table> в блоки <div>, что уменьшило HTML и сделало более удобным в использовании. В каждом блоке есть говорящий за себя класс:
obtab - общий блок, в котором всё содержимое
left_column - левая колонка
right_column - правая колонка
center_column_1 - верхняя (центральная колонка)
center_column_2 - средняя (центральная колонка)
center_column_3 - нижняя (центральная колонка)
В мобильном варианте расположение иное:
.center_column_1 - первый блок
.left_column - второй блок
.center_column_2 - третий блок
.right_column - четвертый блок
.center_column_3 - пятый блок
Можно легко поменять местами..
