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

neostead · 27.Июль.2016 13:26:05

Кое-что подсмотрел на форуме, до этого получалось 95% (сейчас 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;
    width: 76px;
    margin-right: 10px;
    
}
.cell {
    padding: 5px 10px;
    background: rgba(0, 255, 255, 0.2);
    border: 2px solid white;
    display: table-cell;
}
.table {
    display: table;
    border-collapse: collapse;
    border: 2px solid white;
}
.row {
    display: table-row;
}
.col-1{
    width: 96px;
}
.col-2 {
    width: 96px;
}
.col-3 {
    display: none;
}

kif · 04.Август.2016 11:25:32

Почему в этом задании display: table-cell; строит по 2 ряда 2 столбца, а не по другому все в ряд например ?

Ineska · 04.Август.2016 12:27:56

 Вот фрагмент кода из этого испытания:
 <div class="table">
            <div class="row">
                <div class="cell col-1">
                    <strong>Табличные</strong>
                </div>
                <div class="cell col-2"></div>
                <div class="cell col-3"></div>
            </div>
            <div class="row">
                <div class="cell col-1">
                    table
                </div>
                <div class="cell col-2">
                    -row<br>
                    -cell<br>
                    -column<br>
                    -caption<br>
                </div>
                <div class="cell col-3">
                    строка<br>
                    ячейка<br>
                    колонка<br>
                    заголовок<br>
                </div>
            </div>
        </div>

Обратите внимание, у двух блоков есть класс row (ряд). а в css для этих блоков есть правило:
.row {
display:table-row;
}
Поэтому рядов именно два.

Angel_X · 22.Август.2016 09:52:04

заходит на 100% была проблема с толщиной рамки, найдя тут варианты, решил применить к классу table - .table{border-collapse:collapse;} и все гуд.

/* Базовые стили, изменять не нужно */
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-table;
width:76px;

}

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

Kolya · 04.Сентябрь.2016 09:31:24

почему у меня 3й столбец не прячется? дисплей нон прописал

Zaskin · 16.Сентябрь.2016 10:06:18

.col-3 поставь ниже .cell

w15 · 10.Февраль.2017 16:36:03

Вам нужно использовать visibility: hidden; вместо dispaly: none; для класса .col-3.

mewse · 25.Февраль.2017 19:28:34

100%, но ощущение, что притянуто за уши)

.column {
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 {
padding: 5px 10px;
background: rgba(0, 255, 255, 0.2);
border: 1px solid white;
vertical-align: top;
display: table-cell;
width: 96px;
}

.col-3 {
display: none;
}

.table {
border: 1px solid white;
display: table;
}

Matrix · 04.Март.2017 18:08:29

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

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

cheda · 14.Март.2017 15:10:10

Маргин можно до одной строчки укоротить)

margin: 0 10px 10px 0;

samodur · 21.Март.2017 20:32:59

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

.column {
width: 76px;
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;
}

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

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

.row {
display: table-row;
}

.col-3 {
display: none;
}`

100%. Не подглядывал.)

VVad · 02.Апрель.2017 13:20:40

Если использоваться в .column inline-table, можно избежать выравнивание.

Just_bk · 17.Апрель.2017 16:51:14

Мои 100%

/* Cтили, которые можно изменять */
.column {
margin-bottom: 10px;
margin-right: 10px;
padding: 10px;
background: rgba(0, 255, 255, 0.2);
border: 2px solid white;
display: inline-block;
width: 76px;
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 {
visibility: hidden;
}
.table {
border-collapse: collapse;
}
.row {
display: table-row;
}

Elly · 20.Апрель.2017 07:49:02

А поясните, пожалуйста, роль .row { display: table-row; } . Я что-то не могу понять почему именно добавление этого элемента с 98% переносит сразу же на 100%

Spectrum26 · 23.Май.2017 22:42:25

так все сходится

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

}

Al-Farabi · 12.Июнь.2017 12:29:02

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

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

Ineska · 12.Июнь.2017 12:50:18

Два правила для .cell.

kost1k · 15.Июнь.2017 10:46:04

зачем указывать width для row? не работает же)
и вместо того чтобы писать border: 1px 2 раза проще использовать border-collapse: collapse;

Frostmorn2000 · 19.Июнь.2017 15:36:55

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

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

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

.col-1 {
width: 96px;
}

.col-2 {
width: 96px;
}

.col-3 {
display: none;
}

Alozik · 29.Июнь.2017 20:43:57

Чем вам dispaly: none; не нравится?
Работает ничуть не хуже. И это даже более целесообразно в данной ситуации, чем hidden.