18/18 99% не понимаю где ошибка

Курсы §14. Мастерская: декоративные элементы
1

2019-04-19_10-30-51
запятая сдвинута!)) что не так сделал не пойму - подскажите пжл.

html,
body {
margin: 0;
padding: 0;
}

body {
width: 280px;
min-height: 250px;
padding-top: 50px;
padding-right: 10px;
padding-left: 10px;

font-size: 12px;
line-height: 1.2;
font-family: “Arial”, sans-serif;
color: #7f8c8d;

background-color: #ecf0f1;
}

.post-stats .icon {
width: 15px;
height: 15px;
}

.post {
position: relative;
margin-left: 75px;}

.post-date, .post-type {
position: absolute;
width: 55px;
left: -60px;
height: 55px;
border-bottom: 5px solid #bdc3c7;
margin-left: -15px;
}

.post-date {
background: #ffffff;
font-weight: bold;
text-align: center;
line-height: 55px;
font-size: 15px;
top: 0px;
}

.post-type {
background: url(quotes.png) no-repeat center #7f8c8d;
top: 70px;
}

.post-title, .post-stats, a {
color: #2980b9;
text-decoration: none;
}

.post-title {
font-size: 20px;
padding: 0 0 5px 0;
}

.post-stats {
position: relative;
display: inline-block;
margin: 5px 0 0 0;
padding: 0 10px 0 20px;
}

.post-stats .icon {
left: 0;
position: absolute;
background: url(post-challenge.png) no-repeat;

}

.post-stats .icon-comments {
background-position: -20px 0;
}

.post-text {
background: #ffffff;
width: 165px;
padding: 10px 15px 10px 15px;
border-bottom: 5px solid #bdc3c7;}

2

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

у вас

image

задумывалось

image

т.е. не критично, можете пропустить, а можете поставить padding и немного переделать (всякие отрицательные left и отступы не есть гут и пр.).

3

Хм… однако и так не вышло. margin на padding поменял, отрицательные left убрал - проблема осталась…

html,
body {
margin: 0;
padding: 0;
}

body {
width: 280px;
min-height: 250px;
padding-top: 50px;
padding-right: 10px;
padding-left: 10px;

font-size: 12px;
line-height: 1.2;
font-family: “Arial”, sans-serif;
color: #7f8c8d;

background-color: #ecf0f1;
}

.post-stats .icon {
width: 15px;
height: 15px;
}

.post {
position: relative;
padding-left: 75px;
}

.post-date, .post-type {
position: absolute;
width: 55px;
left: 0px;
height: 55px;
border-bottom: 5px solid #bdc3c7;
}

.post-date {
background: #ffffff;
font-weight: bold;
text-align: center;
line-height: 55px;
font-size: 15px;
top: 0px;
}

.post-type {
background: url(quotes.png) no-repeat center #7f8c8d;
top: 70px;
}

.post-title, .post-stats, a {
color: #2980b9;
text-decoration: none;
}

.post-title {
font-size: 20px;
padding: 0 0 5px 0;
}

.post-stats {
position: relative;
display: inline-block;
margin: 5px 0 0 0;
padding: 0 10px 0 20px;
}

.post-stats .icon {
position: absolute;
left: 0;
background: url(post-challenge.png) no-repeat;

}

.post-stats .icon-comments {
background-position: -20px 0;
}

.post-text {
background: #ffffff;
width: 165px;
padding: 10px 15px 10px 15px;
border-bottom: 5px solid #bdc3c7;
}

4

хех, нашел

.post-stats уберите из составного правила .post-title, .post-stats, a

запятую не в тот цвет окрасили =) вы меня запутали, она не сдвинута, а окрашена =)

5

ха, шайтан css!))))))) спасибо!