Испытание:ещё одна таблица на CSS [18/18]

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

Результат 91%. Как исправить на 100%.

/* Небольшая подсказка, дальше сами */

article {
width: 470px;
display:table;
border:5px solid #686868;
border-spacing:15px;
margin:10px;
background-image:url(img/wood.png);
}
ul {
display:table-row;
}
li {
display:table-cell;
border:10px solid #686868;
vertical-align:middle;
text-align:center;
height:95px;
margin:auto;
}
article ul:nth-child(1) li {
background-image:url(img/wall-1.png);
}
article ul:nth-child(2) li {
background-image:url(img/wall-2.png);
}
article ul li:nth-child(1) {
width:110px;
}
article ul li:nth-child(2) {
width:90px;
}

2

Не задавайте высоту, пропишите внутренние отступы.

1 лайк
3

никак не соображу как прописать padding

4

height:95px;
padding-top: 20px;
padding-bottom: 20px;
margin:auto;

5

Если прописывать высоту ячеек через padding: 20px, то придется заново подбирать ширину ячеек. :slight_smile:
Если же исправить всего одну цифру и сделать height: 94px, то полученная картинка принимается системой с результатом 100%
Ineska, расскажите мне (нам), пожалуйста, почему в данном случае лучше использовать padding, чем фиксированно задавать высоту ячеек.

6

На высоту элемента будут влиять только отступы сверху и снизу. То есть необязательно задавать их со всех сторон, если это что-то ломает.
Что касается высоты, то это больше правило хорошего тона. Неправильно ограничивать высоту элемента, если вы не можете быть уверены, что содержимое не станет больше и не будет вываливаться потом из своего родителя. Вы предусматриваете этот момент заранее.
Фиксированная высота очень редко используется для сеточных элементов страницы. Чаще всего это декоративные элементы с четкими размерами или псевдоэлементы.

3 лайка
7

что-то с отступами не получается,

image
image.png2720×1024 800 KB

8

Наверное ширину в данном случае лучше задавать в пикселях, а высоту регулировать paddingом.
В данном случае.
Чтоб было 100% совпадение картинок

9

tabcss1818
tabcss1818.png1317×707 136 KB

10

По ситуации LeonoraG родился новый вопрос-уточнение к Ineska:
является ли хорошим тоном ограничивать ширину элементов в пикселях?

11

Задание на подбор паддингов)))?

image
image.png1230×641 130 KB

12

)))
давайте дождемся ответа модератора
я тут как бы тоже ученик))

13

Странный вопрос. Задавать ширину элементам - это естественно. То есть это не правило, а само собой разумеется. В зависимости от того, какая у вас сетка (фиксированная или резиновая) ширина может быть как в пикселях (абсолютных единицах), так и в относительных единицах измерения.
P.S. Я не являюсь модератором форума, такой же ученик, разве что старше.

14

Ну да, ну да…
прописываешь ширину и - 100%

image
image.png1231×642 156 KB

15

Прошла на 97%. Но упорно не понимаю, почему фоны ячеек заливаются как будто со сдвигом.
Может здесь кто-то знает, как решить?

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

}

article ul {
display: table-row;

}

article ul:first-child {
background-image: url('img/wall-1.png');

}

article ul:last-child {
background-image: url('img/wall-2.png');

}

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

}

article li:first-child {
width: 70px;

}

article li:last-child {
width: 110px;

}

problem
problem.png717×596 104 KB

1 лайк
16

Вы должны задавать фон для элементов li, а не для ul в целом.

1 лайк
17

В прошлой версии курса можно было задавать для ul.

18

Спасибо! Действительно помогло.

19
18/18 100% 
article {
  width: 470px;
  display: table;
  border: 5px solid #686868;
  border-spacing: 15px;
  background: url("img/wood.png");
  margin: 10px;
}

ul {
  display: table-row;
}

li {
  display: table-cell;
  border: 10px solid #686868;
  padding: 20px 0;
  text-align: center;
  vertical-align: middle; 
  background: url("img/wall-1.png");
}

ul:last-child li {
  background: url("img/wall-2.png");
}

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

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

а в таком случае мы можем задать свойство min-height? будет ли у нас высота контейнера увеличиваться при увеличении к примеру размера текста? или это свойство как-то по-другому работает?