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

Dmitry_Dubchenko · 18.Февраль.2017 21:06:25

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

/* Небольшая подсказка, дальше сами */
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;
}

Ineska · 18.Февраль.2017 22:07:06

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

Dmitry_Dubchenko · 19.Февраль.2017 18:40:33

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

Ineska · 19.Февраль.2017 18:45:55

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

Dmitry_Dubchenko · 19.Февраль.2017 18:49:21

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

inanutshell86 · 02.Март.2017 15:59:54

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

VIktorS88 · 20.Апрель.2017 15:56:39

А у меня получилось как то так
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”);
}

Aleksandr_Goncharenko · 04.Ноябрь.2017 12:09:35

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

Romzes · 21.Январь.2018 17:04:33

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

Romzes · 21.Январь.2018 17:09:56

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

Marina_D · 28.Февраль.2018 08:00:59

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

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

AlexGo · 28.Март.2018 09:54:22

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. Тоже нормально или лучше всё же падингами?

Ineska · 29.Март.2018 06:09:16

А это зачем?

AlexGo · 29.Март.2018 07:54:58

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

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

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

Ineska · 29.Март.2018 09:44:23

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

AlexGo · 29.Март.2018 10:31:57

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

magistr4815 · 01.Апрель.2018 10:58:45

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

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; }

edvegas · 15.Апрель.2018 23:06:16

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

bremxx · 30.Август.2018 11:50:51

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

article ul {
    display: table-row;
    background-image: url("img/wall-1.png");
    }
    
article li {
    display: table-cell;
    padding: 20px;
    border: 10px solid #686868;
    text-align: center;
    vertical-align: middle;
    }
    
article ul:last-child {
    background-image: url("img/wall-2.png");
    }
    
article ul li:first-child {
    width: 85px;
    }
    
article ul li:last-child {
    width: 150px;
    }

Интересно, почему ширина ячеек у меня не как у всех, но в итоге 100%?