Испытание: ещё одна CSS-таблица.[18/18] 100% Оцените, пожалуйста, код.

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

article {
width: 470px;
border: 5px solid #686868;
background-image: url(“img/wood.png”);
border-spacing: 15px 15px;
margin: 10px 10px;
}

ul {
list-style: none;
display: table-row;
}

li {
display: table-cell;
border: 10px solid #686868;
background-image: url(“img/wall-2.png”);
padding: 20px 20px;
}

ul:first-child li {
background-image: url(“img/wall-1.png”);
}

ul li:first-child {
padding: 20px 30px;
}

ul li:last-child {
padding: 20px 50px;
}

2

В целом хорошо. Только не написали display: table; для article.
И помните, что если величина отступа одинакова для каждой стороны, то необязательно писать два значения, вполне хватит одного. Например, margin: 10px;

3

Спасибо большое)

4

Также для выравнивания картинок внутри ячеек можно было использовать vertical-align and text-align. Так, при изменении размера ячейки ,картинка все равно останется посередине.

1 лайк
5

Здравствуйте! не могли бы вы и мой код оценить…знаю местами замудрила, но мне так легче)

html,
body {
margin: 0;
}

article {
display: inline-table;
height: 273px;
width: 470px;
background: url(“img/wood.png”);
margin: 10px;
border: 5px solid #686868;
border-collapse: separate;
border-spacing: 15px 15px;

}
ul {
display: table-row;
}

li {
display: table-cell;
}
li img {
width: 50px;
height: 50px;
border: 10px solid #686868;
text-align: center;
vertical-align: middle;
}
ul:nth-child(1) li:nth-child(n) img {
background: url(“img/wall-1.png”);
}
ul:nth-child(2) li:nth-child(n) img {
background: url(“img/wall-2.png”);
}
ul:nth-child(1) li:nth-child(1) img,
ul:nth-child(2) li:nth-child(1) img {
padding: 20px 30px 24px 30px;
}
ul:nth-child(1) li:nth-child(2) img,
ul:nth-child(2) li:nth-child(2) img {
padding: 20px 20px 24px 20px;

}
ul:nth-child(1) li:nth-child(3) img,
ul:nth-child(2) li:nth-child(3) img {
padding: 20px 50px 24px 50px;
}

6

Вы задаете размеры и отступы изображениям, а надо пунктам списка li.
В последних правилах не обязательно уточнять, что выбираете первый и второй ряд, ведь отсчет :nth-child идет в пределах своего родителя.
То есть, если писать li:nth-child(2), то сразу выбирается второй пункт в обоих рядах.

2 лайка
7

Последние правила подкорректировала. А это критическая ошибка работать с li img вместо li? c li переделала тоже на 100%.

html,
body {
margin: 0;
}

article {
display: inline-table;
height: 273px;
width: 470px;
background: url(“img/wood.png”);
margin: 10px;
border: 5px solid #686868;
border-collapse: separate;
border-spacing: 15px 15px;

}
ul {
display: table-row;
}

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

}
li img {
width: 50px;
height: 50px;
}
ul:nth-child(1) li:nth-child(n) {
background: url(“img/wall-1.png”);
}
ul:nth-child(2) li:nth-child(n) {
background: url(“img/wall-2.png”);
}
li:nth-child(1){
padding: 20px 30px;
}

li:nth-child(2) {
padding: 20px 20px;
}
li:nth-child(3) {
padding: 20px 50px;
}

8

Еще здесь li можно убрать.
По поводу img… Код ваш теперь гораздо короче, читабельнее. Не обязательно прописывать в селекторе всю вложенность.

9

Спасибо!

10

Не хочу создавать 100500 тем про это)
но будьте добры, проверьте.
и вопрос такой: “А как еще короче это сделать и работоспособнее?”

/* Небольшая подсказка, дальше сами */
.article {
width: 470px;
}

article {
display:table;
border: 5px solid #686868;
border-spacing: 15px;
background: url(“img/wood.png”);
margin:10px;
}

ul {display: table-row;
background: url(“img/wall-1.png”)}
li {
display: table-cell;
border: 10px solid #686868;
padding:20px ;
margin:10px;

}

ul:nth-child(2){background: url(“img/wall-2.png”)}
li:nth-child(1){padding:0 30px;}
li:nth-child(3){padding:0 50px;}

11

Всё хорошо по коду, единственное, к чему можно придраться - это форматирование. Не очень читабельно.

12

Ага, спасибо))))
Нужно не лениться делать красивее код))
порой не хочется лишний раз нажимать Enter))

13

Вам не обязательно делать форматирование вручную. Для этого есть расширения в редакторах, чаще всего в их названиях есть слово beautify. Просто вы можете “причесать” (как говорят) свой код перед отправкой.

14

Будьте добры, проверьте код
.article {
width: 470px;
}
article {
display: table;
border-collapse: separate;
border-spacing: 15px;
margin: 10px;
background-image: url(“img/wood.png”);
border: 5px solid #686868;

}
article ul {
display: table-row;
}
article li {
display: table-cell;
padding: 20px 30px;
text-align: center;
vertical-align: middle;
border: 10px solid #686868;
background-image: url(“img/wall-1.png”);
}
article li:last-child {
padding: 20px 50px;
}
article li:nth-child(2) {
padding: 20px;
}
ul:last-child li {
background-image: url(“img/wall-2.png”);
}

15

Для чего первое правило?

16

list-style: none; - ненужное правило

17

Почему ?

18

Потому что есть display: table-row; достаточно.
P.S. Заметил, что много кто пишет свойства, которые лишние в конкретном случае.

19

Свойство не лишнее. Отображение списка рядом таблицы может быть временным явлением, а сбросить оформление всё равно необходимо.
Похожая ситуация с парами свойств:
display: block; и position: absolute;
display: block; и float.

20

Мы же рассматриваем конкретную задачу, когда нам нужно сверстать css-таблицу. Я написал коммент с целью указать на то, что нужно поправить мыслительный процесс при верстке. Т.е. человек видит буллит списка и соответственно хочет его убрать. Т.е. делает лишнии телодвижения, вмсето того чтобы отобразить список строкой таблицы.

1 лайк