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

Ratatui · 16.Август.2016 07:40:53

Действительно натолкнуло) приду на обед домой попробую сделать)) спасибо за наводку так сказать) если я правильно понял то надо задать блоку .post-stats просто относительное тогда у абсолютного точка координат будет считаться от него) т.е родителя)

Ineska · 16.Август.2016 09:13:01

Правильно поняли.

Ratatui · 16.Август.2016 10:22:19

html,
body,
a {
    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;
}
a {
    text-decoration: none;
    color: #2980b9;
    }
.post {
    padding-left: 75px;
    }
.post-stats .icon {
    width: 15px;
    height: 15px;
}
.post-title {
    font-size: 20px;
    color: #2980b9;
    }
.post-date {
    display: inline-block;
    position: absolute;
    top: 50px;
    left: 10px;
    line-height: 55px;
    width: 55px;
    height: 55px;
    color: #7f8c8d;
    font-size: 15px;
    font-weight: bold;
    text-align: center;
    border-bottom: 5px solid #bdc3c7;
    background-color: #ffffff;
    }
.post-type {
    display: block;
    position: absolute;
    top: 85px;
    left: 10px;
    width: 55px;
    height: 55px;
    background: #7f8c8d url("/assets/course14/quotes.png") no-repeat 50% 50%;
    border-bottom: 5px solid #bdc3c7;
    margin-top: 35px;
    }
.post-author {
    padding: 5px 0;
    }
.post div:nth-child(6) a {
      margin-left: 30px;
     }
.post-stats {
    display: inline-block;
    position: relative;
    left: 20px;
    }
 .post-text {
    background-color: #ffffff;
    width: 165px;
    padding: 10px 15px;
    border-bottom: 5px solid #bdc3c7;
    }
.icon-tags {
    position: absolute;
    right: 125px;
    background: url("/assets/course14/post-challenge.png") no-repeat;
    }
.icon-comments {
    position: absolute  ;
    left: 10px;
    background: url("/assets/course14/post-challenge.png") no-repeat -20px 0;
}

Проверьте если не сложно) где ошибка) icon-tags на пару пикселей съезжает) получается не кратно 5 или 10)

Ineska · 16.Август.2016 13:40:55

Ошибки выделены. Надо еще перечитать теорию в курсе “Позиционирование”.

Ratatui · 16.Август.2016 14:16:35

html,
body,
a {
    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;
}
a {
    text-decoration: none;
    color: #2980b9;
    }
.post {
    padding-left: 75px;
    }
.post-stats .icon {
    width: 15px;
    height: 15px;
}
.post-title {
    font-size: 20px;
    color: #2980b9;
    }
.post-date {
    display: inline-block;
    position: absolute;
    top: 50px;
    left: 10px;
    line-height: 55px;
    width: 55px;
    height: 55px;
    color: #7f8c8d;
    font-size: 15px;
    font-weight: bold;
    text-align: center;
    border-bottom: 5px solid #bdc3c7;
    background-color: #ffffff;
    }
.post-type {
    display: block;
    position: absolute;
    top: 85px;
    left: 10px;
    width: 55px;
    height: 55px;
    background: #7f8c8d url("/assets/course14/quotes.png") no-repeat 50% 50%;
    border-bottom: 5px solid #bdc3c7;
    margin-top: 35px;
    }
.post-author {
    padding: 5px 0;
    }
.post div:nth-child(6) a {
      margin-left: 5px;
     }
.post-stats {
    display: inline-block;
    position: relative;
    padding-left: 20px;
    }
 .post-text {
    background-color: #ffffff;
    width: 165px;
    padding: 10px 15px;
    border-bottom: 5px solid #bdc3c7;
    }
.icon-tags {
    position: absolute;
    left: 0px;
    background: url("/assets/course14/post-challenge.png") no-repeat;
    }
.icon-comments {
    position: absolute  ;
   right: 10px;
    background: url("/assets/course14/post-challenge.png") no-repeat -20px 0;
}

так лучше? если нет, то скажите пожалуйста что конкретно не так…?

Ineska · 16.Август.2016 17:36:41

Так хорошо. Еще для единообразия переделайте здесь координату тоже на left:
.icon-comments {
position: absolute;
right: 10px;
background: url("/assets/course14/post-challenge.png") no-repeat -20px 0;
}

Ratatui · 17.Август.2016 09:55:21

Ну как-то так)

html,
body,
a {
    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;
}
a {
    text-decoration: none;
    color: #2980b9;
    }
.post {
    padding-left: 75px;
    }
.post-stats .icon {
    width: 15px;
    height: 15px;
}
.post-title {
    font-size: 20px;
    color: #2980b9;
    }
