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

Ratatui · 14.Август.2016 09:10:11

 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;
    }
    a {
        text-decoration: none;
        color: #2980b9;
        }
    .post-stats .icon {
        width: 15px;
        height: 15px;
    }
    .post-title {
        font-size: 20px;
        color: #2980b9;
        position: absolute;
        left: 85px;
        }
    .post-date {
        display: inline-block;
        width: 35px;
        height: 25px;
        color: #7f8c8d;
        font-size: 15px;
        font-weight: bold;
        padding: 15px 10px 15px 10px;
        border-bottom: 5px solid #bdc3c7;
        background-color: #ffffff;

    }

    .post-type {
        display: block;
        width: 35px;
        height: 25px;
        padding: 15px 10px;
        background: #7f8c8d url("/assets/course14/quotes.png") no-repeat 50% 50%;
        border-bottom: 5px solid #bdc3c7;
        margin-top: 10px;
        }
    .post-author {
        position: absolute;
        left: 85px;
        top: 79px;
        font-size: 12px; 

    }

    .post-stats {
        position: absolute;
        left: 105px;
        top: 83px;
        }
    .post div:nth-child(6) {
        left: 257px;
        }
    .post-text {
        background-color: #ffffff;
        position: absolute;
        left: 85px;
        width: 170px;
        padding: 10px 10px 10px 15px;
        font-size: 12px;
        border-bottom: 5px solid #bdc3c7;
        margin-top: -68px;
        }
    .icon-tags {
        position: relative;
        right: 20px;
        top: 15px;
        width:10px;
        height: 10px;
        background: url("/assets/course14/post-challenge.png") no-repeat;
        }
    .icon-comments {
        position: relative;
        right: 20px;
        top: 15px;
        width:10px;
        height: 10px;
        background: url("/assets/course14/post-challenge.png") no-repeat -20px 0;
    }

99%
критикуйте)

Ineska · 14.Август.2016 09:29:17

А что критиковать?.. Учитывая, что это последнее задание в бесплатных курсах, то его можно считать итоговым. И каков итог? Если оценивать - на балла 4 из 10.
Возникает вопрос, как вы выполнили предыдущие испытания - в частности интересуют:
оба испытания в курсе “Сетки”,
"Собери слово “Вечность” из курса “Позиционирование”,
и “Карточка курса”.

Ratatui · 14.Август.2016 10:30:46

3 испытания сеток пройдены на 100%, жаль код не сохранен.
испытание позиционирования вечность так же 100%…

html {
padding: 0;
}

    body {
        margin: 0;
        padding: 20px;
    }

    .scene {
        position: relative;
        width: 260px;
        height: 260px;
        background: none;
        box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.5);
    }

    div {
        display: inline-block;
        background: white;
    }

    /* горизонтальные элементы */
    .h {
        width: 50px;
        height: 10px;
    }
    .h1 {
        position: absolute;
        top: 190px;
        left: 20px;
        }
    .h2 {
        position: absolute;
        bottom: 80px;
        left: 80px;
        }
    .h3 {
        width: 40px;
        position: absolute;
        top: 210px;
        left: 200px;
    }


    /* вертикальные элементы */
    .v {
        width: 10px;
        height: 50px;
    }

    .v1 {
        position: absolute;
        top: 170px;
        left: 20px;
        }
    .v2 {
        position: absolute;
        top: 170px;
        left: 60px;
        }
    .v3 {
        position: absolute;
        top: 170px;
        left: 100px;
        }
    .v4 {
        position: absolute;
        top: 170px;
        left: 140px;
        }
    .v5 {
        position: absolute;
        top: 170px;
        left: 180px;
        }
    .v6 {
        position: absolute;
        top: 170px;
        left: 200px;
        }
    /* уголки */
    .corner-top {
        border: 15px solid white;
        border-top-width: 20px;
        border-bottom-width: 0;
        border-top-color: transparent;
        background: none;
        position: absolute;
        bottom: 70px;
        right: 80px;
    }

    .corner-bottom {
        border: 15px solid transparent;
        border-top-width: 20px;
        border-bottom-width: 0;
        border-top-color: white;
        background: none;
        position: absolute;
        bottom: 50px;
        right: 80px;
    }


    /* лого */
    .logo {
        width: 64px;
        height: 64px;
        background: url('/assets/course10/logo.png');
        position: absolute;
        top: 80px;
        left:87px;
    }

Карточка курса не нашел такое испытание вообще.
если 4 из 10, напишите ошибки, что не так, что надо исправлять. За ранее спасибо.

Ineska · 14.Август.2016 10:41:22

