Испытание 18/18 на 100%. Буду рад критике

Курсы §29. Таблицы на CSS
1

Задание на 5 минут, если бы не фальшивый класс article. Минут 20 гадал почему у меня не применяются стили. Доперло только после того, как прописал article ul вместо просто ul и не увидел, что цвет разный.

/* Небольшая подсказка, дальше сами */
article {    
    width: 470px;
    margin: 10px;
    display: table;
    background-image: url("img/wood.png");   
    border: 5px solid #686868;
    border-spacing: 15px;   
}

article ul { display: table-row; }

article ul:nth-child(1) { background-image: url("img/wall-1.png"); }

article ul:nth-child(2) { background-image: url("img/wall-2.png"); }

article li {
    display: table-cell;    
    padding: 20px;
    border: 10px solid #686868;
    text-align: center;
}

ul li:nth-child(1) { width: 70px; }

ul li:nth-child(2) { width: 50px; }
2 лайка
2

А разве тут есть что критиковать?) Ну, я бы заменила :nth-child(1) на
:first-child, а так и придраться не к чему.

1 лайк
3

Ну а я вместо padding:20 использовал для выравнивания text-align и vertical-align, тогда высота ячейки 94px ))

4

Screenshot.png479×638 140 KB

article {
display: table;
width: 470px;
margin: 10px;
border: 5px solid #686868;
border-collapse: separate;
border-spacing: 15px;
background-image: url(‘img/wood.png’);
}

ul {
display: table;
width: 100%;
}

li {
display: table-cell;
border: 10px solid #686868;
text-align: center;
vertical-align: middle;
}

img {
margin: 20px auto;
}

ul:first-child {
display: table-row-group;
background-image: url(‘img/wall-1.png’);
}

ul:last-child {
display: table-row-group;
background-image: url(‘img/wall-2.png’);
}

li:first-child {
width: 110px;
}

li:last-child {
width: 150px;
}

Вопрос:

  1. Задание не проходит, хотя (ну, так, по-крайней мере, кажется мне), что картинки сходятся.

– Когда я нажимаю на “Результат” он выглядит иначе (между рядами картинок - расстояние становится больше) - не понимаю почему –

Screenshot (1).png499×604 141 KB

6

Кажется, я догадался…

Не потому ли это, что в HTML нет пустых div’ов, чтобы задать им display: table-column; ?

Поэтому, в мое случае, расстояние между ячейками просто накладывается друг на друга…

7

Уберите table-row-group из кода.

8

article ul:nth-child(1) { background-image: url(“img/wall-1.png”); } - эту строчку можно было- бы сразу в article ul записать