Первое испытание [8/23

Hermine · 28.Июль.2015 09:12:43

Добрый день. Спасибо за предыдущие ответы и скажите пожалуйста где ошибка?

html, body{
    margin:0;
    padding:0;
}
body{
    width:280px;
    min-height:230px;
    padding-top:20px;
    padding-left: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;
}
.block{
    border-collapse: collapse;
    border:2px solid white;
    background:rgba(0, 255, 255, 0.2);
    padding: 5px;
}
.block1 {width: 187px;
height: 29px;}
.block2 {width: 137px;
height: 39px;
margin-top: 16px;
margin-left: 120px;
margin-bottom:20px;
text-align: center;
padding: 10px 0px;}
.block3 {width: 169px;
height: 25px;
margin-top: 16px;
margin-left: 17px;
border-width: 12px;}

juwain · 28.Июль.2015 09:38:55

В этом испытании надо просто подобрать правильные размеры и отступы. Посмотрите во вкладку «Различия» и «Наложение», чтобы увидеть, где несовпадение.

Советую устанавливать внешние отступы у элементов снизу, а не сверху, и делать последовательно, сначала первый блок чтобы точно совпадал, потом второй и затем третий.

Ну и код отформатируйте ) Адски непонятно же с таким форматированием

sexys · 13.Октябрь.2015 05:35:39

Вот 100%:

.block {
border: 2px solid white;
background: rgba(0, 255, 255, 0.2);
}

.block1 {
width:196px;
height:36px;
}

.block2 {
margin: 20px 0px 0px 120px;
padding: 10px 0px 12px 40px;
width: 96px;
height: 34px;
}

.block3 {
border: 12px solid white;
margin: 20px 0px 0px 20px;
padding: 5px 0px 5px 5px;
width: 171px;
height: 26px;
}

Yurij_Maksimenko · 06.Октябрь.2016 03:58:18

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

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

body {
width: 540px;
min-height: 290px;
padding-top: 20px;
padding-left: 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;
}

.block {
background: rgba(0, 255, 255, 0.2);
border: 2px solid white;

}
.block1 {
width: 196px;
height: 36px;
}
.block2 {
width: 96px;
height: 46px;
position: relative;
top: 20px;
left: 120px;
padding-top: 10px;
padding-left: 40px;

}
.block3 {
width: 171px;
height: 31px;
position: relative;
top: 40px;
left: 20px;
border: 12px solid white;
text-align: left;
padding-top: 5px;
padding-left: 5px;

}

Ineska · 06.Октябрь.2016 05:56:32

Предполагается, что позиционирование вы еще не знаете.

Andrei_Ribac · 17.Ноябрь.2016 09:34:45

решение на 100 %
html,
body {
margin: 0;
padding: 0;
}

body {
width: 540px;
min-height: 290px;
padding-top: 20px;
padding-left: 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;
}

.block {
background: rgba(0, 255, 255, 0.2);
border: 2px solid white;
}
.block1 {
width: 196px;
min-height: 36px;

}
.block2 {
width: 56px;
min-height: 36px;
padding: 10px 40px;
margin: 20px 120px;
}
.block3 {
margin-left: 20px;
border: 12px solid;
padding: 5px;
width: 166px;
min-height: 26px;
}

Yurij_Maksimenko · 22.Ноябрь.2016 14:54:57

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

JohnnyJO · 18.Январь.2017 09:44:29

Если в выполнении данного задания не использовал высоту и ширину, это плохо? взял результат в 97%, но что-то даже не подумал о том, что нужно использовать вейт и хайт.

Ineska · 18.Январь.2017 10:19:50

Покажите свой вариант.

JohnnyJO · 18.Январь.2017 11:23:02

Сейчас сделал только что еще раз, вот 100% вариант:
.block {
background: rgba(0, 255, 255, 0.2);
border: 2px solid white;
}
.block1 {
margin: 0px 340px 20px 0px;
padding: 0px 0px 15px 0px;
}
.block2 {
margin: 0px 280px 20px 120px;
padding: 10px 0px 25px 40px;

}
.block3 {
border: 12px solid white;
margin: 0px 320px 0px 20px;
padding: 5px 0px 10px 5px;

}

Ineska · 18.Январь.2017 11:32:53

Решение имеет право на существование. Но в реальных условиях у блока кроме отступов все же должна быть ширина и высота.

JohnnyJO · 18.Январь.2017 12:11:08

можете объяснить почему?

Ineska · 18.Январь.2017 12:13:52

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

Kartinnikov_Aleksandr · 19.Январь.2017 13:02:27

У меня так получилось. Результат 100%

.block1 {
width:196px;
padding-bottom:15px;
margin-bottom:20px;
}

.block2 {
width:96px;
height:34px;
padding:10px 0px 12px 40px;
margin:20px 0 0px 120px;
}

.block3 {
margin:20px 0 0px 20px;
border:#FFFFFF solid 12px;
padding:5px 10px 10px 5px;
width:161px;
}

Oleg_Semenov · 22.Январь.2017 12:13:20

Help! не понимаю, как исправить

Ineska · 22.Январь.2017 12:51:06

Скорее всего вы изменяли стили у body.

IgorChesalin · 27.Январь.2017 14:58:51

Подскажите пожалуйста, прошел на 100%, но верным ли способом для данного испытания, а то запутался. Спасибо!

.block1 {
width: 196px;
height: 36px;
}

.block2 {
width: 96px;
height: 46px;
margin-top: 20px;
margin-left: 120px;
padding-left: 40px;
padding-top: 10px;

}

.block3 {
width: 171px;
height: 26px;

margin-top: 20px;
margin-left: 20px;

padding: 5px 0px 5px 5px;

border: 12px solid;

}

Ineska · 27.Январь.2017 15:14:36

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

DevilInRed_ru · 20.Февраль.2017 13:40:22

Чем меньше слов, тем красивее

.block1 {
width: 196px;
height: 36px;
}

.block2 {
width: 96px;
margin: 20px 120px;
padding: 10px 0 25px 40px;
}

.block3 {
width: 166px;
height: 26px;
margin: 20px 20px;
padding: 5px;
border: 12px solid white;

Sergej_Eryomin · 26.Февраль.2017 17:47:27

Результат 100%. Подскажите - правильным путем решил?

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

body {
width: 540px;
min-height: 290px;
padding-top: 20px;
padding-left: 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;
}

.block {
background: rgba(0, 255, 255, 0.2);
border: 2px solid white;
}

.block1 {
width: 196px;
height: 36px;
}

.block2 {
margin-top: 20px;
margin-left: 120px;
width: 56px;
height: 46px;
padding-right: 40px;
padding-left: 40px;
padding-top: 10px;
}

.block3 {
margin-left: 20px;
margin-top: 20px;
border: 12px solid;
padding-top: 5px;
padding-left: 5px;
padding-bottom: 10px;
width: 171px;
}