Позиционирование разобрали хорошо.
Вот это испытание меня интересует еще: https://htmlacademy.ru/courses/55/run/9
И “Сетки”, особенно “Котогалерея на inline-block” - https://htmlacademy.ru/courses/65/run/32

Ratatui · 14.Август.2016 10:44:50

Первое испытание :

<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="utf-8">
        <title>Испытание: карточка курса</title>
    </head>
    <body>
        <div class="vrapper">
            <h1>Курс &laquo;Фоны&raquo;</h1>
            <p>Учимся использовать фоновые цвета и изображения, разбираемся с форматами, знакомимся с приёмами создания декоративных эффектов.</p>
            <div class="sprite">
                <a class="fb" href="fb.com"></a>
                <a class="tw" href="twitter.com"></a>
                <a class="g" href="google.com"></a>
                
            </div>
        </div>
    </body>
</html>



html,
body {
    margin: 0;
    padding: 0;
}

body {
    width: 280px;
    min-height: 280px;
    padding-top: 20px;
    padding-left: 20px;
    font-size: 14px;
    font-family: "Arial", sans-serif;
    line-height: 1.2;
    background: #ecf0f1;

}

.vrapper {
    background-color: #1abc9c;
    color: white;
    width: 240px;
    margin-top: -13px;
    }
h1 {
    padding: 20px 20px 0 20px;
    font-weight: normal;
    font-size: 20px;
    }
p {
    padding: 6px 20px 20px 20px;
    }
.sprite a{
    display: inline-block;
    width: 10px;
    height: 10px;
    padding: 10px;
    background-image: url("/assets/course14/social-challenge.png");
    background-repeat: no-repeat;
    position: relative;
    left: 20px;
    bottom: 20px;
    background-color: #16a085;
    margin-right: 5px;
    margin-top: 11px;
    margin-bottom: -3px;
    }
    
.fb {
    background-position: 0 0;
    }
.tw {
    background-position: -30px 0;
    }
.g {
    background-position: -60px 0;
    }

Второе испытание не сохранен код… но так же пройдено на 100%

Ineska · 14.Август.2016 11:06:52

Это у вас тоже на 100%, к сожалению… Карточку надо переделывать.
Запомните одну вещь. Если при выполнении задания вам приходится пользоваться отрицательными отступами, значит что-то уже неправильно.

Откуда отступ этот взялся? Здесь получается эффект выпадания внешних отступов
( https://htmlacademy.ru/courses/44/run/10). Теги, такие как h1, p, ul, имеют свои отступы по умолчанию. В разных браузерах их величины могут отличаться.
В данном случае у h1 есть внешний отступ сверху, который выпадает и появляется у .vrapper сверху.
При размещении ссылок соцсетей попробуйте обойтись без позиционирования. Не надо его использовать везде, где придется.
Исправленный вариант карточки буду ждать в этой же теме.

Ratatui · 14.Август.2016 12:12:08

я так понимаю что отступы нужно не забывать обнулять, в таком случае не придется использовать margin с минусовым значением. Проверьте пожалуйста, у меня просто попыток нету.

html,
body,
h1,
p {
    margin: 0;
    padding: 0;
}

body {
    width: 280px;
    min-height: 280px;
    padding-top: 20px;
    padding-left: 20px;
    font-size: 14px;
    font-family: "Arial", sans-serif;
    line-height: 1.2;
    background: #ecf0f1;

}

.vrapper {
    background-color: #1abc9c;
    color: white;
    width: 240px;
     }
h1 {
    padding: 20px 20px 0 20px;
    font-weight: normal;
    font-size: 20px;
    }
p {
    padding: 20px;
    }
.sprite a{
    display: inline-block;
    width: 10px;
    height: 10px;
    padding: 10px;
    background-image: url("/assets/course14/social-challenge.png");
    background-repeat: no-repeat;
    background-color: #16a085;
    margin: 5px 5px 15px 0;
    
    }
div a:nth-child(1) {
    margin-left: 20px;
    }
.fb {
    background-position: 0 0;
    }
.tw {
    background-position: -30px 0;
    }
.g {
    background-position: -60px 0;
    }

Ineska · 14.Август.2016 13:18:44

Ну, вот) Приятно посмотреть. Только вот это в глаза бросается:

Задайте этот отступ как внутренний для .sprite. И высоту для .vrapper в 235px, чтобы было 100%.

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

Исправил) Спасибо за помощь и объяснения) С этим разобрались)

Ineska · 14.Август.2016 13:41:41

Теперь можно браться за итоговое.
Подсказка: позиционирование использовать только для .post-date, .post-type и иконок в .post-stats. Все остальное как в “Карточке курса” сверху вниз.

