Испытание: анонс поста [18/18] 90%

5paun · 14.Август.2016 18:21:38

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{
position:relative;
}

.post .post-title{
font-size:20px;
color:#2980b9;
padding-left:75px;
}

.post .post-date{
font-size:15px;
font-weight:bold;
position:absolute;
top:0;
text-align:center;
line-height:55px;
background-color:#fff;
width:55px;
height:55px;
border-bottom:5px solid #bdc3c7;

}

.post .post-type{
width:55px;
height:55px;
border-bottom:5px solid #bdc3c7;
position:absolute;
top:70px;
background:#7f8c8d url("/assets/course14/quotes.png") no-repeat 50% 50%;

}

.post .post-author{
padding-left:75px;
padding-top:5px;
margin-bottom:5px;

}

.post .post-author a{
text-decoration:none;
color:#2980b9;

}

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

}

.post-stats{
margin-left:95px;
position:absolute;

}

.post-stats .icon-tags{
width: 15px;
height: 15px;
background-image:url("/assets/course14/post-challenge.png");
background-repeat:no-repeat;

margin-left:-20px;

}

.post-stats .icon{
position:absolute;
}

.post-stats .icon-comments{
width:15px;
height:15px;
background-image:url("/assets/course14/post-challenge.png");
background-repeat:no-repeat;
background-position:-20px 0;

left:130px;

}

.post .post-text{
border-bottom:5px solid #bdc3c7;
width:165px;
margin-left:75px;
padding:10px 15px;
background-color:#fff;
margin-top:20px;

}

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

5paun · 14.Август.2016 18:22:45

Я буду вам очень благодарен, если вы мне не будете в открытую писать ответ. А давать какие-то наводки. Что я написал лишнего, каким методом это можно было бы исправить, ну всё в таком план=)

Ineska · 14.Август.2016 18:26:05

Хорошо, договорились. Обсуждаем расположение блоков .post-stats. Что надо сделать, чтобы два блочных элемента расположить в одну строку?

5paun · 14.Август.2016 18:30:23

display:inline-block

5paun · 14.Август.2016 18:32:03

Сразу предупреждаю, у меня не очень много свободного времени, поэтому я это эти задания решаю уже на протяжении 2 или даже 3-х месяцев. Хотя тут работы на неделю, если засесть нормально. Я к тому, что из-за таких перерывов информация выветривается из головы. Я могу не ответить на глупые вопросы))

5paun · 14.Август.2016 18:43:33

Ineska, так что, я верно ответил ? Я добавил это свойство и пока ничего не изменилось, не знаю, что делать дальше)

Ineska · 14.Август.2016 18:55:15

Правильно ответили. Чтобы вы поняли прием, нам придется вернуться к многострадальным блокам .post-date и .post-type.
Проследите закономерность:
.post .post-title{
font-size:20px;
color:#2980b9;
padding-left:75px;
}
.post .post-author{
padding-left:75px;
padding-top:5px;
margin-bottom:5px;

}
.post .post-text{
border-bottom:5px solid #bdc3c7;
width:165px;
margin-left:75px;
padding:10px 15px;
background-color:#fff;
margin-top:20px;
}
Блоки отодвигаются влево на одно и то же расстояние, правда?
Так вот, я хочу, чтобы отступ в 75px был прописан один раз, у родителя .post.

5paun · 14.Август.2016 20:40:33

Так, я прописал сдвиг у родителя. Сразу ничего не понял, т.к. переместилось вообще всё. Но т.к. у date и type задано позиционирование, то я просто написал left:0. И всё стало на своё место. В верном направлении иду ?
Но дальше опять засада…))

5paun · 14.Август.2016 21:03:43

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{
position:relative;
padding-left:75px;
}

.post .post-title{
font-size:20px;
color:#2980b9;

}

