Превращение таблиц в css grid.

This commit is contained in:
lopar
2020-07-05 18:09:55 +03:00
parent 3ec3d3956c
commit cb17a5ba8b
3 changed files with 171 additions and 15 deletions
+65 -2
View File
@@ -300,10 +300,11 @@ span.error {
color: #8F0000;
}
img.tip+span.tiptext {
img.tip + span.tiptext {
display: none
}
img.tip:hover+span.tiptext {
img.tip:hover + span.tiptext {
border: #c0c0c0 1px dotted;
padding: 5px 20px 5px 5px;
display: block;
@@ -315,4 +316,66 @@ img.tip:hover+span.tiptext {
position: absolute;
top: 10px;
text-decoration: none
}
/* Отображение информации о персонаже в inf.php (класс User.php) */
div.user-info-container {
display: grid;
grid-template-columns: 100px 200px 100px auto 100px;
grid-template-rows: repeat(4, 100px) auto;
grid-gap: 10px;
}
div.user-info-container > div.slot-1,
div.user-info-container > div.slot-2,
div.user-info-container > div.slot-3,
div.user-info-container > div.slot-4 {
grid-column: 1;
}
div.user-info-container > div.slot-5,
div.user-info-container > div.slot-6,
div.user-info-container > div.slot-7,
div.user-info-container > div.slot-8 {
grid-column: 3;
}
div.user-info-container > div.slot-1,
div.user-info-container > div.slot-5 {
grid-row: 1;
}
div.user-info-container > div.slot-2,
div.user-info-container > div.slot-6 {
grid-row: 2;
}
div.user-info-container > div.slot-3,
div.user-info-container > div.slot-7 {
grid-row: 3;
}
div.user-info-container > div.slot-4,
div.user-info-container > div.slot-8 {
grid-row: 4;
}
div.user-info-container > div.slot-image {
grid-column: 2;
grid-row: 1 / 5;
}
div.user-info-container > div.slot-lower {
grid-column: 1 / 4;
grid-row: 5;
text-align: center;
}
div.user-info-container > div.user-info {
grid-column: 4;
grid-row: 1 / 6;
}
div.user-info-container > div.user-signs {
grid-column: 5;
grid-row: 1 / 6;
}