.post-date {
    display: inline-block;
    position: absolute;
    top: 50px;
    left: 10px;
    line-height: 55px;
    width: 55px;
    height: 55px;
    color: #7f8c8d;
    font-size: 15px;
    font-weight: bold;
    text-align: center;
    border-bottom: 5px solid #bdc3c7;
    background-color: #ffffff;
    }
.post-type {
    display: block;
    position: absolute;
    top: 85px;
    left: 10px;
    width: 55px;
    height: 55px;
    background: #7f8c8d url("/assets/course14/quotes.png") no-repeat 50% 50%;
    border-bottom: 5px solid #bdc3c7;
    margin-top: 35px;
    }
.post-author {
    padding: 5px 0;
    }
.post div:nth-child(6) a {
      margin-left: 5px;
     }
.post div:nth-child(6)  {
      margin-left: 5px;
     }
.post-stats {
    display: inline-block;
    position: relative;
    padding-left: 20px;
    }
 .post-text {
    background-color: #ffffff;
    width: 165px;
    padding: 10px 15px;
    border-bottom: 5px solid #bdc3c7;
    }
.icon-tags {
    position: absolute;
    left: 0px;
    background: url("/assets/course14/post-challenge.png") no-repeat;
    }
.icon-comments {
    position: absolute  ;
   left: 5px;
    background: url("/assets/course14/post-challenge.png") no-repeat -20px 0;
}

100%

Ineska · 17.Август.2016 10:03:55

Отступ на два делить не надо, в сумме 10px слева получается.

Ratatui · 17.Август.2016 10:23:41

не получится так. если их объединить то съезжает.

Ineska · 17.Август.2016 10:25:33

Если бы я не знала, что получится, то не предлагала бы.
Показывайте.

Ratatui · 17.Август.2016 10:27:17

пробывал и в .icon-comments дать лефт 10пх и в .post div:nth-child(6) не получается

Ineska · 17.Август.2016 10:29:06

Писать правильный вариант, или еще подумаете?

Ratatui · 17.Август.2016 10:30:56

напишите пожалуйста) устал уже с этим заданием) думаю оплатить платные и проходить дальше обучение) а там можно и интенсив пройти)

Ineska · 17.Август.2016 10:38:28

.post div:nth-child(6) {
margin-left: 10px;
}
.icon-comments {
position: absolute ;
left: 0px;
background: url("/assets/course14/post-challenge.png") no-repeat -20px 0;
}

Ratatui · 17.Август.2016 11:01:22

тогда надо будет еще удалить из кода

.post div:nth-child(6) a {
      margin-left: 5px;
     }

и после этого получилось 100%)
Спасибо за помощь и объяснения)

ValentinValidniy · 01.Апрель.2017 21:16:14

Есть вопросик. Даже два.
Во-первых, мне кажется у меня полный косяк с позиционированием, прав ли я?
Во-вторых, почему у меня иконка комментариев остается под цифрой 5 (ну или наоборот), хотя я присваиваю ссылкам тип инлайн-блок и делаю маргин у иконки комментариев справа, а пятерка все-равно никуда не сдвигается?
Спасибо заранее.
HTML code
<!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">
                <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>

CSS code
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-stats .icon {
width: 15px;
height: 15px;
}

.post {
position:relative;

}

.post-title {
position:relative;
font-size: 20px;
color:#2980b9;
left:70px;
top:25px;
}

.post-author {
position:relative;
top:-30px;
left: 70px;

}

.post-stats {
display:inline-block;
position:relative;
top:-40px;
left:90px;
}

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

.post-date {
display:inline-block;
width:55px;
height:60px;
background-color:#ffffff;
color:#bdc3c7;
border-bottom:solid #bdc3c7 5px;
font-size:15px;
font-weight:bold;
text-align:center;
box-sizing:border-box;
padding:20px 5px;

}

.post-stats {
position:relative;
}

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

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

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

}

.icon-comments {
position:relative;
background-image:url("/assets/course14/post-challenge.png");
background-position:100px 0;
margin-right:40px;
top:15px;

Ineska · 02.Апрель.2017 06:11:42

У меня к вам больше чем два вопроса…

Где стили для .post-type?
Почему для .post-stats создано аж три правила?
Вся верстка у вас держится на относительном позиционировании, хотя оно используется только для декоративных элементов (кнопки, иконки, стрелки и т. п.) То есть здесь всё декоративное, ничего важного нет?
Одна иконка на абсолютном, другая уже на относительном позиционировании. По какому принципу вы их поделили?
С учетом всего этого, отвечая на ваш второй вопрос могу предположить, что пятёрке не хватило места из-за пробелов, которые вы создали, задав ссылкам блочно-строчный тип.