Уважаемая 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 лайк
хаха.Да, точно они)