20/20. Это у меня браузер волшебный или мой косяк?

Курсы §11. Позиционирование
1 
/* горизонтальные элементы */

.h {
position: relative;
width: 50px;
height: 10px;
}
.h1 {
top: 150px;
left: 20px;
}
.h2 {
top: 130px;
left: 26px;
}
.h3 {
top: 170px;
left: 92px;
width: 40px;
}

/* вертикальные элементы /
.v {
position: relative;
top: 170px;
width: 10px;
height: 50px;
}
.v1 {
left: -132px
}
.v2 {
left: -106px;
}
.v3 {
left: -79px;
}
.v4 {
left: -53px;
}
.v5 {
left: -27px;
}
.v6 {
left: -20px;
}
/ уголки */
.corner-top {
position: absolute;
top: 170px;
right: 80px;
border: 15px solid white;
border-top-width: 20px;
border-bottom-width: 0;
border-top-color: transparent;
background: none;
}

.corner-bottom {
position: absolute;
top: 190px;
right: 80px;
border: 15px solid transparent;
border-top-width: 20px;
border-bottom-width: 0;
border-top-color: white;
background: none;
}

/* лого */
.logo {
position: absolute;
top: 80px;
left: 87px;
width: 64px;
height: 64px;
background: url(’/assets/course10/logo.png’);
}

Безымянный.png616×737 22.6 KB

2

Попробуйте переделать всё на абсолютное позиционирование.

3

но ведь вся суть данного упражнения в том, что абсолюты нужны ток для лого и уголков, разве нет?

4

Почему так решили? Уголки - это тоже часть букв. Вот и получается, что одни части букв у вас относительным, другие - абсолютом. А в целом коряво и с отрицательными координатами.

5

То, что коряво - я вижу. Но почему на 100% пройдено задание? Собственно, если делать визуально тоже самое, выдает ошибку, хотя по пикселям соответствует точь в точь. Чем плохи отрицательные координаты?

6

По вашему скрину 98%.

7

я сейчас доделал, уже 100%, но стало еще чуть кривей. И мне непонятно почему так?

8

Покажите код.

9

Все тот же, что и здесь, просто в .v6 поставил -21 (или -19), сейчас точно не скажу, так как делаю другим способом, но факт остается фактом, мне выдало 100% с такими вот кривыми коордами

10

Проверяется только визуальное соответствие. Проверка не смотрит ваш код.

11

Так ведь визуально то и идет отличие ужасное, разве нет?
П.С.: Вы же сами видите, что идет явное отличие.

12

сейчас вот так сделал, все равно не понимаю, почему с отрицательными коордами такая фигня получались. И сможете пояснить все-таки, чем хуже вариант с отрицательными коордами?
.scene {
position: relative;
width: 260px;
height: 260px;
background: none;
box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.5);
}

div {
display: inline-block;
background: white;
}

/* горизонтальные элементы */
.h {
position: absolute;
width: 50px;
height: 10px;
}
.h1 {
top: 190px;
left: 20px;
}
.h2 {
top: 170px;
left: 80px;
}
.h3 {
top: 210px;
right: 20px;
width: 40px;
}

/* вертикальные элементы /
.v {
position: absolute;
top: 170px;
width: 10px;
height: 50px;
}
.v1 {
left: 20px;
}
.v2 {
left: 60px;
}
.v3 {
left: 100px;
}
.v4 {
right: 110px;
}
.v5 {
right: 70px;
}
.v6 {
right: 50px;
}
/ уголки */
.corner-top {
position: absolute;
top: 170px;
right: 80px;
border: 15px solid white;
border-top-width: 20px;
border-bottom-width: 0;
border-top-color: transparent;
background: none;
}

.corner-bottom {
position: absolute;
top: 190px;
right: 80px;
border: 15px solid transparent;
border-top-width: 20px;
border-bottom-width: 0;
border-top-color: white;
background: none;
}

/* лого */
.logo {
position: absolute;
top: 80px;
left: 87px;
width: 64px;
height: 64px;
background: url(’/assets/course10/logo.png’);
}

13

Из того, что я знаю наверняка: для проверки с картинкой образца берется картинка отображения не из вашего мини-браузера. Ваш код отправляется на сервер, там есть свой мини-браузер. Так вот картинка из того браузера сравнивается с образцом. Посмотреть, как выглядит ваш код для системы проверки, вы можете на вкладке “Результат”.

14

Меня тоже интересует этот вопрос, могли бы пояснить?

15

Я вот тоже не понимаю, чем плохи отрицательные координаты, если в обучении они активно использовались. И не понимаю что плохого в том, что автор работы сначала сделал на relative. Ведь в задании ясно сказано: “Используйте тот тип позиционирования и те приёмы позиционирования, которые вам больше понравились.” …

1 лайк