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


#46

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


#47

Все ли верно ?
/* Базовые стили, изменять не нужно */
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;
}


#48

/* 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%:grin:


#49

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


#50

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


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

#52

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


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

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

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


#55

Сразу все сделал на 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;
}

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


#56

Не совпадает ширина второй колонки с названием “Сложные”, я задала парметры для класса 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;
}


#57

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


#58

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