Анонс поста [18/18] - 100% (с комментариями)

milchek · 19.Апрель.2017 17:11:09

CSS

html,
body {
    margin: 0;
    padding: 0;
    background-color: #fff; /*чтоб поле как на образце*/
}

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 {
    position: relative; /*относительно браузера*/
    display: block; /*блоком*/
    top: 0; /*сдвигаем всё ровно*/
    left: 75px; /*слева*/
    max-width: 210px; /*вспоможение можно убрать*/
}

a {
    text-decoration: none; /*убираем подчёркавание*/
    color: #2980b9; /*красим цветом*/
}

/*выставляем бордюры снизу*/
.post-date,
.post-type,
.post-text {
    display: block; /*блокам*/
    border-bottom: 5px solid #bdc3c7; /*задаём бордюр снизу*/
    max-width: 165px; /*ограничиваем ширину*/
}

.post-title {
    color: #2980b9; /*красим заголовок*/
    font-size: 20px; /*размер шрифта*/
    margin-bottom: 5px; /*внешний отступ снизу*/
}

/*правые квадратики*/
.post-date,
.post-type {
    position: absolute; /*отрываем в абсолют*/
    top: 0; /*двигаем ровно...*/
    left: -75px; /*налево*/
    width: 55px; /*ширина*/
    height: 55px; /*высота*/
    font-size: 15px; /*шрифт*/
    font-weight: bold; /*жирный*/
    text-align: center; /*по центру*/
    line-height: 55px; /*высота строки на высоту*/
    background: #fff; /*фон*/
    color: #7f8c8d; /*цвет букв*/
}

/*нижний квадрат*/
.post-type {
    background: #7f8c8d url("/assets/course14/quotes.png") 50% 50% no-repeat; /*перекрашиваем и ставим картинку на фон*/
    top: 70px; /*спускаем вниз*/
}

.post-author {
    margin-bottom: 5px; /*внешний нижний отступ от автора*/
}

/*всю статистику*/
.post-stats {
    position: relative; /*относительно этого будем картинки ровнять*/
    display: inline-block; /*блоки в строку*/
    margin-left: 20px; /*отступаем слева*/
    padding-right: 10px; /*двигаем справа пятёрку*/
}

.post-stats .icon {
    position: absolute; /*отрываем в абсолют относительно статистики*/
    top: 0px; /*двигаем ровно...*/
    left: -20px; /*слева направо*/
    background: url("/assets/course14/post-challenge.png") no-repeat; /*прицепляем спрайт картинок*/
    width: 15px; /*это было в задании*/
    height: 15px; /*это тоже*/    
}

.post-stats .icon-comments {
    background-position: -20px 0; /*двигаем спрайт на нужную позицию для комментов*/
}

.post-text {
    background: #fff; /*красим вон под текстом*/
    padding: 10px 15px; /*внутри отступы*/
}

/*
Цвета
#ffffff - белый
#7f8c8d - тёмно серый
#2980b9 - синий
#bdc3c7 - серый

Все размеры, отступы, координаты, размеры шрифтов (не заданные в body) кратны 5 или 10.
Адреса картинок:
/assets/course14/quotes.png
/assets/course14/post-challenge.png
Картинка «кавычки» выровнена по центру
*/

Ineska · 19.Апрель.2017 18:25:35

Комментарии - это хорошо. Но есть замечания по вашему коду.

Зачем задавать это свойство div-ам? Разве они не блочные элементы?

Попробуйте обойтись без отрицательных отступов и координат.

milchek · 20.Апрель.2017 19:32:42

Спасибо, с блоком бал маху…

По отступам. Мне так было удобнее. Можно, конечно, и без них.

Ineska · 20.Апрель.2017 19:35:14

Покажите, как будет без отрицательных.

milchek · 20.Апрель.2017 20:12:12

теперь 94%

html,
body {
    margin: 0;
    padding: 0;
    background-color: #fff; /*чтоб поле как на образце*/
}

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 {
    /*position: relative; /*относительно браузера*/
    /* ошибка - display: block; */
    /*top: 0; сдвигаем всё ровно*/
    /*left: 75px; слева*/
    max-width: 210px; /*вспоможение можно убрать*/
    margin-left: 75px; /*вместо позиционирования*/
}

a {
    text-decoration: none; /*убираем подчёркавание*/
    color: #2980b9; /*красим цветом*/
}

/*выставляем бордюры снизу*/
.post-date,
.post-type,
.post-text {
    display: block; /*блокам*/
    border-bottom: 5px solid #bdc3c7; /*задаём бордюр снизу*/
    max-width: 165px; /*ограничиваем ширину*/
}

.post-title {
    color: #2980b9; /*красим заголовок*/
    font-size: 20px; /*размер шрифта*/
    margin-bottom: 5px; /*внешний отступ снизу*/
}