.post .post-date{
font-size:15px;
font-weight:bold;
position:absolute;
top:0;
text-align:center;
line-height:55px;
background-color:#fff;
width:55px;
height:55px;
border-bottom:5px solid #bdc3c7;
left:0;

}

.post .post-type{
width:55px;
height:55px;
border-bottom:5px solid #bdc3c7;
position:absolute;
top:70px;
background:#7f8c8d url("/assets/course14/quotes.png") no-repeat 50% 50%;
left:0;

}

.post .post-author{

padding-top:5px;
margin-bottom:5px;

}

.post .post-author a{
text-decoration:none;
color:#2980b9;

}

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

}

.post-stats{
margin-left:20px;
position:absolute;

}

.post-stats .icon-tags{
width: 15px;
height: 15px;
background-image:url("/assets/course14/post-challenge.png");
background-repeat:no-repeat;

left:-20px;

}

.post-stats .icon{
position:absolute;
display:inline-block;

}

.post-stats .icon a{

}

.post-stats .icon-comments{
width:15px;
height:15px;
background-image:url("/assets/course14/post-challenge.png");
background-repeat:no-repeat;
background-position:-20px 0;
margin-left:132px;

}

.post .post-text{
border-bottom:5px solid #bdc3c7;
width:165px;
;
padding:10px 15px;
background-color:#fff;
margin-top:19px;

}

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

У меня сейчас 99%. Но опять же, обратите внимание на выделенное жирным. Не кратно 5-и. И я не знаю, что делать с этой пятёркой, как я сдвинуть

5paun · 14.Август.2016 21:20:26

В общем у меня сейчас проценты уменьшились. Стало 96%. Но визуально всё лучше стало, 5-ёрку всё-таки в угол загнал. Нашёл ошибку в селекторе. Но теперь спрайты как-то сместились корявенько на пару пикселей и я не знаю, что с ними делать.

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{
position:relative;
padding-left:75px;
}

.post .post-title{
font-size:20px;
color:#2980b9;

}

.post .post-date{
font-size:15px;
font-weight:bold;
position:absolute;
top:0;
text-align:center;
line-height:55px;
background-color:#fff;
width:55px;
height:55px;
border-bottom:5px solid #bdc3c7;
left:0;

}

.post .post-type{
width:55px;
height:55px;
border-bottom:5px solid #bdc3c7;
position:absolute;
top:70px;
background:#7f8c8d url("/assets/course14/quotes.png") no-repeat 50% 50%;
left:0;

}

.post .post-author{
padding-top:5px;

}

.post .post-author a{
text-decoration:none;
color:#2980b9;

}

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

}

.post-stats{
position:absolute;

}

.post-stats .icon-tags{
width: 15px;
height: 15px;
background-image:url("/assets/course14/post-challenge.png");
background-repeat:no-repeat;

}

.post-stats .icon{
display:inline-block;

}

.post-stats a{

}

.post-stats .icon-comments{
width:15px;
height:15px;
background-image:url("/assets/course14/post-challenge.png");
background-repeat:no-repeat;
background-position:-20px 0;
margin-left:150px;

}

.post .post-text{
border-bottom:5px solid #bdc3c7;
width:165px;
;
padding:10px 15px;
background-color:#fff;
margin-top:19px;

}

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

Ineska · 15.Август.2016 03:00:13

Вот теперь можно вернуться к .post-stats. Но перед этим вопрос, так зачем мы все содержимое в блоке .post сдвинули вправо на 75px?

5paun · 15.Август.2016 19:18:28

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{
position:relative;
padding-left:75px;
}

.post .post-title{
font-size:20px;
color:#2980b9;

}

.post .post-date{
font-size:15px;
font-weight:bold;
position:absolute;
top:0;
text-align:center;
line-height:55px;
background-color:#fff;
width:55px;
height:55px;
border-bottom:5px solid #bdc3c7;
left:0;

}

