Наложение в задании 98-99% - почему не засчитывает?

Уважаемая HTMLAcademy, скажите пожалуйста, выполнение задания - это угадать код - который вы задумали или 100% совпадения в наложении достаточно? Возможно просто что-то изменилось, раньше была возможность закончить курс от 95% и выше…а здесь у меня задание вроде выполнено, но завершить курс не дает. Вот скриншот.

Спасибо.

Мне кажется это не 98-99% )
Теплее - это даже не 90%, а задание считается засчитанным от 90 и выше, 100 - это уже перфекционизм=)

Чтобы пройти испытание, наш код, конечно же, угадывать не нужно. Но нужно достить уровня совпадения двух изображений 90% и выше. В этом случае полоска снизу станет зелёным.
На вашем скриншоте хорошо видно, что есть небольшое смещение текста, буквально на 1 пиксель. К сожалению, сравниватель изображений очень чувствителен к таким сдвигам и на вкладке “Различия” вы увидите много красного.
Попробуйте изменить вёрстку двигаясь сверху вниз, делая так, чтобы элементы на картинках совпадали по расположению.

День добрый.
Выполнил задание на 93%, но не смог добиться выравнивания по вертикали пиктограммок и “интенсив, программа 5”. Вроде загнал из в строку инлайн-блоком и даже на команды выравнивания по вертикали они реагируют, но по середине не выравниваются. Подскажите, где я ошибся пжл. Ну и если заметите признаки “гомнокода” - буду рад, если ткнете носом (сам имею о нем смутное представление, но уже хочется не иметь ничего с ним общего).
Заранее спасибо.

Мастерская: декоративные элементы / Испытание: анонс поста [18/18]
html не менял

html, body{
    margin:0;
    padding:0;
}
body{
    width:280px;
    min-height:250px;
    padding-top:50px;
    padding-left:10px;
    padding-right:10px;
    font-size:12px;
    font-family:"Arial", sans-serif;
    line-height:1.2;
    color:#7f8c8d;
    background:#ecf0f1;
}
.post-author{
    padding:5px 0 0 0;    
}
.post{
    position:relative;
    outline:1px white solid;
    padding-left:75px;
}
.post-title{
    color:#2980b9;
    font-size:20px;
}
.post a{
    text-decoration:none;
    color:#2980b9;
}
.post-type, .post-date{
    position:absolute;
    width:55px;
    height:55px;
}
.post-date{
    top:0;
    left:0;
    line-height:55px;
    background:#ffffff;
    text-align:center;
    vertical-align:middle;
    border-bottom:5px solid #bdc3c7;
    font-weight:bold;
    color:#7f8c8d;
    font-size:15px;
}
.post-type{
    top:70px;
    left:0;
    background-color:#7f8c8d;
    background-image:url("/assets/course14/quotes.png");
    background-repeat:no-repeat;
    background-position:50% 50%;
    border-bottom:5px solid #bdc3c7;    
}
.post-stats .icon{
    width:15px;
    height:15px;
    background-image:url("/assets/course14/post-challenge.png");
    background-repeat:no-repeat;
    margin-top:5px;
}
.post-stats, .icon{
    display:inline-block;
    vertical-align:middle;
    margin:0 5px 10px 0;
}
.icon-comments{
    background-position:-20px 0;
}
.post-text{
    background:#ffffff;
    padding:10px 15px;
    border-bottom:5px solid #bdc3c7;
}
/*
Все размеры, отступы, координаты, размеры шрифтов (не заданные в body) кратны 5 или 10.
Ардеса картинок:
/assets/course14/quotes.png
/assets/course14/post-challenge.png
Картинка "кавычки" выровнена по центру
*/

Рамка вокруг .post не нужна. Попробуйте выровнять иконки вертикально по верху, а также убрать у них верхние отступы. А у блока .post-author добавьте нижний отступ.

В оригинальном решении иконки вроде иконки сделаны сделаны через absolute. Так, наверное, проще. Я ради интереса разобрался в вашем решении и довёл его до 100%, немного изменив, в том числе изменив позиционирование иконок на absolute. Если интересно, чуть позже выложу это решение с комментариями.


Вот, как вариант: http://www.cssdesk.com/NGtWu Наверняка это задание можно выполнить и без absolute, но я обычно решал как-то так, и это проще. p.s.: я тоже мог где-нибудь накосячить =) но результат принимается.

Конечно интересно. Жду вашего решения, буду с ним разбираться )

Добавил решение, вот ссылка. Это всего-лишь один из вариантов, наверняка можно исправить и иначе. Я иконки выкинул из потока абсолютом, а уже после подровнял все элементы.
В соседних темах раздела, кстати, тоже есть интересные решения, их стоит глянуть.

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

Как сказал @juwain: [quote=""]
В оригинальном решении иконки просто спозиционированы абсолютно, чтобы не влиять на отступы. =)
[/quote]
То да, видимо, задумка была при кратности 5 - на абсолютах, к моему большому сожалению.

Однако чисто теоретически - мое решение должно было быть тоже верным. Но тут магические пробелы и кратность 5 не дает 100% сходства (

1 лайк

Что-то я не понял. Сейчас проверил этот код в испытании, вроде ведь сотку выдаёт. И везде всё кратно пяти.


Пардон, уточнение с опозданием. Засчитывает решение как сто процентов, но на вкладке различий всё-таки видны три красных точки. Наверно, имелось в виду это.

А если честно Я и сам не помню уже)) Помню что иконки маленькие перед ссылками хотел сделать не absolute =)

Ещё возможно, что просто проверку уже немного дополнили))
У меня, кстати, в другом испытании один раз так же было, что парочка красных линий, а результат всё-равно сто. Если не ошибаюсь, курс промежуточных испытаний, испытание со слайдером. Я там кружки в первые разы долго угадывал.

1 лайк

Все может быть) Может что-то уже и поправили

Вот пример точек. Фактически, неидеально совпадающей остаётся в решении только первая иконка, там несовпадение парочка пикселей, не более.

1 лайк

хаха.Да, точно они)