Параграф 11, задание 20. Баг.

Ширина body в верхнем и нижнем “окне браузера” в задании разная. В связи с этим при проверке на сервере в случаях, когда в стилях есть свойство right, идут проблемы со сверкой.
Вот мой код, который проходит как 100%, однако в верхнем “окне браузера” испытания отображается некорректно.

/*element position*/

.v1{
  position: absolute;
  top: 170px;
  left: 20px;
}

.v2{
  position: fixed;
  top: 190px;
  left: 80px;
}

.v3{
  position: relative;
  top: 76px;
  left: 100px;
}

.v4{
  position: relative;
  top: 76px;
  left: 126px; 
}

.v5{
  position: fixed;
  right: 190px;
  bottom: 60px;
}

.v6{
  position: absolute;
  right: 50px;
  bottom: 40px;
}

.h1{
  position: absolute;
  top: 170px;
  right: 130px;
}

.h2{
  position: fixed;
  top: 210px;
  right: 310px;
}

.h3{
  position: absolute;
  left: 200px;
  bottom: 40px;
}

.corner-top{
  position: absolute;
  top: 170px;
  right: 80px;
}

.corner-bottom{
  position: absolute;
  top: 190px;
  right: 80px;
}

.logo{
  margin-left: 59px;
  margin-top: 80px;
}

P.S.: Или это не баг, а фича?)
Надеюсь, помогу сделать курс ещё лучше.

1 лайк

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

1 лайк

хз что пациент имел ввиду =)

Я не принципиальный, я тренировался. Задачу ставил применить все варианты.

1 лайк

За базаром следи, поциент.
Заскриню попозже.

толку то от скрина, код скинь по-человечески, который 100% проходит, базарщик.

Ну гляди, поциент)

html {
  padding: 0;
}

body {
  margin: 0;
  padding: 20px;
}

.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-color: white;
}


/* горизонтальные элементы */
.h {
  width: 50px;
  height: 10px;
}

.h3 {
  width: 40px;
}

/* вертикальные элементы */
.v {
  width: 10px;
  height: 50px;
}

/* уголки */
.corner-top {
  background: none;
  border: 15px solid white;
  border-top-width: 20px;
  border-top-color: transparent;
  border-bottom-width: 0;
}

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

/* лого */
.logo {
  width: 64px;
  height: 64px;
  background-image: url("logo.png");
  background-repeat: no-repeat;
  background-color: transparent;
}

/*element position*/

.v1{
  position: absolute;
  top: 170px;
  left: 20px;
}

.v2{
  position: fixed;
  top: 190px;
  left: 80px;
}

.v3{
  position: relative;
  top: 76px;
  left: 100px;
}

.v4{
  position: relative;
  top: 76px;
  left: 126px; 
  /*за счёт пробела в html коде?*/
}

.v5{
  position: fixed;
  right: 190px;
  bottom: 60px;
}

.v6{
  position: absolute;
  right: 50px;
  bottom: 40px;
}

.h1{
  position: absolute;
  top: 170px;
  right: 130px;
}

.h2{
  position: fixed;
  top: 210px;
  right: 310px;
}

.h3{
  position: absolute;
  left: 200px;
  bottom: 40px;
}

.corner-top{
  position: absolute;
  top: 170px;
  right: 80px;
}

.corner-bottom{
  position: absolute;
  top: 190px;
  right: 80px;
}

.logo{
  margin-left: 59px;
  margin-top: 80px;
}

значит вы не поняли, что такое позиционирование, когда его применять и как меняется точка начала координат в зависимости от типа позиционирования. Задача была создать цельный элемент - логотип, который бы оставался цельным независимо от размеров экрана или перемещения родительского блока.

блин даже скинул гифку как правильно код вставлять, все равно не вставил ну да ладно

да, это ваш косяк, неправильно с позиционированием разобрались. нужно было родителю дать относительное, а дочкам всем дать абсолютное и по линейкам выстроить (как вариант).

так там в исходном коде (в условиях задачи) родителю и так стоит относительное

ну я понимаю, просто можно было написать

.scene * {
  position: absolute;
}

и вообще расслабиться с позиционированием

"В «Снежной королеве» Кай собирал из льдинок слово «Вечность». В этом испытании вам нужно собрать из 12 заготовок слово «HTML».

Используйте тот тип позиционирования и те приёмы позиционирования, которые вам больше понравились. Сетка на заднем фоне поможет вам правильно расчитать координаты. Напомним, что маленькая ячейка имеет размер 20 на 20 пикселей, а большая 100 на 100."

Ребят, ну серьёзно. Я не верблюд. Полагаю, первое предложение второго абзаца мы с вами одинаково понимаем. Я использовал только те приёмы, которые есть в этой главе.

Это - ваша интерпретация задания.

Задание некорректно отображается в верхнем браузере при правильном коде, если у вас тот же результат. У вас тот же результат?