/*правые квадратики*/
.post-date,
.post-type {
    position: absolute; /*отрываем в абсолют*/
    top: 50px; /*сверху*/
    left: 10px; /*паправо*/
    width: 55px; /*ширина*/
    height: 55px; /*высота*/
    font-size: 15px; /*шрифт*/
    font-weight: bold; /*жирный*/
    text-align: center; /*по центру*/
    line-height: 55px; /*высота строки на высоту*/
    background: #fff; /*фон*/
    color: #7f8c8d; /*цвет букв*/
}

/*нижний квадрат*/
.post-type {
    background: #7f8c8d url("/assets/course14/quotes.png") 50% 50% no-repeat; /*перекрашиваем и ставим картинку на фон*/
    top: 120px; /*спускаем вниз*/
}

.post-author {
    margin-bottom: 5px; внешний нижний отступ от автора*/
}

/*всю статистику*/
.post-stats {
    /*position: relative; /*относительно этого будем картинки ровнять*/
    display: inline-block; /*блоки в строку*/
    /*margin-left: 20px; отступаем слева*/
    /*padding-right: 10px; /*двигаем справа пятёрку*/
    vertical-align: top;
    margin-right: 10px;
}

.post-stats .icon {
    display: inline-block;
    vertical-align: top;
    
    /*position: absolute; /*отрываем в абсолют относительно статистики*/
    
    /*top: 0px; двигаем ровно...*/
    /*left: -20px; слева направо*/
    background: url("/assets/course14/post-challenge.png") no-repeat; /*прицепляем спрайт картинок*/
    width: 15px; /*это было в задании*/
    height: 15px; /*это тоже*/    
}

.post-stats .icon-comments {
    background-position: -20px 0; /*двигаем спрайт на нужную позицию для комментов*/
    /*margin-left: 5px;*/
}

.post-text {
    background: #fff; /*красим вон под текстом*/
    padding: 10px 15px; /*внутри отступы*/
}

/*
Цвета
#ffffff - белый
#7f8c8d - тёмно серый
#2980b9 - синий
#bdc3c7 - серый

Все размеры, отступы, координаты, размеры шрифтов (не заданные в body) кратны 5 или 10.
Адреса картинок:
/assets/course14/quotes.png
/assets/course14/post-challenge.png
Картинка «кавычки» выровнена по центру
*/

Ineska · 21.Апрель.2017 05:47:46

Да… Наверное, было бы лучше ничего не менять. А то получается, что сбила с правильного пути. Почитайте другие коды по этому заданию. Там исправлять было всего несколько строк. А вы треть кода перекроили.

Murad · 04.Май.2017 14:13:54

Сделал по своему. но как поднять .icon-comments не могу додуматься. Помогите советом

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 {
width: 250px;
padding:0;
margin:0;
position: relative;
padding-left: 75px;
}
.post-title {
font-size: 20px;
color:#2980b9;
}

.post-date,
.post-type {
position:absolute;
width: 55px;
height: 55px;
border-bottom: 5px solid #bdc3c7;
}
.post-date {
left:0;
top:0;
background-color:#ffffff;
color:#7f8c8d;
font-size: 15px;
font-weight: bold;
line-height: 55px;
text-align: center;
}
.post-type {
left:0;
top:70px;
background:#7f8c8d url("/assets/course14/quotes.png") no-repeat 50% 50%;
}
a {
text-decoration:none;
color:#2980b9;
font-size: 12px;
}
.post-author {
margin-top:5px;
}
.post-stats {
position: relative;
margin:0;
margin-top: 5px;
padding-left: 20px;

}
.post-stats .icon {
position: absolute;
left:0;
top:0;
width: 15px;
height: 15px;

}
.post-stats .icon-comments {
padding: 0;
position: absolute;
top:0;
left:0;

}

.icon-tags {
background: url("/assets/course14/post-challenge.png") no-repeat;

}
.icon-comments { url("/assets/course14/post-challenge.png") no-repeat -20 0
}
.post-text {
width: 165px;
background-color: #ffffff;
padding:10px 15px;
border-bottom: 5px solid #bdc3c7;
}
/*
Все размеры, отступы, координаты, размеры шрифтов (не заданные в body) кратны 5 или 10.
Адреса картинок:
/assets/course14/quotes.png
/assets/course14/post-challenge.png
Картинка «кавычки» выровнена по центру
*/

Ineska · 04.Май.2017 14:16:23

Элемент .post-stats блочный или строчный?

Murad · 04.Май.2017 14:18:10

Я не указал его вообще((

Murad · 04.Май.2017 14:19:25

Сделал, встало на свое место , а вот иконки нет

Ineska · 04.Май.2017 14:20:19

По-моему чего-то не хватает. Как считаете?

Murad · 04.Май.2017 14:29:51

background:
Спасибо большое))