Курс «Блочная модель документа» Последнее испытание [23/23]

Nurzadakhan · 07.Июль.2017 11:43:39

/* Cтили, которые можно изменять */
.column {

width: 80px;
max-width: 76px;
margin-right: 10px;
margin-bottom: 10px;

padding: 10px;
background: rgba(0, 255, 255, 0.2);
border: 2px solid white; 
display: inline-block;
vertical-align: top;

}

.cell {
display: table-cell;
padding: 5px 10px;
background: rgba(0, 255, 255, 0.2);
border: 1px solid white;
}

.table{display:table; border: 1px solid white;}
.col-1,.col-2{width: 96px;}

.col-3{display: none;}

klimber · 08.Июль.2017 19:49:51

Все ли верно ?
/* Базовые стили, изменять не нужно */
html,
body {
margin: 0;
padding: 0;
}

body {
width: 520px;
min-height: 270px;
padding: 20px;
font-size: 14px;
line-height: 1.5;
font-family: Arial, sans-serif;
color: white;
background-color: #3a78a1;
background-image: url("/assets/course9/grid.png");
background-repeat: repeat;
background-position: -80px -80px;
}

/* Cтили, которые можно изменять */
.column {
width: 76px;
padding: 10px;
background: rgba(0, 255, 255, 0.2);
border: 2px solid white;
display: inline-block;
vertical-align: top;
margin: 0 10px 10px 0;
}

.table {
border-collapse: collapse;
}

.row {
display: table-row;
}
.cell {
padding: 5px 10px;
background: rgba(0, 255, 255, 0.2);
border: 2px solid white;
display: table-cell;
}

.col-1 {
padding-right: 27px;
}

.col-2 {
padding-right: 56px;
}

.col-3 {
display: none;
}

LeonMS · 09.Июль.2017 14:58:17

/* Cтили, которые можно изменять */
.column {
margin-bottom: 10px;
margin-right: 10px;
padding: 10px;
background: rgba(0, 255, 255, 0.2);
border: 2px solid white;
display: inline-block;
vertical-align: top;
}

strong {
display: block;
width: 76px;
height: 0px;
}

.cell {
padding: 5px 10px;
background: rgba(0, 255, 255, 0.2);
border: 2px solid white;
display:table-cell;
}

.row {
display: table-row;
}

.table {
border-collapse: collapse;
}

.col-1 {
width: 96px;
height: 21px;
}

.col-2 {
width: 96px;
height: 19px;
}

.col-3 {
display: none;
}

Чуть длиннее получилось, но работает на 100%

Ineska · 09.Июль.2017 15:20:10

Почему не задали ширину для .column?

LeonMS · 10.Июль.2017 03:25:05

Максимально применил знания полученные в третьей части курса.
Согласен, что код можно и нужно делать максимально компактным, сделал сам как получилось без подсказок.

simon-telitsin · 19.Июль.2017 19:27:53

/* Базовые стили, изменять не нужно */
html,
body {
    margin: 0;
    padding: 0;
}

body {
    width: 520px;
    min-height: 270px;
    padding: 20px;
    font-size: 14px;
    line-height: 1.5;
    font-family: Arial, sans-serif;
    color: white;
    background-color: #3a78a1;
    background-image: url("/assets/course9/grid.png");
    background-repeat: repeat;
    background-position: -80px -80px;
}

/* Cтили, которые можно изменять */
.column {
    width: 76px;
    display: inline-block;
    margin-bottom: 10px;
    margin-right: 10px;
    padding: 10px;
    background: rgba(0, 255, 255, 0.2);
    border: 2px solid white;
    vertical-align: top;
}
.table {
    display: table;
    border-collapse: collapse;
}
.row{
    display: table-row;   
}
.cell {
    width: 96px;
    display: table-cell;
    padding: 5px 10px;
    background: rgba(0, 255, 255, 0.2);
    border: 2px solid white;
}
.col-3 {
    display: none;
}

absid · 14.Сентябрь.2017 19:31:45

/* Cтили, которые можно изменять */
.column {
margin-right: 11px;
vertical-align: top;
margin-bottom: 10px;
padding: 10px;
background: rgba(0, 255, 255, 0.2);
border: 2px solid white;
display: inline-block;
box-sizing: border-box;
width: 100px;
margin-right: 10px;
}

.cell {
padding: 5px 10px;
background: rgba(0, 255, 255, 0.2);
border: 2px solid white;
}

.table {
display: table;
border-collapse: collapse;
width: 238px;
}

.row {
display: table-row;
}

.cell {
display: table-cell;
width: 50%;
}

.col-3 {
display: none;
}

Dmitry_Koltsov · 28.Октябрь.2017 21:48:03

Пришёл вот к какому решению (такого вроде еще не было):

/* Базовые стили, изменять не нужно */
html,
body {
    margin: 0;
    padding: 0;
}

body {
    width: 520px;
    min-height: 270px;
    padding: 20px;
    font-size: 14px;
    line-height: 1.5;
    font-family: Arial, sans-serif;
    color: white;
    background-color: #3a78a1;
    background-image: url("/assets/course9/grid.png");
    background-repeat: repeat;
    background-position: -80px -80px;
}

