18/18 100% Проверьте качество пожалуйста


#1

Проверьте качество кода. Что-то я сомневаюсь

/* Небольшая подсказка, дальше сами */
article {
width: 470px;
display:table;
background-image:url(img/wood.png);
border-collapse:separate;
border-spacing:15px;
border:5px solid #686868;
margin:10px;
}
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;
border:10px solid #686868;
padding:20px;
text-align:center;
vertical-align:middle;
}

article li:nth-child(1){
width:70px;
}
article li:nth-child(2){
width:50px;
}
article li:nth-child(3){
width:110px;
}


#2

Всё хорошо в вашем коде. В каком конкретно моменте сомневаетесь?


#3

я хотел задать ширину столбцам, но у меня что-то не получилось. потом задал ширину первым ячейкам в столбце, и автоматически отреагировали и последующие ячейки. Вот здесь и сомневаюсь. если нужно будет разную ширину ячеек в столбце задать, то это все через присвоенные классы или ч/з nth-child лучше делать??


#4

Однозначно сказать нельзя, но чаще всего вполне подходят псевдоклассы.


#5

спасибо за Вашу помощь и быстрые ответы:blush:


#6

в нашей таблице нет столбцов. или я не прав?


#7

А у меня получилось как то так :slight_smile:
article {
width: 470px;
display: table;
background: url(“img/wood.png”);
border: 5px solid #686868;
margin: 10px;
border-spacing: 15px;
}
article ul {
display: table-row;
}
article li {
display: table-cell;
border: 10px solid #686868;
text-align: center;
vertical-align: middle;
padding: 20px;
}
article li:first-child {
width: 70px;
}
article li:last-child {
width: 110px;
}
article ul:first-child {
background: url(“img/wall-1.png”);
}
article ul:last-child {
background: url(“img/wall-2.png”);
}


#8

Эх ! Я Как всегда сделал что то не так. вместо того что бы указать padding: 20px прилепил высоту 95px но было 93% сделал высоту 94px получилось 100% :slight_smile: ну ладно, учимся дальше :smiley:


#9

Аналогично сделал как Вы)) 94px и все получилось. Потом прочитал Ваш коммент и начал искать еще варианты


#10

Вот вопрос! Вариантов решений для испытаний (в некоторых заданиях) может быть несколько? Как понять какой правильней,если несколько решений и все на 100%? Как понять что твое решение не хуже другого?


#11

Тоже есть пара вопросов.

  1. Есть ли необходимость для ul прописывать ширину и минимальную высоту, чтобы, если поменяется содержимое, таблица не схлопнулась:
    ul {
    display: table-row;
    list-style: none;
    min-height: 5px;
    width: 100%;
    background-image: url(“img/wall-1.png”);
    }
    Или это не нужно?

  2. Достаточно задать ширину для li:first-child и li:nth-child(2) и оставить li:last-child растягиваться на оставшееся пространство автоматически или там тоже нужно прописать ширину?


#12

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

ul {
display: table-row;
}

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

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

ul:last-child {
height: 1px;
background: url(“img/wall-2.png”);
}

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

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

А если вот так, через width таблице, но без padding. Тоже нормально или лучше всё же падингами?


#13

А это зачем?


#14

Чтоб высота была по размеру содержимого.

Руководствовался этим уроком : https://htmlacademy.ru/courses/86/run/16

Конечно можно было просто не указывать явную высоту таблицы и эти минимальные высоты, а просто прописать падинги. Но мы не ищем лёгких путей :sweat_smile:


#15

И что содержимым является в данном случае?


#16

Содержимое ячеек.


#17

Сделал вот так, может быть можно что-то улучшить ? :pushpin:

article {
    width: 470px;
    margin: 10px; 
    display: table;
    background: url(img/wood.png);
    border-collapse: separate;
    border-spacing: 15px;
    border: 5px solid #686868;
}
article ul {
    display: table-row;
    background: url(img/wall-1.png);
}
article ul:last-child { background: url(img/wall-2.png); }
article ul li {
    display: table-cell;
    text-align: center;
    padding:20px;
    border: 10px solid #686868;
}
article ul li:nth-child(1) { width: 70px;  }
//article ul li:nth-child(2) { width: 50px; } можно не применять 
//так как всего 3 ячейки, и эта выравнится автоматически
article ul li:nth-child(3) { width: 110px; }

#18

border-collapse: separate необязателен, этот вариант итак используется по умолчанию;
для элементов li лучше задать vertical-align посередине, т.к. на “длинной” web-страничке ячейки растянутся и содержимое не будет посередине;
в остальном хороший лаконичный код :wink: