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

chipolo · 2015-09-13 09:14:18 UTC

Ни как не могу понять как перенести слова мой код:

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

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

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

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

`

Вот мой результат и различия

не успокоюсь пока 100% не будет

Ivan · 2015-09-13 12:12:53 UTC

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

chipolo · 2015-09-13 19:36:09 UTC

Не помогло ширину сделал 0пк, а паддинг справа 86, ничего не изменилось((

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

Ivan · 2015-09-14 04:19:06 UTC

Ну уж куда 0-то, попробуй 60px ширину, ну и соответственно 26px справа.

Alecsandr · 2015-09-14 05:51:46 UTC

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

}
.column:nth-child(2) {
margin-left: 10px;
height: 105px;
}

Это верхние таблицы, полное совпадание)

chipolo · 2015-09-14 06:37:04 UTC

Спасибо, за помощь. Получилось. Когда я поставил ширину 0 у меня текст убежал вниз в первой колонке, а мини-браузер не отобразил мне изменения, поэтому я решил что не работает. Нужно было всего лишь нажать проверить

Gnomulus · 2015-09-14 17:45:09 UTC

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

body {
width: 260px;
min-height: 210px;
padding: 20px;
font-family: “Arial”, sans-serif;
font-size: 14px;
line-height: 1.5;
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:100px;
height:128px;
margin-right:12px;
box-sizing:border-box;
vertical-align:top;
padding: 10px 14px;
}

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

}
.table {
display:table;
border-collapse:collapse;
}
.col-1 {
border-collapse:collapse;
}
.col-3 {
display:none;

}
.row {display:table-row;}
*/

Подскажите, пожалуйста, чего не хватает?

Ineska · 2015-09-15 12:18:09 UTC

Свойство border-collapse:collapse; задается в целом для таблицы. Нет необходимости писать его трижды.Паддинг справа 26рх для .column.

ulson · 2015-10-20 13:17:18 UTC

Частично потырил решения у предшественников и получил свой вариант 100%

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

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

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

Iriska · 2016-01-28 14:05:54 UTC

Подскажите как перенести табличку вниз?))

Ineska · 2016-01-28 17:26:18 UTC

Код покажите, пожалуйста.

Iriska · 2016-01-29 07:50:55 UTC

Спасибо, уже разобралась. Реализовала таким образом
.table { display:inline-table; border-collapse:collapse; border: 1px solid white; margin-top:139px; margin-left:-228px;
Результат 100%)) Возможно есть более правильный вариант решения?

nu3naeteli · 2016-02-25 11:30:16 UTC

вроде способы прохождения отличаются… Посмотрите, пожалуйста, нормально ли у меня получилось или где-то можно было сделать лучше?

/* 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;
  width:96px;
}
.table{
  display:table;
  border-collapse:collapse;
}
.row{
  display:table-row;
}
.col-3{
  display:none;
}

Ineska · 2016-02-25 11:58:32 UTC

У вас очень хорошо получилось. Нет ни одной лишней строки)

crazypushok · 2016-04-14 09:20:08 UTC

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

felmike · 2016-05-06 16:01:20 UTC

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

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

Unique · 2016-05-31 09:24:35 UTC

ВОЕВАЛ! 100%

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

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

Sh1985 · 2016-06-06 20:19:25 UTC

Здравствуйте!!! подскажите пожалуйста, нормальны ли это код?

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: 14px;
    padding: 10px;
    background: rgba(0, 255, 255, 0.2);
    border: 2px solid white;
    display: table;
    float:left;
    width:76px;
}

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

.table {
    display: table;
    margin-top: 139px;
    border-collapse: collapse
}
.row {
    display: table-row;
}
/*.col-1 {
    width:96px; - ширина по отдельности
}
.col-2 {
    width:96px;
}*/
.col-3 {
    display: none;
}

Zaskin · 2016-06-09 08:30:43 UTC

Как-то так на 100%

.column {
display: inline-block;
vertical-align: top;
margin-bottom: 10px;
padding: 10px;
background: rgba(0, 255, 255, 0.2);
border: 2px solid white;
margin-right: 10px;
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-3 {
display: none;
}

miha92 · 2016-07-07 13:13:44 UTC

С Вашей помощью и сам чуть подшаманив вышло вот на 100%:
/* Cтили, которые можно изменять */
.column {
margin-bottom: 10px;
padding: 10px;
background: rgba(0, 255, 255, 0.2);
border: 2px solid white;
width: 76px;
display: inline-block;
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;
border-collapse: collapse;
display: table-cell;
}
.table {
width: 236px;
display: table;
border-collapse: collapse;

}
.col-1 {
width: 90px;
}
.col-2 {
width: 90px;
}
.col-3 {
display: none;
}
.row {
display: table-row;
}