/* Cтили, которые можно изменять */
.column {
    margin-bottom: 10px;
    margin-right: 10px;
    width: 76px;
    padding: 10px;
    background: rgba(0, 255, 255, 0.2);
    border: 2px solid white;
    display: inline-block;
    vertical-align: top;
}

.cell {
    padding: 5px 10px;
    background: rgba(0, 255, 255, 0.2);
    border: 2px solid white;
    display: table-cell;
    width: 96px;
}
.col-3 {
    display: none;
}
.row:nth-child(n+2) .cell {
    border-top: none;
}
.row .cell:nth-child(n+2) {
    border-left: none;
}

Egor_Tkachev · 31.Октябрь.2017 21:48:14

У меня вот так:

/* Cтили, которые можно изменять */
.column {
margin-bottom: 10px;
margin-right: 10px;
padding: 10px;
background: rgba(0, 255, 255, 0.2);
border: 2px solid white;
width: 100px;
vertical-align: top;
display: inline-block;
box-sizing: border-box;
}
.table {
display: table;
border-collapse: collapse;
}

.cell {
display: table-cell;
padding: 5px 10px;
background: rgba(0, 255, 255, 0.2);
border: 2px solid white;
width: 96px;
}
.row {
display: table-row;

}
.col-3 {
display: none;
}

Gag_Harutyunyan · 05.Декабрь.2017 08:31:00

Сразу все сделал на 96% и мучился примерно час ничего не получалось(пиксель направо и вниз все слова в таблице),пока не добавил в таблицу border-collapse: collapse;

/* Cтили, которые можно изменять */
.column {
display: inline-block;
vertical-align: top;
width: 76px;
margin: 0 10px 10px 0;
padding: 10px;
background: rgba(0, 255, 255, 0.2);
border: 2px solid white;
}

.table {
display: table;
border-collapse:collapse;
}

.row {
display: table-row;
}
.cell {
padding: 5px 10px;
background: rgba(0, 255, 255, 0.2);
border: 2px solid white;
display: table-cell;
width: 96px;
}

.col-3 {
display:none;
}

На вверху есть решения,где по отдельности задают ширину таблицам,что не правильно как по мне,т.к. в уроке мы изучаем другое…

Kate744 · 10.Декабрь.2017 18:21:02

Не совпадает ширина второй колонки с названием “Сложные”, я задала парметры для класса Column, а туда входят оба блока, первый отлично совпадает с примером, а что делать со вторым блоком, не могу додуматься.
Как отрегулировать конкретно его ширину?
Спасибо.

.column {
padding: 10px 24px 10px 10px;
background: rgba(0, 255, 255, 0.2);
border: 2px solid white;
display: inline-block;
margin-right: 11px;
vertical-align:top;

}
.table {
display: table;
margin-top: 10px;
border: 1px solid white;
}

.cell {
padding: 5px 10px;
background: rgba(0, 255, 255, 0.2);
border: 1px solid white;
display: table-cell;
width: 96px;
}
.row {
display: table-row;
}
.col-3 {
display: none;
}

Alexey42 · 24.Декабрь.2017 13:21:54

Здравствуйте, у меня также как у Вас получилось, только в нижней таблице внутренние вертикальная и горизонтальная разделительные линии были толще. Подсмотрел у Вас.
У меня в моем коде для класса .table не было задано свойство - border-collapse: collapse;
Ваш код помог разобраться. Спасибо.

jeny1 · 24.Март.2018 16:43:32

Здравствуйте. А можно ли уточнить зачем надо было писать это, чтобы все получилось на 100%. У меня все сошлось, до этой записи. Если бы не форум не догадался бы сам никогда. Поясните, пожалуйста.

SteelDaddy · 03.Ноябрь.2018 14:12:56

100%

/* Базовые стили, изменять не нужно */
html,
body {
margin: 0;
padding: 0;
}

body {
width: 520px;
min-height: 270px;
padding: 20px;

font-size: 14px;
line-height: 1.5;
font-family: “Arial”, sans-serif;
color: white;

background-color: #3a78a1;
background-image: url(“grid.png”);
background-repeat: repeat;
background-position: -80px -80px;
}

/* Cтили, которые можно изменять */
.column {
display: inline-block;
vertical-align: top;
margin-bottom: 10px;
padding: 10px;
width: 76px;
background-color: rgba(0, 255, 255, 0.2);
border: 2px solid white;
margin-right: 10px;
}

.cell {
padding: 5px 10px;
background-color: rgba(0, 255, 255, 0.2);
border: 2px solid white;
display: table-cell;
width: 96px
}

.col-3 {
display: none;
}

.table {
display: table;
border-collapse: collapse;
}

.row {
display: table-row;
}

Shoggoth · 03.Ноябрь.2018 14:36:55

На 100%, хотя так и не понял про магию table-row:

/* Базовые стили, изменять не нужно */
html,
body {
margin: 0;
padding: 0;
}

