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


#25

Добрый день.
Выполняю задание, но на любой код он пишет - холодно.
Осталось всего 3 попытки. Я уже отсюда поскопировала коды, которые 100%, при наложении всё идеально, но всё равно холодно. Как быть?


#26

Вкладку “Различия” смотрите. “Наложение” бывает обманчиво.


#27

добавил свойство {box-sizing: border-box;} - не пришлось высчитывать микроскопические различия в 2-10px и код вышел очень короткий. 100%

.block {
background: rgba(0, 255, 255, 0.2);
border: 2px solid white;
box-sizing: border-box;
width: 200px;
height: 60px;
}

.block1 {
height: 40px;
}

.block2 {
width: 140px;
margin: 20px 120px;
padding: 10px 40px;
}

.block3 {
border-width: 12px;
margin-left: 20px;
padding: 5px;
}


#28

Поясните, какими вариантами здесь нужно/можно выставить текст в нужную позицию?

97% Результат

.block1{
width:196px;
height:36px;
margin-bottom:20px;
}

.block2{
width:136px;
height:56px;
margin:0 3px 0 120px;
text-align:center;
}

.block3{
width:176px;
height:36px;
border-width:12px;
margin:20px 0 0 20px;

}


#29

Еще padding есть кроме margin.


#30

это все варианты относительно изложенного хода моей мысли?


#31

100%, но все же, есть ли иные способы выравнивания текста в блоках (схожие с text-align, например?)

спасибо за наводку

.block1{
width:196px;
height:36px;
margin-bottom:20px;
}

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

.block3{
width:171px;
height:31px;
border-width:12px;
margin:20px 0 0 20px;
padding:5px 0 0 5px;
}


#32

В рамках задания кроме padding - нет.
А вообще text-align, как вы сказали, а еще vertical-align и line-height.


#33

Посмотрел все варианты которые тут доступны, все какие-то “громоздкие”.
Я понимаю, что в реальности, блоки не будут пустые и так позиционировать не получиться. Но в данном случае, задание требует лишь выровнять блоки, у меня получилось так на 100% пройти.

.block1 {
    margin: 0 340px 20px 0px;
    padding: 0 0 15px 0;
}
.block2 {
    margin: 0px 280px 20px 120px;
    padding: 10px 0px 25px 40px;
}
.block3 {
    margin: 0px 320px 0px 20px;
    border: 12px solid;
    padding: 5px 0px 10px 5px;
}

Вопрос был лишь к border пришлось на глаз подбирал значение. :slight_smile:


#34

Да, оригинально, но (как вы сказали) далеко от реальности :slight_smile:


#35

на 100%
.block1 {
margin-right: 340px;
height:36px;
}
.block2 {
margin: 20px 280px 16px 120px;
height:40px;
padding: 10px 40px 6px 40px;
}
.block3 {
margin: 20px 320px 0px 20px;
height: 11px;
border-width: 12px;
padding: 5px 0px 20px 5px;
}


#36

100% (Без заморочек, простенько)

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


#37

Вот 100% результат по пройденным темам
.block {
background: rgba(0, 255, 255, 0.2);
border: 2px solid white;
margin-bottom: 20px;
}

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

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

.block3 {
border: 12px solid white;
padding: 5px 0px 0px 5px;
margin-left: 20px;
width: 171px;
height: 31px;


#38

наверно самый громоздкий код у меня но наигрался с отступами и пикселями :slight_smile:
.block {
background: rgba(0, 255, 255, 0.2);
border: 2px solid white;
}
.block1{
width:196px;
padding-bottom:26px;
height:10px;
}
.block2{
width:91px;
margin-left:120px;
margin-top:20px;
height:39px;
padding:10px 5px 7px 40px;
}
.block3{
border-width:12px;
width:171px;
margin-left:20px;
margin-top:20px;
padding-top:5px;
padding-left:5px;
padding-bottom:10px;
height:21px;
}


#39

другой вариант решения! более умный подход
.block1{
margin:0px 340px 20px 0px;
padding:0 0 15px 0;
}
.block2{
margin:0px 280px 20px 120px;
padding:10px 0 25px 40px;
}
.block3{
border:12px solid white;
margin:0 320px 0 20px;
padding:5px 0 10px 5px;
}


#40

/* Базовые стили, изменять не нужно */
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: 56px;
height: 36px;
margin: 20px 120px;
padding: 10px 40px;
}

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

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


#41

А в чем здесь “более умный подход”?


#43

А мой вариант правильный?

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

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

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

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


#44

сравниваю своё прошлое :grinning:


#45

100%))0

Цитата

/* Базовые стили, изменять не нужно */
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 {
margin: 0 340px 20px 0;
padding: 0 0 15px 0;
}

.block2 {
margin: 0 280px 20px 120px;
padding: 10px 60px 25px 40px;
white-space:pre;

}

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

Цитата