Второе испытание 16/23

mrsKVA · 13.Январь.2017 11:38:44

input[type="text"] {
height: 38px;
font-size: 18px;
font-family: Arial, sans-serif;
border: 2px solid #cccccc;
border-radius: 5px;
 padding: 0 10px;
margin: 10px;
box-sizing: border-box;

}

.block {
background: rgba(0, 255, 255, 0.2);
}
.block1 {border: 2px solid white;
}
.block2 {
padding: 10px;
margin: 18px;
}

Подскажите, почему инпут все-равно вылазит? box-sizing не сработал? вебкиты тоже не помогли.

JohnnyJO · 19.Январь.2017 15:52:21

у тебя здесь блок2 размером с импут и прячется за ним. Отображается неправильно.

Oksamba · 07.Март.2017 09:06:04

Я не понимаю принципа! Что за чем устанавливать?
там меняешь одно - едет другое. Переписала готовый код. И то непонятно. Текстовое поле то тут, то там!
Мне кажется перед этим заданием надо сделать похожую обучалку где одно идет за другим.
А пока что прошу помощи. Напишите пожалуйста с чего начинать и вообще по порядку.

Oksamba · 07.Март.2017 13:01:40

с чего начать расписывать код? с .block1, .block2 или input?
что за чем идет?

Ineska · 07.Март.2017 13:04:27

Предлагаю начать с середины, т. е. с input, его внутренних отступов и свойства box-sizing.

serdjio24 · 28.Март.2017 18:46:39

А у меня такой вариант. Тоже 100:

input[type=“text”] {
box-sizing: border-box;
height: 38px;
font-size: 18px;
font-family: Arial, sans-serif;
border: 2px solid #cccccc;
border-radius: 5px;
padding-left: 10px;
}

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

}
.block2 {
margin: 18px;
padding: 20px;
border: 0 ;
}

Ineska · 28.Март.2017 18:50:08

border: none;

Ann1 · 02.Июль.2017 13:51:42

У меня получился весьма странный код, но испытание пройдено на 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;
}

input[type=“text”] {
width:440px !important;
padding:10px 10px;
margin:20px;
box-sizing:border-box;
height: 38px;
font-size: 18px;
font-family: Arial, sans-serif;
border: 2px solid #cccccc;
border-radius: 5px;
}

.block {
box-sizing:border-box;
background: rgba(0, 255, 255, 0.2);
}

.block1{
border:2px solid white;
padding:18px !important;

}

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

Ineska · 02.Июль.2017 14:34:45

!important желательно не использовать.

Ann1 · 02.Июль.2017 14:44:30

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

Ineska · 02.Июль.2017 14:51:59

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

Clean_Table · 06.Июль.2017 18:05:39

Только хотел поделиться кодом, как заметил что меня уже опередили . Я сделал точно также: не обязательно прописывать высоту блоков, можно обойтись одними отступами.

jeny1 · 23.Март.2018 09:15:27

Здравствуйте. А у меня совсем не так получилось. Я что, балда?

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

input[type=“text”] {
height: 38px;
width: 440px !important;
font-size: 18px;
font-family: Arial, sans-serif;
border: 2px solid #cccccc;
border-radius: 5px;
box-sizing: border-box;
margin: 20px;
padding: 10px

}
.block1 {
background: rgba(0, 255, 255, 0.2);
border: 2px solid white;
width: 516px;
height: 114px;
}
div .block2{
width: 480px;
height: 78px;
background: rgba(0, 255, 255, 0.2);
margin: 18px;
}

ASs · 27.Май.2018 12:08:19

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

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

input[type=“text”] {
height: 38px;
font-size: 18px;
font-family: Arial, sans-serif;
border: 2px solid #cccccc;
border-radius: 5px;
box-sizing: border-box;
padding: 15px 10px;
}

.block {
background: rgba(0, 255, 255, 0.2);
padding: 40px 40px;
}

Обошлось только несколькими строчками кода (блоки 1 и 2 вообще не использовал)…
картинка сходится на 100% (правда, так как блоки не использовались - то решение показывает всего лишь на 93%)… Ведь .block и input - это не базовые стили?

Ineska · 27.Май.2018 13:08:04

Имеется в виду, что не нужно изменять уже прописанные стили, но добавить свои вы всегда можете, если это необходимо.

Votary · 11.Июль.2018 12:30:43

У меня 99%
Код, укажите на ошибки пожалуйста.

input[type="text"] {

height: 38px;
padding: 0px 10px ;
margin: 20px 10px;
font-size: 18px;
font-family: inherit;
border: 2px solid #cccccc;
border-radius: 5px;
box-sizing: border-box;
}

.block {
background-color: rgba(0, 255, 255, 0.2);
}

.block1 {
border: 2px solid white;
height: 114px;
}

.block2 {
height: 80px;
margin: 18px;
padding-left: 10px;
padding-right: 30px;
}

Makeman · 21.Июль.2018 12:18:50

Мой вариант решения

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

body {
width: 520px;
min-height: 270px;
padding: 20px;
margin-left: 0px;
margin-right: auto;
font-size: 14px;
line-height: 1.5;
font-family: “Arial”, sans-serif;
color: white;

background-color: #3a78a1;
background-image: url(“grid.png”);
background-repeat: repeat;
background-position: -80px -80px;
}

input[type=“text”] {
height: 38px;
box-sizing: border-box;
font-size: 18px;
font-family: inherit;
padding-left: 10px;
border: 2px solid #cccccc;
border-radius: 5px;
}

.block {
background-color: rgba(0, 255, 255, 0.2);
padding: 20px;
border: 2px solid white;
}
.block2 {
margin: 18px;
border: none;
}

Lyndarolz · 17.Сентябрь.2018 16:21:45

Является ли преступным моё 100% решение из-за использования “!important”?

input[type=“text”] {
height: 38px;
padding: 10px;
font-size: 18px;
font-family: inherit;
box-sizing: border-box;
border: 2px solid #cccccc;
border-radius: 5px;
}

.block1 {
padding: 18px !important;
border: 2px solid white;
height: 78px;
}

.block2 {
padding: 20px;
}

alt1tude · 18.Октябрь.2018 09:54:20

С точки зрения “творческого костыля” такое решение для данного задания на 100% имеет место быть.
А с точки зрения правильности выполнения в соответствии с условиями задачи - нет.
Паддинг залоченный в инлайне как бы намекает, что выравнивание лучше делать через маргин+паддинг одного блока, чем паддинг+паддинг разных блоков, тем более когда об этом говорится в курсе.

Motvey · 05.Ноябрь.2018 16:35:39

Вот 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(“https://htmlacademy.ru/assets/course9/grid.png”);
background-repeat: repeat;
background-position: -80px -80px;
}

input[type=“text”] {
height: 38px;
padding: 0 10px;
font-size: 18px;
box-sizing: border-box;
font-family: Arial, sans-serif;
border: 2px solid #cccccc;
border-radius: 5px;
}

.block {
padding: 20px;
background: rgba(0, 255, 255, 0.2);
}

.block1 {
border: 2px solid white;
}

.block2 {
margin: 18px;
}