.post .post-type{
width:55px;
height:55px;
border-bottom:5px solid #bdc3c7;
position:absolute;
top:70px;
background:#7f8c8d url("/assets/course14/quotes.png") no-repeat 50% 50%;
left:0;

}

.post .post-author{
padding-top:5px;
padding-bottom:5px;

}

.post .post-author a{
text-decoration:none;
color:#2980b9;

}

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

}

.post .post-stats a:last-child{
margin-right:10px;
}

.post-stats{
display:inline-block;
margin-left:20px;

}

.post-stats .icon-tags{
width: 15px;
height: 15px;
background-image:url("/assets/course14/post-challenge.png");
background-repeat:no-repeat;
left:75px;

}

.post-stats .icon{
position:absolute;

}

.post-stats .icon-comments{
width:15px;
height:15px;
background-image:url("/assets/course14/post-challenge.png");
background-repeat:no-repeat;
background-position:-20px 0;
left:227px;

}

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

}

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

5paun · 16.Август.2016 09:12:53

.post-stats{
position:relative;
display:inline-block;
padding-left:20px;
}

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

.post .post-stats a:last-child{
margin-right:10px;
}

.post-stats .icon-tags{
width: 15px;
height: 15px;
background-image:url("/assets/course14/post-challenge.png");
background-repeat:no-repeat;
/left:75px;/
left:0px;
}

.post-stats .icon{
position:absolute;
}

.post-stats .icon-comments{
width:15px;
height:15px;
background-image:url("/assets/course14/post-challenge.png");
background-repeat:no-repeat;
background-position:-20px 0;
/left:227px;/
left:0px;
}

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

Roma_Pro · 31.Август.2016 10:02:40

Извините, что обращаюсь, но я никак не могу понять, почему у меня не отображается блок post-type. Я кое-что добавил в HTML-коде, а именно класс services к post-stats. Буду очень благодарен, если вы мне ответите.

HTML

<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="utf-8">
        <title>Испытание: анонс поста</title>
    </head>
    <body>
        <div class="post">
            <div class="post-title">Интенсив: программа</div>
            <div class="post-date">13.09</div>
            <div class-"post-type"></div>
            <div class="post-author">
                Автор: <a href="#">HTML Academy</a>
            </div>
            <div class="post-stats services">
                <div class="icon icon-tags"></div>
                <a href="#">интенсив</a>,
                <a href="#">программа</a>
            </div>
            <div class="post-stats">
                <div class="icon icon-comments"></div>
                <a href="#">5</a>
            </div>
            <div class="post-text">Работа над интенсивом идёт полным ходом. Мы нашли крутых людей в команду и решили еще кучу задач. Но сегодня я подробнее расскажу о работе над программой интенсива.</div>
        </div>
    </body>
</html>

СSS

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 {
    position:relative;
}

.post-title,
.post-author,
.services,
.post-text {
    margin-left:75px;
}

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

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

.post-title{
    font-size:20px;
    color:#2980b9;
}

.post-date, .post-type {
    position:absolute;
    height:55px;
    width:55px;
    border-bottom:5px solid #bdc3c7;
    vertical-align:middle;
    text-align:center;
    line-height:55px;
}
.post-date {
    top:0px;
    background-color:#ffffff;
    color:#7f8c8d;
    font-size:15px;
    font-weight:bold;
}

.post-type {
    top:70px;
    background:#7f8c8d url("/assets/course14/quotes.png") no-repeat 50% 50%;
}

.post-author {
    padding:5px 0;
}

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

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

.icon-tags, .icon-comments {
    position:absolute;
    left:0;
    background-image: url("/assets/course14/post-challenge.png");
    background-repeat:no-repeat;
}

.post-stats .icon-tags {
    background-position:0 0;
}

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

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

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

Ineska · 31.Август.2016 10:05:36

Наверняка это то, что вы искали.

Roma_Pro · 31.Август.2016 10:08:38

Спасибо огромное. Невнимательность меня подвела. Надеюсь, больше таких ошибок делать не буду.