Собственно, мне было важно понять, это только у меня некорректно отображается в верхнем окне, или это системная ошибка. Не написал этого в посте, моя ошибка.

Hierimo. Сейчас это исправлю. Первый раз в форум код пишу.

да, но при этом, вы должны понимать (если разобрались с темой), что для всех тех элементов, которые должны составлять один цельный объект, должен использовать один и тот же тип позиционирования:

  • или абсолютное (в том случае объект будет “намертво” спозиционирован относительно родителя (т.к. родителю уже задано относительное позиционирование) и всегда, при любых условиях, даже при добавлении .scene других дочерних элементов, расстояние от букв до рамки будет таким, как вы указали),
  • или относительное (элементы будут смещены относительно своего изначального положения, при перемещении родителя будут перемещаться вместе с ним, но если у родителя .scene добавиться ещё какой-нибудь не пустой дочерний элемент, то вcя надпись HTMLможет сместиться или вообще развалиться (если этот новый дочерний элемент появится между уже существующими)
  • или фиксированное - но в этом случае привязка будет идти к размеру вьюпорта и надпись HTML будет существовать отдельно от родителя (т.е. буквы отдельно, а рамка - отдельно)

да никто не самоутверждается, вы как то критику воспринимаете резко, с таким подходом далеко не уйдете. тут можно ошибаться, ничего страшного в этом нет, вам указывают где именно вы ошиблись. вам же не говорят - “все говно, в красную армию и на переделку!”. вам сказали, что конкретно надо подтянуть.

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

вот хвалю вас: вы хотя бы пишите комментарии к коду (я лично забываю это делать).

Tala вам отлично написала чем один вид отличается от другого.

А то что проверка проходит 100% ну и фиг с ним, ну да, тут можно извернуться чтобы было 100%. особенно в курсе по JS. можно написать абсолютно неправильный код, соответствующий 100% прохождению тестов.

это корректное отображение при фиксированном позиционировании - вы указали right:190px; вот вам браузер это смещение и показывает. А когда ваш код уходит на сервер, то там про ваш вьюпорт ничего не знают, и расчет идет относительно своей (“академической”) ширины вьюпорта - и у них, на сервере, с их размерами, ваш “уехавший” блок оказался на нужном месте - и проверка выдала 100%.

1 лайк

Вероятно, я где-то проглядел это дело в теории, но, если так, в каком задании главы/курса это прямо написано?

Да и не важно это совсем. Ведь, полагаю, если переписать код на фиксированном позиционировании и спозиционироваться относительно правой стороны, результат будет тот же, поехавшие элементы в верхнем браузере при 100% при проверке на сервере. Если проблема в размере холста, конечно.

Я понимаю, что лучше так. И если бы ставил себе задачу просто решить конкретное испытание - сделал бы всё именно на absolute с дополнительными тегами привязки к двум нижним углам.

Мне это казалось… Хм. Нелогичным что ли. Что это может вызвать проблемы у людей, которые будут использовать fixed с right & bottom. Для меня очевидно, что в боевых задачах надо использовать один тип позиционирования, причём тут - absolute будет самым простым. Но если бы я захотел привязаться к правому нижнему углу браузера… Короче проверять нужно с теми же параметрами, с которыми даётся задание. Пожалуй, это скорее мои личные принципы и я забыл, что другие педагоги могут их не разделять или не ставить в приоритет.

По большому счёту да, согласен.

Спасибо вам за дискуссию, я выяснил, чем моя картина мира отличалась от… реальности.

И это главное (во всяком случае для меня).

Если вам объяснили, что 1 + 1 = 2, а 2 + 2 = 4, то вы ведь, наверное, сами догадаетесь, что 1 + 1 + 2 = 4 ? Представьте, что у нас есть конструкция: родительский блок-контейнер с относительным позиционирование и внутри его три дочерних: у двух абсолютное позиционирование (привязка к чему - правильно, к родителю, для одного зададим top: 10px, для другого - чтобы не наезжали друг на друга - top: 50px) а третьему блоку зададим top: 100px, но позиционирование фиксированное (тобишь эти 100px будут отсчитывать от верхнего края окна). А теперь представим, что нам нужно сместить родителя (и мы при этом предполагаем, что дочерние блоки сместятся вместе с ним) - и что происходит? Первый и второй дочерние блоки по прежнему находятся на расстоянии 10px и 50px от верхней границы родителя (они ведь к нему привязаны за счет абсолютного позиционирования), а значит друг относительно друга располагаются точно так же, как и до смещения родителя. А третий дочерний блок? Правильно, по прежнему на 100px верхней границы окна - т.е. он уже не в одной связке с остальными блоками. Если брать пример из задания то это приведет к тому, что буквы просто развалятся.

Не согласен с Вами от слова совсем.
Потому как изначально при запуске задания отличается поле от того, на котором тренируемся, и того, которое спрашивается.
Позиционированием и сокращением длины тела (width от body) проблема не решается.