Первое испытание [8/23] 100% (Оцените код пожалуйста)

Damir_27 · 14.Январь.2018 15:54:33

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

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: 31px;
padding: 0 0 5px;
}

.block2 {
width: 56px;
height: 36px;
padding: 10px 40px;
margin: 20px 120px;
}

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

Alex_Fduch · 17.Январь.2018 16:52:37

Хм… мой код отличается от Вашего. Ваш и мой результат на 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;
    margin-bottom: 20px;
}

.block2 {
    width: 96px;    
    padding-left: 40px;
    padding-top: 10px;
    padding-bottom: 25px;
    margin-left: 120px;    
}

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

Alex_Fduch · 17.Январь.2018 17:04:01

Я понял нашу ошибка, это использование height его не должно быть в коде. Переписал без него и многие не кратные 5ти значения ушли и результат по прежнему 100%.

Marina_D · 26.Январь.2018 08:28:46

Почему не должно быть height? а как вы высоту задавали? через padding?

код на 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;
margin-bottom: 20px;
}

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

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

sargafan · 26.Январь.2018 11:53:35

Мой вариант:

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;
margin-bottom: 20px;
}
.block2 {
width:96px;
padding:10px 0px 25px 40px;
margin-left:120px;
margin-bottom: 20px;
}
.block3 {
width:171px;
border: solid white 12px;
padding: 5px 0px 10px 5px;
margin-left: 20px;

Lure_Mode · 27.Январь.2018 04:35:02

Сначала сделала на 97%.
Блоки идеально стояли, а вот надписи - нет.
У кого было так же - padding в помощь.
Сейчас 100%

.block1 {

width: 196px;

height: 36px;

}

.block2 {

width: 96px;

padding: 10px 0px 0px 40px;

height: 46px;

margin: 20px 120px

}

.block3 {

width: 171px;

height: 31px;

padding: 5px 0 0 5px;

border: solid 12px;

margin: 20px

martlet · 02.Февраль.2018 02:46:28

Мой вариант такой. Тоже намучилась с попиксельным подбором значений для 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 {
width: 56px;
height: 36px;
margin: 20px 0px 0px 120px;
padding: 10px 40px;
}

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

Daria_C · 20.Февраль.2018 17:27:15

Вот мой вариант, 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-left: 120px;
margin-top: 20px;
padding: 10px 40px;
width: 56px;
height: 36px;
}

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

Gantz · 28.Март.2018 10:21:56

Привет, друзья!
Своим тоже поделюсь. 100%
Хотелось бы узнать от школьных гуру CSS, какие приёмы лучше использовать, чтобы код был легче и чище? Является ли в современной вёрстке “не модным” использовать отдельно padding/margin-left(right, top, bottom) или это не имеет существенного значения?

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

.block3 {
width: 170px;
height: 30px;
margin: 20px;
border: 12px solid white;
padding: 1px;
padding-top: 5px;
padding-left: 5px;
}

Valery_S · 28.Март.2018 10:34:25

Мне кажется логичнее:

.block2 {
    width: 56px;
    height: 36px;
    margin: 20px 120px;
    padding: 10px 40px;
}

Т.е. внутри блока всё выравнивается равномерно…

Gantz · 28.Март.2018 11:30:19

То есть вместо паддинг-топ и паддинг-лефт просто прописать эти значения в одной строчке

Valery_S · 28.Март.2018 12:00:15

На Ваше усмотрение. Это же Ваш код.
В данном случае я для себя решил так, - в другом случае, возможно будет другое решение…

tixass · 18.Июль.2018 08:00:13

У меня вчера был глюк (как оказалось) в этом задании. Голову ломал полдня. Результат сравнил на 76 процентов из-за размеров фона в body. Т.к. в моем решении фоновая картинка занимала все свободное пространство окна, а в образце она на треть Уже. В итоге на следующий день когда перезашел в задачу все было норм… Работал в FireFox

Vagabund · 23.Июль.2018 10:54:05

Такой вопрос назрел. Единственный вариант пройти это испытание на 100% это сидеть и подбирать попиксельно значения в отступах? Или есть правильное решение этой задачи?

konsole · 10.Сентябрь.2018 19:58:45

Походу просто подюирать
У меня так на 100% получилось:

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

.block2 {
margin: 0 0 20px 120px;
width: 56px;
padding: 10px 40px 24px 40px;
height: 22px;
}

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

Novichek · 29.Сентябрь.2018 15:40:04

Точно, height только сбивает с толку при работе с внутр. отступами

.block1, .block3 {
width: 196px;
}

.block1 {
padding-bottom: 15px;
}

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

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

Hierumo · 18.Октябрь.2018 12:38:29

ну я делал так: определил цену деления сетки - один квадратик, это 20х20px
далее у нас фигура (Блок1) из 10х2 квадратиков, т.е. 200х40px. Внешних и внутренних отступов тут нет, так что просто вычтем отсюда ширину рамки, т.е. 2px*2(раза, т.к. фигура прямоугольник, граница повторяется дважды), т.е. сам прямоугольник без рамки будет 200-4=196px на 40-4=36px. А рамка у нас общему правилу .block подчиняется.
Во втором блоке появляется первый margin, где мы видим что отступ составляет 6 квадратиков, т.е. 6х20=120px, т.е. margin-left: 120px; также есть padding-left: 2квадратика, т.е. 40px; также считаем отступы сверху + повторяем упражнение из Блок1 по выявлению ширины и высоты содержимого (+ не забываем об отступах что только что добавились). Имхо используем по одному свойству padding и margin, используя сокращенную запись margin: 20px 0 0 120px, для удобоваримости кода.
В третьем блоке усугубляется ситуация увеличенной границей до 12px (ну тут уже на глаз, сорри). И опять же применяем логику из предыдущих блоков.
Математика, да и только.

MustHave · 26.Ноябрь.2018 19:16:30

К вопросу о математике, может, я чего не понимаю, но у меня при заявленной в задании высоте 200px всех блоков, при 100% выполнении получается 186px. Или я что-то не посчитал?
.block1 {
width: 196px;
height: 36px;
margin-bottom: 20px;
}

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

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

З.Ы.
Я так не понял с какой целью задавать везде ширину и высоту блоков, если это можно paddingами сделать для сокращения кода, кроме первого блока?

Ineska · 26.Ноябрь.2018 19:21:55

padding - это не контент, да вы заполняете пространство, но блок же не обязательно будет оставаться пустым.

Hierumo · 27.Ноябрь.2018 09:33:05

при 100% выполнении получается 186px. Или я что-то не посчитал?

Код в студию, походу вы ненужные паддинги внутрь засовываете

Я так не понял с какой целью задавать везде ширину и высоту блоков, если это можно paddingами сделать для сокращения кода, кроме первого блока?

А у нас контейнеры не пустые же, в них есть подписи к блокам в виде текста, мы им задаем базовую стилизацию, представьте что текста будет чуть больше, 2 предложения, которые должны уместиться в этом блоке жестко.
В конце концов подумайте о практическом применении задания, а не лишь бы картинка совместилась с образцом на 100%. Можете тогда вообще подменой пакетов заняться, задание тоже на 100% будет выполнено - изучите ли вы при этом css? - вряд ли.