Последнее испытание 23/23

Курсы §10. Блочная модель документа
1

Добился 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("/assets/course9/grid.png");
background-repeat: repeat;
background-position: -80px -80px;
}

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

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

}
.row {
display: table-row;

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

.cell {
display: table-cell;
}
.col-3 {
display: none;
}

1 лайк
3 
.column {
display: inline-block;
vertical-align: top;
width: 76px;
margin-bottom: 10px;
margin-right: 10px;
padding: 10px;
background: rgba(0, 255, 255, 0.2);
border: 2px solid white;

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

4

Обьясните пожалуйста почему у класса column ширина 76px получилась. а у cell 98px?

5

А у вас 98px получилось? Покажите код свой.

6 
`/* Базовые стили, изменять не нужно */

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;
padding: 10px;
background: rgba(0, 255, 255, 0.2);
border: 2px solid white;
display:inline-block;
vertical-align:top;
width:76px;

}

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

.row {
display:table-row;
}

.col-3 {
visibility:hidden;
}

щирину не сам подбирал на форуме смотрел. просто не могу понять почему? и у меня внутри таблицы жирная граница получилась`

7

вроде все получилось только с таблицой что то непонятное.

8

Так 96px написано у вас. Откуда 98px взялось?
Двойные границы в таблице, потому что забыли border-collapse.

9

Я перепутал. А ПОЧЕМУ У КОЛУМН 76,?

10

А по-вашему сколько?

11

Как я понял потому что 1ый блок занимает 80 px + border с 2 сторон по 2 пикселя . то есть 80 - 2*2=76? Я правильно понял?

12

Да, правильно, рамка считается отдельно.

13

Спасибо огромное. Я просто все сделал а 100% не было . решил на форум взглянуть и смотрю ширина 76 почему? А теперь понял. Спасибо. Честно говоря самый лучший форум по моему мнению. Мне так сразу нигде не отвечали) Будьте здоровы. Досвиднаия!

1 лайк
14

Заходите ещё)

15

Спасибо)

16

сделал следующим образом, насколько это правильно без использования классов кол1 и кол2:

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

}

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

я правильно понимаю, что чем меньше, тем лучше?

17

В данном случае - да, чем меньше, тем лучше.
Только поправьте начало кода, первое правило не полностью отображается.

18

у меня выдало 100% правильности. Не могу понять, что не так отображается?
кстати, я в .table прописал display: table;
это неправильно?
Мне хотелось, чтобы с помощью ф12, когда наводишь на таблицу через селект она полностью отображалась как .table и я мог управлять всем стилем из тейбла, но у меня не получилось, почему?

19

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

20

вы немного не поняли, смотрите:

прописав в .table - display: table;
я думал, что наводя селектом на таблицу из 2 моих столбцов (или как правильно сказать?) она вся будет отображаться как div.table и что можно будет управлять стилем таблицы прописывая все в .table.
Где я ошибся? Почему это не сработало? Должно ли было это вообще работать?
А, про какую пустую строку вы говорите?

21

Вот так ваше сообщение начинается. Чтобы начало кода было видно, нужно после [quote=“JohnnyJO, post:16, topic:4843”]
сделал следующим образом, насколько это правильно без использования классов кол1 и кол2:
[/quote]

с помощью клавиши Enter на клавиатуре сделать пустую строку.
Таблица полностью не отображается, потому что вы навели курсор на ячейку.