Ratatui · 14.Август.2016 13:46:42

Понял, буду пробовать) спасибо за подсказку)

Ineska · 14.Август.2016 13:47:40

Ratatui · 14.Август.2016 18:37:49

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-stats .icon {
    width: 15px;
    height: 15px;
}
.post-title {
    font-size: 20px;
    color: #2980b9;
    float: right;
    padding: 0px 10px;
    }
.post-date {
    display: inline-block;
    position: absolute;
    width: 35px;
    height: 25px;
    color: #7f8c8d;
    font-size: 15px;
    font-weight: bold;
    text-align: center;
    padding: 15px 10px 15px 10px;
    border-bottom: 5px solid #bdc3c7;
    background-color: #ffffff;
    }
.post-type {
    display: block;
    position: absolute;
    top: 110px;
    width: 35px;
    height: 25px;
    padding: 15px 10px;
    background: #7f8c8d url("/assets/course14/quotes.png") no-repeat 50% 50%;
    border-bottom: 5px solid #bdc3c7;
    margin-top: 10px;
    }
.post-author {
    float: left;
    font-size: 12px; 
    padding: 5px 75px;
    }
.post-stats{
    float: left;
    }
.post div:nth-child(5) { /*Можно просто дать класс*/
    margin-left: 95px;  /*ссылкe Интенсив и программа*/
    }                  /* Но решил сделать без изменения HTML*/
.post div:nth-child(6) {
     margin-left: 25px;
     }
 .post-text {
    background-color: #ffffff;
    float: right;
    margin-right: 20px;
    width: 160px;
    padding: 10px 10px 10px 15px;
    font-size: 10px;
    border-bottom: 5px solid #bdc3c7;
    }
.icon-tags {
    position: absolute;
    right: 470px;
    top: 100px;
    width:10px;
    height: 10px;
    background: url("/assets/course14/post-challenge.png") no-repeat;
    }
.icon-comments {
    position: absolute;
    right: 320px;
    top: 100px;
    width:10px;
    height: 10px;
    background: url("/assets/course14/post-challenge.png") no-repeat -20px 0;
}

Проверьте пожалуйста) верна ли мысль) не знаю сошлось ли, попыток на сегодня нету) а вообще, завтра будет день, буду делать и проверять) но вы на всякий случай взгляните) лучше или хуже стало)

Ineska · 14.Август.2016 19:12:36

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

Ratatui · 15.Август.2016 16:13:15

Третья попытка, ну или какая она там))

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 {
    font-size: 12px; 
    padding: 5px 0;
    }
.post div:nth-child(6) a {
     padding: 5px;
     }
.post-stats {
    margin-left: 20px;
    display: inline-block;
    }
 .post-text {
    background-color: #ffffff;
    margin-right: 20px;
    width: 165px;
    padding: 10px 15px 10px 15px;
    border-bottom: 5px solid #bdc3c7;
    }
.icon-tags {
    position: absolute;
    right: 470px;
    top: 100px;
    width:10px;
    height: 10px;
    background: url("/assets/course14/post-challenge.png") no-repeat;
    }
.icon-comments {
    position: absolute;
    right: 320px;
    top: 100px;
    width:10px;
    height: 10px;
    background: url("/assets/course14/post-challenge.png") no-repeat -20px 0;
}

вот только есть одна проблемка, именно с иконками… в мини браузере они есть, в результате нету) просмотрите мой код пожалуйста)

Добавляю: ошибки нашел с иконками исправил позиционирование с права на left: 85px; для .icon-tags и left: 240px; для .icon-comments но в 5-10px не влаживаюсь… получается по 6-8 пикселей… помогите)

Ineska · 15.Август.2016 19:49:35

В целом уже гораздо лучше. Доведем до 100%, а потом будем искать лишние строчки.
Координаты иконок должны рассчитываться не относительно .post, а относительно ближайшего родителя .post-stats, тогда их величина будет гораздо меньше.

Ratatui · 16.Август.2016 04:30:20

так лучше будет?

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

Ineska · 16.Август.2016 06:26:44

100% получается у вас с этими координатами?

Ratatui · 16.Август.2016 06:45:15

Неа появился отступ снизу автора… Не знаю как его убрать

Ineska · 16.Август.2016 07:01:05

Красивый с виду вариант, но не подходит. Если иконки должны быть расположены относительно .post-stats, это не значит, что им надо задать относительное позиционирование.
Относительное сдвинуло их от исходного положения в потоке документа.
Перечитайте теорию в этих заданиях, может натолкнет на мысль:

Тренируемся задавать координаты — Позиционирование — HTML Academy