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


#21
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 не сработал? вебкиты тоже не помогли.


#22

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


#23

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


#24

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


#25

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


#26

А у меня такой вариант. Тоже 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 ;
}


#27

border: none;


#28

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


#29

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


#30

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


#31

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


#32

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


#33

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

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


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

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 - это не базовые стили?


#35

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


#36

У меня 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;
}