Испытание: анонс поста [18/18] - 100%, но отступы не кратны пяти

Удалось выполнить задание только при отступах, не кратных пяти. Прошу указать на ошибки. HTML код оригинальный, без изменений.

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">
                <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:

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;
}

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

.post {
    position: relative;

}

.post-title {
    position: relative;
    color: #2980b9;
    font-size: 20px;
    left: 75px;
}
 
.post-date {
     position: relative;
     background: white;
     width: 55px;
     text-align: center;
     border-bottom: 5px solid #bdc3c7;
     padding: 20px 0;
     font-size: 15px;
     font-weight: bold;
     top: -24px;
     min-height: 15px;
     padding: 19px 0 18px 0;
}
 
.post-author {
     position: relative;
     top: -55px;
     left: 75px;
 }
 
.post-author a, .post-stats a {
     color: #2980b9;
     text-decoration: none;
}

.post-stats {
     position: relative;
     top: -65px;
     left: 95px;
     display: inline-block;
     padding-right: 30px;
}
    
.icon-comments {
     position: absolute;
     background-position: -20px 0;
     right: 41px;
}

.icon-tags {
     position: relative;
     background-position: 0 0;
     top: 15px;
     right: 20px;
}

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

.post-text {

    position: absolute;
    background-color: white;
    border-bottom: 5px solid #bdc3c7;
    left: 75px;
    top: 62px;
    min-height: 100px;
    width: 165px;
    padding: 10px 15px 8px 15px;
}
1 лайк

А почему у вас все элементы позиционированные? Разве они все декоративные?

1 лайк

Основываясь на логике предыдущего задания делал.

Думаю, что нет.

1 лайк

Позиционированы в этом задании только .post-date, .post-type, .icon.
Все остальное расставляется с помощью margin/padding, display: inline-block где необходимо.

2 лайка

Сделал, но в .post-date всё-равно отступы не кратны пяти :frowning:

 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-left: 75px;
}
    
.post-stats .icon {
    width: 15px;
    height: 15px;
    
}

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

.icon-comments {
     background-position: -20px 0;
     left: -20px;
     top: 15px;
}

.icon-tags {
   
     background-position: 0 0;
     top: 15px;
     left: -20px;
}

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

.post-author {
    margin-top: -55px;
}
 
.post-author a, .post-stats a {
    color: #2980b9;
    text-decoration: none;
    }

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


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

.post-date {
     
     position: relative;
       padding: 19px 0 20px 0;
     background: white;
     width: 55px;
     text-align: center;
     border-bottom: 5px solid #bdc3c7;
     font-size: 15px;
     font-weight: bold;
     top: -24px;
     left: -75px;
     height: 16px;

 
}

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



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

Поясните, исходя из чего вы решаете, каким позиционированием воспользоваться, относительным или абсолютным?

1 лайк

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

1 лайк

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

2 лайка

Ineska, благодарю за подсказжу, так верно?

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-left: 75px;
   position: relative;
}
    
.post-stats .icon {
    width: 15px;
    height: 15px;
    
}

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

.icon-comments {
     background-position: -20px 0;
     right: 35px;
     top: 50px;
}

.icon-tags {
   
     background-position: 0 0;
     top: 50px;
     left: 0px;
}

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

.post-author a, .post-stats a {
    color: #2980b9;
    text-decoration: none;
    }
    
    .post-author {
        margin-top: 5px;
        margin-bottom: 5px;
    }

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


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

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

 
}

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

Получилось 98%, не выходит выровнять 3 декоративных элемента:

1 лайк

Относительно чего рассчитана эта координата?

1 лайк

Ineska подскажите пожалуйста, как правильно сделать этот блок?

.post-date {
    position: absolute;
    top: 0;
    left: 0;
    width: 55px;
    height: 60px;
    border-bottom: 5px solid #bdc3c7;
    background-color: #ffffff;
    font-weight: bold;
    font-size: 15px;
    text-align: center;
    padding-top: 19px;
    box-sizing: border-box;
}

Выравнивайте дату в блоке по вертикали с помощью line-height в пикселях.

2 лайка

Тогда box-sizing: border-box; удалить?

Скорее всего, и padding-top тоже.

1 лайк

Ineska Доброе утро! Помогите пожалуйста, задание почти прошёл на 100%. Но не могу понять как правильно задать отступ ссылкам которые находятся внутри блока post-stats
от абсолютно позиционированных элементов icon, посмотрите пожалуйста 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 {
    position: relative;
    padding-left: 75px;
}

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

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

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

.post-author {
    margin-top: 5px;
    margin-bottom: 5px;
}

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

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

.post-stats a {
    display: inline-block;
    margin-left: 20px;
    text-decoration: none;
    color: #2980b9;
}

.post-stats .icon {
    width: 15px;
    height: 15px;
    position: absolute;
    background: url("/assets/course14/post-challenge.png");
}

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

.post-text {
    background: #ffffff;
    width: 195px;
    height: 123px;
    border-bottom: 5px solid #bdc3c7;
    box-sizing: border-box;
    padding: 10px 15px;
}

Относительно блока .post

1 лайк

Не делайте ссылку внутри .post-stats блочно-строчной. Этим вы создаете дополнительные отступы(пробелы), которые придется потом убирать.
Задайте отступ справа для самого .post-stats.

1 лайк

.icon по сравнению с .post-date и .post-type расположены глубже по вложенности, и у них есть свой непосредственный родитель.

2 лайка

Исправил, вышло 99%.

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-left: 75px;
    position: relative;
}
    
.post-stats .icon {
    width: 15px;
    height: 15px;
    
}

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

.icon-comments {
    position: absolute;
    background-position: -20px 0;
    right: 20px;

}

.icon-tags {
    position: absolute;
    background-position: 0 0;
    top: 0px;
    left: 0px;
}

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

.post-author a, .post-stats a {
    color: #2980b9;
    text-decoration: none;
}
    
.post-author {
    margin: 5px 0;
}

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


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

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

.post-type {
     position: absolute;
     background: #7f8c8d url("/assets/course14/quotes.png") no-repeat 50% 50%;
     width: 55px;
     height: 15px;
     border-bottom: 5px solid #bdc3c7;
     padding: 20px 0;
     left: -75px;
     top: 70px;
}
1 лайк

В чем смысл пары relative - absolute, если оба класса принадлежат одному элементу?
И почему для .icon-comments не top и left, а right?

2 лайка