Или я тяжелый, или нет картинки “кавычки” и картинка “комментарии” не правильная! Проверьте пожалуйста!
В комментариях в CSS указаны ссылки.
Если я что делаю не правильно - тыкните пожалуйста!
чтобы картинка “кавычки” была, её нужно использовать в коде - например, в качестве бэкграунда. вы её куда-нибудь приписали (вашего код не видно)?
иконки объединены в спрайт (его адрес /assets/course14/post-challenge.png) - и вам нужно так подобрать положение фона, чтобы видна была именно нужная иконка. А то, что видно у вас - это “межиконье”, то бишь пространство между иконками в спрайте - подвигайте фон немного из стороны в сторону, чтобы “словить” нужную иконку
Разобрался, спасибо!
Я думал что в комментариях не спрайт а две картинки (теги, комментарии).
Вроде прошел, но только на 97. При наложении 1 в 1. Но в отличиях текст и дата красным горят. Подскажите кто знает что не так. Мне кажется больно громоздкий код получился, как проще сделать?`
Испытание: анонс постаИнтенсив: программа
13.09
Автор: HTML Academy
Работа над интенсивом идёт полным ходом. Мы нашли крутых людей в команду и решили еще кучу задач. Но сегодня я подробнее расскажу о работе над программой интенсива.
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 {
padding-left: 75px;
position: relative;
}
.post-stats .icon {
width: 15px;
height: 15px;
}
.post-title {
color: #2980b9;
font-size: 20px;
margin-bottom: 5px;
}
.post-author a {
text-decoration: none;
color: #2980b9;
}
.post-date {
font-size: 15px;
font-weight: bold;
position: absolute;
display: block;
width: 55px;
text-align: center;
padding-bottom: 18px;
left: 0px;
top: 19px;
border-bottom: 5px solid #bdc3c7;
}
.quotes {
position: absolute;
width: 55px;
height: 55px;
background: #7f8c8d url(/assets/course14/quotes.png) no-repeat 50% 50%;
left: 0;
top: 70px;
border-bottom: 5px solid #bdc3c7;
}
.post-stats {
padding-left: 20px;
display: inline-block;
margin-top: 5px;
}
.post-stats a {
text-decoration: none;
color: #2980b9;
}
.icon-tags {
position: absolute;
background: url(/assets/course14/post-challenge.png) no-repeat 0 0;
left: 75px;
}
.five {
padding-left: 10px;
}
.icon-comments {
background: url(/assets/course14/post-challenge.png) no-repeat -20px 0px;
position: absolute;
left: 227px;
}
.post-text {
width: 165px;
height: 108px;
margin-top: 10px;
padding: 0 15px 0px 15px;
border-bottom: 5px solid #bdc3c7;
}
/*
Все размеры, отступы, координаты, размеры шрифтов (не заданные в body) кратны 5 или 10.
Ардеса картинок:
/assets/course14/quotes.png
/assets/course14/post-challenge.png
Картинка “кавычки” выровнена по центру
*/
С текстом сделал проще, без задания абсолютных размеров:
.post-text {
border-bottom: 5px solid #bdc3c7;
margin: 10px 10px 0 0;
padding: 0 10px 10px 15px;
}
В наложении все 1в1 но в различиях все равно текст красный!
Что ж с ним(текстовым блоком) делать???
тему можно закрыть! у меня н мониторе стояла очень высокая контрастность и фон слился! А он как раз и отличался:joy:
В идеале html-код менять не надо. Зачем создали отдельный блок для кавычек, если уже есть .post-type?
С кавычками согласен, новый блок лишний!
А вот с цифрой 5 вообще не понял, как ей отступ задать в право. Можно ее отдельно выбрать в css? Какой при этом селектор использовать???
Вы об этом?
Отступ можно задать как внешний справа для .post-stats.
Класс five я добавил в html. Можно ли как-то сделать для “5” отступ в право без задания ссылке отдельного класса?
если хотите поработать именно с “5”, то можно вспомнить соседние селекторы и задать что-нибудь типа:
.icon-comments + a
но Ineska предложила более простой путь 