body {
width: 520px;
min-height: 270px;
padding: 20px;

font-size: 14px;
line-height: 1.5;
font-family: “Arial”, sans-serif;
color: white;

background-color: #3a78a1;
background-image: url(“grid.png”);
background-repeat: repeat;
background-position: -80px -80px;
}

/* Cтили, которые можно изменять */
.column {
margin-bottom: 10px;
padding: 10px;
background-color: rgba(0, 255, 255, 0.2);
border: 2px solid white;
display: inline-block;
}

.column:first-child {
width: 76px;
}

.column:nth-child(2) {
width: 76px;
margin-left: 10px;
vertical-align: top;
}

.cell {
padding: 5px 10px;
background-color: rgba(0, 255, 255, 0.2);
border: 2px solid white;
}

.col-3 {
display: none;
}

.table {
display: table;
border-collapse: collapse;

}

.col-1,
.col-2 {
display: table-cell;
width: 96px;
}

.row {
display: table-row;
}

Motvey · 05.Ноябрь.2018 16:45:09

/* Базовые стили, изменять не нужно */
html,
body {
margin: 0;
padding: 0;
}

body {
width: 520px;
min-height: 270px;
padding: 20px;
font-size: 14px;
line-height: 1.5;
font-family: Arial, sans-serif;
color: white;
background-color: #3a78a1;
background-image: url("/assets/course9/grid.png");
background-repeat: repeat;
background-position: -80px -80px;
}

/* Cтили, которые можно изменять */
.column {
display: inline-block;
box-sizing: border-box;
margin-right: 10px;
margin-bottom: 10px;
padding: 10px;
width: 100px;
vertical-align: top;
background: rgba(0, 255, 255, 0.2);
border: 2px solid white;
}

.table {
display: table;
border-collapse: collapse;
}

.row {display: table-row;}

.cell {
display: table-cell;
padding: 5px 10px;
width: 96px;
background: rgba(0, 255, 255, 0.2);
border: 2px solid white;
}

.cell:last-child {display: none;}

Alexandrew · 07.Ноябрь.2018 11:01:45

Возможно ли сделать это задание используя три класса? есть те, кто сделал?
а тем временем можете глянуть мой код

.column {
display:inline-table;
margin-bottom: 10px;
padding: 10px;
margin-right: 10px;
background-color: rgba(0, 255, 255, 0.2);
border: 2px solid white;
padding-right: 15px;
}

.column:first-child{
padding-right: 24px;
}

.cell {
padding: 5px 10px;
display: table-cell;
width: 96px;
border: 2px solid white;
background-color: rgba(0, 255, 255, 0.2);
}

.table{
border-collapse:collapse;
display: table;
}

.row{
display: table-row;

}
.col-3{
display: none;
}

Alexander_Sukharev · 19.Февраль.2019 20:23:20

/* Cтили, которые можно изменять */
.column {
  margin: 0 10px 10px 0;
  padding: 10px;
  display: inline-block;
  background-color: rgba(0, 255, 255, 0.2);
  border: 2px solid white;
  vertical-align: top;
  width: 76px;
}

.table {
  display: table;
  border-collapse: collapse;
}

.row {
  display: table-row;
}

.cell {
  display: table-cell;
  padding: 5px 10px;
  background-color: rgba(0, 255, 255, 0.2);
  border: 2px solid white;
  width: 96px;
}

.col-3 {
  display: none;
}`

maxk · 28.Март.2019 09:33:12

/* Cтили, которые можно изменять */
.column {
margin-bottom: 10px;
padding: 10px;
width: 76px;
background-color: rgba(0, 255, 255, 0.2);
border: 2px solid white;
display: inline-block;
vertical-align: top;
margin-right: 10px;
}

.cell {
padding: 5px 10px;
display: table-cell;
background-color: rgba(0, 255, 255, 0.2);
border: 2px solid white;
width: 96px;
}

.table {
display: table;
border-collapse: collapse;
border: 1px solid white;
}
.col-3 { display: none;}
.row { display: table-row; }

monsodenisetony · 24.Апрель.2019 15:58:07

html,
body {
    margin: 0;
    padding: 0;
}

body {
    width: 520px;
    min-height: 270px;
    padding: 20px;
    font-size: 14px;
    line-height: 1.5;
    font-family: Arial, sans-serif;
    color: white;
    background-color: #3a78a1;
    background-image: url("/assets/course9/grid.png");
    background-repeat: repeat;
    background-position: -80px -80px;
}

.column {
    margin-bottom: 10px;
    padding: 10px;
    border: 2px solid white;
    background: rgba(0, 255, 255, 0.2);
    display: inline-block;
    width: 76px;
    vertical-align: top;
}
.column:nth-child(2){
    margin-left:10px;
    }

.cell {
    padding: 5px 10px;
    background: rgba(0, 255, 255, 0.2);
    border: 2px solid white;
    display:table-cell;
}
.table{
    display:table;
    width:236px;
    border-spacing: 0px;
    border-collapse: collapse;
    }
    
.col-1{ width:104px;}
.col-2{ width:118px;}
.col-3{
    display:none;
    } 
.row{
    display:table-row;
    }