Испытание: анонс поста

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

Мне не сложно ответить, разобраться. Ни как нет. Но хотелось бы, чтобы люди понимали всю суть форума, что база ответов собирается постепенно, и их нужно перечитывать. Какой смысл дублировать темы? если можно в созданную ранее - написать и там ответят. Уж если совсем Лень разбираться в ответах ваших.
Каждый случай индивидуален, может Вы точку с запятой пропустили, для этого целую тему создавать? :disappointed:

Короче, первое, что мне бросилось в глаза:
Пусть вы и прописали для .post position:relative Но не стоит все позиционировать абсолютом.
Т.е. Вы можете весь контент (.post-date и ,post-type) сдвинуть аболютом, и то. только по высоте.
А все остальное не стоит позиционировать относительно родителя.
решение:

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

Следовательно у всех убрать свойства: position:absolute, left:75px и top:?px

для .post-type и .post-date рациональней заюзать position:absolute
И вот более правильный код:

.post-date, .post-type {
    position:absolute;
    left:0;
    width:55px;
    height:55px;
    line-height:55px;
    display:block;
    background:#fff;
    text-align:center;
    border-bottom: 5px solid #bdc3c7; 
}
.post-date {font-size:15px;font-weight:bold;top:0;}
.post-type {
    top:70px;
    background: #7f8c8d url(/assets/course14/quotes.png) 50% 50% no-repeat;
}

К .post-title и .post-author добавь margin-bottom:5px
Так же у .post-author не зачем было переопределять цвет текста, он задан у body и спокойно наследуется, причем правильно, убери еще text-decoration:none, его достаточно только у ссылки.

Запись:

.icon-tags + a {
        text-decoration:none;
        color:#2980b9;
    }

Рациональней заменить на:

a {
    text-decoration:none;
    color:#2980b9;
}

И тогда не придется больше ни где задавать цвет у ссылки и убирать подчеркивание.

Зачем вообще вы использовали такой сложный селектор здесь? .post-stats a:nth-child(3)
Можно куда проще всё сделать:

.post-stats {display:inline;} /* В одну строку умещаем наши теги*/
.post-stats .icon{ /*общие стили для иконок у тегов */
    width:15px;
    height:15px;
    padding-left:20px;
    display:inline;
    background: url(/assets/course14/post-challenge.png) 0 0 no-repeat;
}
.post-stats .icon-comments { /* сдвигаем вторую иконку (p.s. можно реализовать более правильно, но так будет понятней) */
    background-position: -20px 0;
    margin-left: 10px;
    background-repeat: no-repeat;
}

Остался текст. Данный код слишком громоздкий:

.post-text{
    width:165px;
    height:auto;
    background-color:#ffffff;
    padding-left:15px;
    padding-right:20px;
    padding-bottom:15px;
    padding-top:15px;
    border-bottom:solid 5px #bdc3c7;
}

Можно все упростить:

post-text {
    height:auto; /*upd* так-то и это свойство лишнее =) */
    background-color:#ffffff;
    padding:10px 15px; 
    border-bottom:solid 5px #bdc3c7;
}

Я убрал width:165px потому что у body уже задана ширина, поэтому рациональней было бы не высчитывать ее для текста, а задать лишь отступы. И padding удобней записывать в таком виде:
padding: “сверху” “справа” “снизу” “слева”;
Если записаны только первые два, то “снизу” и “слева” будут аналогичны.

Вроде всё.

1 лайк