Задание 16/23. Испытание 2

LeXX · 26.Август.2015 13:02:49

Сделал на 100%:

/* Базовые стили, изменять не нужно */
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;
}

input[type="text"] {
    height: 38px;
    font-size: 18px;
    font-family: sans-serif, "Arial";
    border: 2px solid #ccc;
    border-radius: 5px;
}

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

/* Cтили, которые можно изменять */
.block1 {
    border:2px solid white;     
}

.block2 {
    margin:18px;    
}

input[type="text"] {
    box-sizing:border-box;
    margin:20px;
    width:180px !important;
    padding-left:10px;
}

Но как сделать без important?

juwain · 26.Август.2015 14:29:37

Задание можно пройти не задавая body и полю ввода определённую ширину. Несоответствие образца и результата — это недоработка, которую скоро поправим.

ulson · 19.Октябрь.2015 13:36:04

100% редактировались только блоки.

/* Cтили, которые можно изменять */
.block1 {
border: 2px solid;
padding: 20px;
}
.block2 {
padding: 20px;
margin: 18px;
}
input[type="text"] {
box-sizing: border-box;
width: 100%;
padding: 10px;
}

Darya_Zhukova · 15.Ноябрь.2015 03:16:26

.block1 {
border: 2px solid;
padding: 20px;
}

Тут писать padding: 20px; не имеет смысла, т.к. в стилях html к блоку задан padding: 0;
На результат, впрочем, не влияет.

toni_bm_ · 16.Ноябрь.2015 13:47:44

Сделал без border-box. Чет жесть так подбирать… Пробовал на бумаге высчитывать, но так правильно и не подготовил размеры в теории. Пришлось подгонять вживую. Из-за того что есть внутренний отступ в форме, увеличивалась ширина формы и она залезала на правый марджин родительской ячейки. Пришлось увеличивать правый марджин отдельно. Это было правильно?

` .block1 {
border: 2px solid white;
}

.block2 {
margin: 18px;
padding: 20px;
width: 165px;
padding-right: 35px;
}

input[type=“text”] {
height: 32px;
padding-left: 10px;
}`

Phoenix · 16.Март.2016 10:42:42

.block
{
padding: 20px;

.block1
{
height:114px;
border: 2px solid white;
/* padding-top:20px; <–не работает */
}

.block2
{
margin-left:18px;
margin-right:18px;

Почему-то не работает внутренний-верхний отсуп первого блока

Получилось только так:

.block
{
padding: 20px;

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

.block2
{
margin-left:18px;
margin-right:18px;
margin-top:18px; /отступ получился тут, т.е. передался блоку1 как больший/

input
{
height:32px !important;
width:425px !important;
padding-left: 10px;
}

juwain · 17.Март.2016 10:30:50

Потому что стили в style считаются приоритетнее (чтобы жизнь мёдом не казалась ).
<div class="block block1" style="padding: 0;">.

oxojeck · 27.Март.2016 10:14:35

Как то ребят у Вас все сложно, у меня так получилось:smile:

/* Cтили, которые можно изменять */
.block1 {
    padding: 18px !important;
    border: 2px solid white;
}

.block2 {
    padding: 20px;    
}

input[type="text"] {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding-left: 10px;
}

Unique · 30.Май.2016 10:41:10

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

}

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

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

Alexeyka · 04.Июнь.2016 20:49:02

Как на меня самое то)

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-left:10px;
}

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

/* Cтили, которые можно изменять */
.block1{
border:2px solid white;
}
.block2{
padding:20px;
margin:18px;
}

Zaskin · 08.Июнь.2016 08:58:52

Мой вариант на 100%

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-left: 10px;
}

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

.block1 {
border: 2px solid white;
}

.block2 {
height: 40px;
padding: 20px 20px 18px;
margin: 18px;
}

didiscorphy · 21.Июнь.2016 15:22:49

Короткий и аккуратный 100% вариант
Пожалуйста

.block2 {
margin: 18px;
}
.block1 {
border: 2px solid white;
}
.block {
padding: 20px;
}
input[type=“text”] {
box-sizing: border-box;
width: 100%;
padding: 10px;
}

Splinki · 22.Июнь.2016 13:16:01

А у меня так получилось.)

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-left: 10px;
margin: 20px;
}

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

.block2 {
height: 78px;
margin: 18px;
padding-right: 40px;
}

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

Qwerton · 25.Июнь.2016 14:44:16

Моё решение
input[type=“text”] {
height: 38px;
font-size: 18px;
font-family: Arial, sans-serif;
border: 2px solid #cccccc;
border-radius: 5px;
padding: 10px;
box-sizing: border-box;
}
.block {
background: rgba(0, 255, 255, 0.2);
padding: 20px;
margin: 18px;
}
.block1 {
border: 2px solid white;
margin: 0 auto;
}

Vladislav_Koposov · 19.Июль.2016 09:13:07

Я сделал через !important - всё получилось, но я даже и не думал задавать padding, так как в коде он стоит style="padding: 0;"
Не могу понять, почему в block-ах он всё таки срабатывает ???

Vladislav_Koposov · 19.Июль.2016 09:20:10

Кажется, я догадался сам…потому что style применен к элементу div, а не к классам внутри него…

Хотя, не уверен, верна ли моя догадка…

Albatros · 18.Август.2016 21:05:55

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

Maksim_Zajczev · 23.Август.2016 15:28:58

Поспешил, и внес дописал пару строк в исходные стили. Прошел на 91%, подскажите, на сколько критично? Имеет ли право на жизнь такой вариант?)

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

}

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

}
.block1 {
** border: solid 2px;**
** margin: 0px 0px 0px 0px;**

}

Nikita_Yadiver · 28.Август.2016 17:29:16

Добрый день. Решение задачи простое.
НО! Если убрать “border: 2px solid white;” То верхние и нижние отступы рушатся! Подскажите пожалуйста, почему верхний и нижний отступы не работают если не задана граница для блока1?

.block1 {
border: 2px solid white; /* Уберите это значение и верх. и нижн. отступы пропадут, и не только на толщину границы, а вообще !*/
}
.block2 {
margin: 18px;
padding:20px;
}
input {
padding-left:10px;
box-sizing: border-box;
}

juwain · 29.Август.2016 10:25:27

Ответ в этом задании https://htmlacademy.ru/courses/44/run/10.