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

Ecehuh67 · 16.Апрель.2019 08:13:09

Так в псевдокласам у меня ширина, высота задана в li без псевдокласов. Отступами это Вы имете ввиду padding?

Hierumo · 16.Апрель.2019 08:20:13

в article и li уберите высоту
ширину в li:pseudo поправьте
да, padding

Egor2019 · 02.Июль.2019 11:09:09

подскажите пожалуйста что мне надо сделать чтобы было 100 % ???
article {
width: 480px;
height: 280px;
display:table;
border: 5px solid #686868 ;
border-collapse: separate;
border-spacing: 15px 10px;
margin: 10px;
padding: 5px 0 0 0px ;
background-image: url(img/wood.png);
box-sizing:border-box;
}
article ul {
display: table-row;

}
article li {

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

}

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:nth-child(3) {
width: 175px;

}
article li:nth-child(1) {
width: 100px;
}
article li:nth-child(2) {

}
Почему у меня не 100% ?

sasha_sm · 02.Июль.2019 14:34:58

Посмотрите вкладку «Различия» — у вас неверные размеры элементов списка, всё смещается из-за этого.
И вы код приложили не тот, который применяется на скриншоте. Если взять его, то фонового изображение к элементам списка не применяется.

Egor2019 · 03.Июль.2019 05:49:36

Незнаю как так , но код верный:
Прикладываю скрин

Hierumo · 03.Июль.2019 11:11:45

ничего на скрине не понятно, сделайте нормально

Egor2019 · 03.Июль.2019 11:24:13

article {
  width: 480px;
  height: 280px;
  display:table;
  border: 5px solid  #686868 ;
  border-collapse: separate;
  border-spacing: 15px 10px;
  margin: 10px;
  padding: 5px 0 0 0px ;
  background-image: url(img/wood.png);
  box-sizing:border-box;
}
article ul {
 display: table-row; 
 
}
article li {
 
 display: table-cell;
 border: 10px solid  #686868 ;
 text-align: center;
 vertical-align: middle; 
 padding: 20px ;
 
}

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:nth-child(3) {
 width: 175px; 
 
}
article li:nth-child(1) {
  width: 100px; 
}
article li:nth-child(2) {
  
}

sasha_sm · 03.Июль.2019 12:01:49

border-spacing: 15px должен быть, убрать паддинги здесь можно.

Здесь паддинги другие и нужно именно элементам списка задавать фон. Он на место всё равно иначе правильно не встанет по рисунку. И так будет верно.

И вот так задать для элементов списка.

Будет 100%.

sasha_sm · 03.Июль.2019 12:06:48

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

S3GA · 11.Ноябрь.2019 10:46:58

Мой вариант 97% из-за фонов, они не сошлись.
article {
display: table;
margin: 10px;
width: 470px;
border: 5px solid #686868;
background-image: url(‘img/wood.png’);
border-collapse: separate;
border-spacing: 15px;
}

article ul {
display: table-row;
}

article li {
display: table-cell;
padding: 20px 0;
border: 10px solid #686868;
text-align: center;
vertical-align: middle;
background-repeat: no-repeat;
}

ul:nth-child(1) {
background-image: url(‘img/wall-1.png’);
background-position: 50% 30%;
}

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

li:nth-child(1) {
width: 110px;
}
li:nth-child(3) {
width: 150px;
}

MEZonoid · 19.Ноябрь.2019 20:34:35

На счёт фонов: бекграунд нужно просто применить не к ul, а к li. Тогда не нужно будет заморачиваться с позиционированием. (Сам сначала так же поступил и не понимал, что не так…)

Kastor · 06.Январь.2020 19:16:46

Здравствуйте! Подскажите - какие улучшения можно сделать и допущены какие-нибудь ошибки? Задание выполнено на 100%, но есть ощущение, что можно гораздо изящнее сделать. Заранее спасибо!

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

    article ul {
      display: table-row;
    }

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

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

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

    article li:nth-child(1),
    article li:nth-child(4) {
      width: 70px;
    }

    article li:nth-child(2),
    article li:nth-child(5) {
      width: 50px;
    }

Arhy_Herzog · 19.Январь.2020 18:45:50

Со своими не особо обширными знаниями вижу 3 лишних строки:
article li {
vertical-align: middle; } Не нужен вообще

А ширину можно задать вот так, что упростит еще на 2 строки

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

article li:nth-child(2) {
width: 50px;
}

Makvorn · 03.Март.2020 18:34:45

100%

article {
width: 470px;
}

article {display: table;
background: url(“img/wood.png”);
border-spacing: 15px;
border: 5px solid #686868;
margin-left: 10px;
margin-top: 10px}
ul {display: table-row;}
li {
display: table-cell;
border: 10px solid #686868;
text-align: center;
vertical-align: middle;
padding: 15px;
}

article ul:nth-of-type(1) li {background: url(“img/wall-1.png”);
padding-bottom: 20px;
padding-top: 20px}
article ul:nth-of-type(2) li {background: url(“img/wall-2.png”);
padding-bottom: 20px;
padding-top: 20px}

ul li:nth-of-type(1) {width: 80px}
ul li:nth-of-type(2) {width: 60px}
ul li:nth-of-type(3) {width: 120px}

Zaec · 01.Май.2020 12:57:08

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

article ul {
display: table-row;
}

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

article li:first-child {
width: 80px;
height: 64px;
}

article li:nth-child(2) {
width: 60px;
}

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

100%

Shwarcz · 01.Июль.2020 11:05:06

100%

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

article ul {
display: table-row;
}

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

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

article ul li:nth-child(2) {
width: 40px;
}

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

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

SergeyZ · 04.Декабрь.2020 16:30:40

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

article ul {
  display: table-row;
  }

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

Genby · 21.Июль.2021 16:32:49

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;
text-align: center;
vertical-align: middle;
padding: 20px;
}

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

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

ul li:nth-child(2) {
width: 50px;
}

ul li:nth-child(3) {
width: 110px;
}

NiAlKo · 14.Декабрь.2021 20:09:33

Не правильно, но 100%

Code

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

article li{
  vertical-align: middle;
  text-align: center;
  border: 10px solid #686868;
  display: table-cell;
  background: url(img/wall-2.png);
  
  }
  article li:nth-child(1){  
   width: 110px;
  }
article li:nth-child(2){
   width: 90px;
  }

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

vasya2108 · 15.Июнь.2022 19:37:00

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

ul {
display: table-row;
}

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

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

ul li:first-child {
width: 70px;
}

ul li:nth-child(2) {
width: 50px;
}