Испытание: анонс поста [18/18] 100%, но условия не соблюдены

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

Для 100% соответствия пришлось добавлять margin’ы, не кратные 5 + дописывать класс для установки цифры 5 с помощью абсолютного позиционирования. По условию заданию все отступы и шрифты д.б. кратны 5, код html трогать нельзя. Как соблюсти условия.

Мое решение:

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

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 {
margin:0;
padding:0;
}

.post-stats .icon {
width: 15px;
height: 15px;
}
.post-date {
background-color: #ffffff;
height: 55px;
width: 55px;
line-height: 55px;
color: #7f8c8d;
font-weight: bold;
font-size: 15px;
vertical-align: middle;
text-align: center;
border-bottom: 5px solid #bdc3c7;
margin-bottom: 10px;

}

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

.post-title {
position: absolute;
top: 50px;
left: 85px;
font-size: 20px;
color: #2980b9;

}
.post-author {
color: #7f8c8d;
position: absolute;
left: 85px;
top: 80px;
margin-top: -1px;
}

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

.post-stats {
position: absolute;
left: 105px;
top: 85px;
margin-top: -2px;

}

.post-stats.five {
position: absolute;
left: 257px;
top: 85px;

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

.icon {

width: 25px;
height: 45px;

}

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

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

.post-text {
color: #7f8c8d;
background-color: #ffffff;
width: 165px;
padding: 10px 15px;
position: absolute;
top: 115px;
left: 85px;
border-bottom: 5px solid #bdc3c7;
margin-top: -3px;
}

2

Свойство position не предназначено для расстановки основных элементов на странице.
В этом задании абсолютное позиционирование должно быть использовано только для .post-date, .post-type и .icon. Все остальные элементы расставляются с помощью внешних и внутренних отступов.
Обратите внимание, что в вашем коде не должно быть отрицательных координат и отступов (даже если их величина получается кратна пяти).
Не совсем понятен выбор относительного позиционирования для .icon-tags и .icon-comments. Просмотрите теорию из курса “Позиционирование”, возможно вы не различаете для чего используется абсолютное, а для чего относительное позиционирование.

3

Да, Вы правы.
Пройдя курсы я не совсем понял в каких случаях используется абсолютное и в каких случаях относительное позиционирование. Знаю, что их использование в большом количестве является дурным вкусом, в особенности касаемо абсолютного позиционирования - лучше вообще без него обходиться.
В общих чертах я понимаю значение этих понятий, а когда дело касается практики - получается не очень.

4

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

2 лайка