Мастерская: декоративные элементы / Испытание: анонс поста

kirill_lalala · 21.Февраль.2018 08:28:19

Где вторая иконка? почему окрашивается только одна?? Для наглядности окрасил красным.

css

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 {
display:inline-block;
background-color: red;
margin-right: 20px;
width: 15px;
height: 15px;

}

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

.post{
position: relative;
}

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

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

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

.post-type{
position:absolute;
top: 0;
z-index:10;
width:55px;
height:55px;
background-color:#ffffff;
border-bottom: 5px solid #bdc3c7;
}

.post-date{
position: absolute;
top: 19px;
left:9px;
width:30px;
height:30px;
background-color:#ffffff;
font-size: 15px;
z-index: 20;
font-weight: bold;
}

.post-stats {
margin-top: 5px;
margin-right: 5px;
margin-left:95px;

.comments{

float:right;
margin-top: -19px;
padding-right: 21px;

}

.post-text{
position: absolute;
top: 62px;
left: 5px;
background-color: #ffffff;
border-bottom: 5px solid #bdc3c7;
width: 165px;
margin-left: 70px;

padding: 10px 15px;
}

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

.icon-comments{
position:absolute;
background:url("/assets/course14/quotes.png") no-repeat;

%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA

html

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

Интенсив: программа

13.09

Автор: HTML Academy

интенсив, программа

5

Работа над интенсивом идёт полным ходом. Мы нашли крутых людей в команду и решили еще кучу задач. Но сегодня я подробнее расскажу о работе над программой интенсива.

Ineska · 21.Февраль.2018 08:31:15

Иконки спозиционированы в одном месте, вторая находится под первой. Задайте относительное позиционирование для post-stats, тогда увидите.

kirill_lalala · 21.Февраль.2018 08:33:54

не помогло((

Ineska · 21.Февраль.2018 08:35:42

Исправьте отображение html-кода, буду копировать и смотреть.

kirill_lalala · 21.Февраль.2018 08:43:16

<!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="#" class="comments">5</a>
        </div>
        <div class="post-text">Работа над интенсивом идёт полным ходом. Мы нашли крутых людей в команду и решили еще кучу задач. Но сегодня я подробнее расскажу о работе над программой интенсива.</div>
    </div>
</body>

Ineska · 21.Февраль.2018 08:46:33

Еще display: inline-block; для .post-stats. float для пятерки не нужен.

kirill_lalala · 21.Февраль.2018 08:49:24

Не помогло, 5ка за тест спряталась я так понимаю)

Ineska · 21.Февраль.2018 08:55:17

Вы должны сдвинуть содержимое post-stats на 20px вправо, а иконки спозиционировать с помощью координат top и left в освободившееся слева пространство.

kirill_lalala · 21.Февраль.2018 09:02:26

А где теперь первая иконка? И что это за белая иконка вообще? где картинка ковычек?))) Я запутался

css

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 {
position:absolute;
top:95px;
left:75px;
background-color: red;
margin-right: 40px;
margin-top: -50px;
width: 15px;
height: 15px;

}

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

.post{
position: relative;
}

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

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

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

.post-type{
position:absolute;
top: 0;
z-index:10;
width:55px;
height:55px;
background-color:#ffffff;
border-bottom: 5px solid #bdc3c7;
}

.post-date{
position: absolute;
top: 19px;
left:9px;
width:30px;
height:30px;
background-color:#ffffff;
font-size: 15px;
z-index: 20;
font-weight: bold;
}

.post-stats {
display:inline-block;
margin-top: 5px;
margin-right: ;
margin-left:95px;
}

.comments{
margin-top: -19px;
padding-right: 21px;
}

.post-text{
position: absolute;
top: 62px;
left: 5px;
background-color: #ffffff;
border-bottom: 5px solid #bdc3c7;
width: 165px;
margin-left: 70px;

padding: 10px 15px;
}

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

.icon-comments{
position:absolute;
background:url("/assets/course14/quotes.png") no-repeat;

%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA

Ineska · 21.Февраль.2018 09:09:58

У вас же написано margin-left:95px; для каждого pos-stats. А между первым и вторым post-stats расстояние не 95px, согласны.
Картинку кавычек не видно, потому что вы ее не прописали. А еще потому что post-date и post-type тоже спозиционированы в одном месте.
Видно, что запутались. Лучше начать с начала. Если есть время, я оформлю вам площадку для экспериментов.

kirill_lalala · 21.Февраль.2018 09:12:04

Что за площадка? да пожалуй начну сначала) но я так и не понял как сделать расстояние между первым и вторым post-stats . Эх. разбираться бы мне так же как и вы)

Ineska · 21.Февраль.2018 09:23:12

Начинайте там. А я понаблюдаю.

Heavenly · 21.Февраль.2018 17:32:07

Откуда взялся класс у ссылке вот здесь:
%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA2
?
Его там быть не должно=)

Ineska · 21.Февраль.2018 17:35:32

В этом задании не запрещено изменять html-код. Другое дело, что класс там не нужен, если делать задание, следуя некоторым правилам.

Heavenly · 21.Февраль.2018 17:36:39

Ну так он из-за этого и мучается с этими иконками скорее всего.

Ineska · 21.Февраль.2018 17:37:55

Думаю, автор темы уже разобрался с иконками. Днем мы почти всё разобрали.

Heavenly · 21.Февраль.2018 17:39:29

Да прибудет с ним сила!=)

kirill_lalala · 21.Февраль.2018 17:40:07

Я снова тут:)

Marina_D · 22.Февраль.2018 12:33:38

Если еще актуально. .icon нужно позиционировать относительно .post-stats, чтобы они были к ним привязаны. Делаете .post-stats относительно позиционированным, .icon абсолютно позиционированным и каждой иконке по отдельности задаете координаты