Испытание: анонс поста [18/18] - 95%, не смог удержать правило кратности, нужна помощь.

vladbakumenko · 23.Октябрь.2017 12:19:28

Добрый день, уважаемые эксперты!
При выполнении данного испытания, пытался максимально следовать правилу кратности.
Но так или иначе в конце встретился с небольшими расхождениями и израсходовав все попытки проверок получил 95%.
Понимаю, что в правиле для .icon нужно было использовать абсолютное позиционирование, но в конец запутался и не смог понять, как лучше это было сделать.
Надеюсь, что случай не безнадёжный и критика мне поможет его исправить.
Спасибо за ваше время!

div .post {
    position: relative;
}

div .post-title {
    position: absolute;
    margin-left: 75px;
    font-size: 20px;
    color: #2980b9;
}

div .post-date {
    position: absolute;
    width: 55px;
    height: 55px;
    background: #ffffff;
    font-size: 15px;
    font-weight: bold;
    border-bottom: 5px solid #bdc3c7;
    vertical-align: middle;
    text-align:center;
    line-height: 55px;
}
    
div .post-type {
    position: absolute;
    width: 55px;
    height: 55px;
    background: #7f8c8d;
    margin-top: 70px;
    border-bottom: 5px solid #bdc3c7;
    background-image: url("/assets/course14/quotes.png");
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

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

div .post-author {
    position: absolute;
    margin-left: 75px;
    margin-top: 30px;
    line-height: 12px;
    vertical-align: middle;
}

.post-stats1,
.post-stats2 {
    position: relative;
    display: inline-block;
    margin-top: 47px;
}

.post-stats1 a,
.post-stats2 a {
    line-height:12px;
    vertical-align: middle;
}

.post-stats1 {
    margin-left: 75px;
}

.post-stats2 {
    margin-left: 10px;
}

.post-stats1 .icon,
.post-stats2 .icon {
    width: 15px;
    height: 15px;
    background-image: url("/assets/course14/post-challenge.png");
    display: inline-block;
    background-repeat: no-repeat;
    margin-right: 2px;
}

.icon-tags {
    background-position: 0 0;
    vertical-align: middle;
    line-height: 12px;
}

.icon-comments {
    background-position: -20px 0;
    vertical-align: middle;
    line-height: 12px;
}

div .post-text {
    width: 165px;
    min-height: 90px;
    background-color: #ffffff;
    border-bottom: 5px solid #bdc3c7;
    padding: 10px 15px;
    margin-left: 75px;
}

Ineska · 23.Октябрь.2017 20:31:46

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

vladbakumenko · 24.Октябрь.2017 16:23:14

Тааак, хорошо, спасибо! Но в итоге верх хорошо получился до этой коварной строчки с тегами и комментариями.
Опять встал в тупик, и не знаю как дальше сдвинуть эти теги с комментарием, что бы как в образце, уже все перепробовал, что смог придумать.
Подскажите пожалуйста, неужели правда нельзя сделать как в образце, если у .post не делаю отступ сразу на 75 пикселей и делю .post-stats на два блока? Просто мне интуитивно удобнее почему то делать отступ потом, вероятно из-за недостатка опыта, но хочу понять, как сделать, если все же моим способом.

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

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

.post {
    position: relative;
}

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

.post-date {
    position: absolute;
    width: 55px;
    height: 55px;
    background: #ffffff;
    font-size: 15px;
    font-weight: bold;
    border-bottom: 5px solid #bdc3c7;
    vertical-align: middle;
    text-align:center;
    line-height: 55px;
    top: 0px;
}
    
.post-type {
    position: absolute;
    width: 55px;
    height: 55px;
    background: #7f8c8d;
    border-bottom: 5px solid #bdc3c7;
    background-image: url("/assets/course14/quotes.png");
    background-repeat: no-repeat;
    background-position: 50% 50%;
    top: 70px;
}

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

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

.post-stats1 {
    margin-top: 5px;
    margin-left: 75px;
    display: inline-block;
}

.post-stats2 {
    margin-top: 5px;
    margin-left: 10px;
    display: inline-block;
}

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

.icon-tags {
    background-position: 0 0;
}

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

.post-text {
    width: 165px;
    min-height: 90px;
    background-color: #ffffff;
    border-bottom: 5px solid #bdc3c7;
    padding: 10px 15px;
    margin-left: 75px;
}

Ineska · 24.Октябрь.2017 17:37:43

.icon должны быть позиционированы.

vladbakumenko · 25.Октябрь.2017 13:10:15

Спасибо! Вы ещё раз помогли.
Но…) 99% в итоге, уж не знаю я, что делать с этой заковыристой запятой между тегами, так и не придумал в итоге как быть, увы.
Получается, что все таки подобным способ на 100% сделать невозможно? (Или просто ещё есть над чем подумать?)
А вот и сам код:

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

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

.post {
    position: relative;
}

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

.post-date {
    position: absolute;
    width: 55px;
    height: 55px;
    background: #ffffff;
    font-size: 15px;
    font-weight: bold;
    border-bottom: 5px solid #bdc3c7;
    vertical-align: middle;
    text-align:center;
    line-height: 55px;
    top: 0px;
}
    
.post-type {
    position: absolute;
    width: 55px;
    height: 55px;
    background: #7f8c8d;
    border-bottom: 5px solid #bdc3c7;
    background-image: url("/assets/course14/quotes.png");
    background-repeat: no-repeat;
    background-position: 50% 50%;
    top: 70px;
}

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

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

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

.post-stats1 {
    margin-top: 5px;
    margin-left: 75px;
}

.post-stats2 {
    margin-top: 5px;
    margin-left: 30px;
}

.post-stats a {
    position: relative;
    left: 20px;
}

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

.icon-tags {
    background-position: 0 0;
}

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

.post-text {
    width: 165px;
    min-height: 90px;
    background-color: #ffffff;
    border-bottom: 5px solid #bdc3c7;
    padding: 10px 15px;
    margin-left: 75px;
}

Ineska · 25.Октябрь.2017 19:04:13

Попробуйте заменить координату на padding-left для .post-stats.

vladbakumenko · 26.Октябрь.2017 18:16:57

да, запятая встаёт на место, но тогда получается что тег: “программа” вместе с количеством комментариев “5” так же попадает под внутренний отступ и сдвигаются влево на 20 пикселей, а вернуть обратно у меня не получилось, даже если делал first-child для первой ссылке, то есть тега “курсы” padding-left, и с помощью nth-child(2) пытался убрать отступ у тега “программа”, что бы его вернуть на место, тоже не получилось.
В итоге я не знаю как быть с этой запятой, не меняя html код.

Ineska · 26.Октябрь.2017 18:31:35

Если я правильно поняла, вы внутренний отступ добавляете ссылке. Так?

vladbakumenko · 28.Октябрь.2017 14:11:02

да, если добавлять ссылке, то запятая встаёт на место.
но если добавлять padding в место margin в post-stats1 и post-stats2 то ничего не меняется.

vladbakumenko · 29.Октябрь.2017 13:13:41

в общем вот, что-то я тупил, ведь все гораздо проще.

.post {
    position: relative;
}

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

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

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

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

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

.post-stats .icon {
    width: 15px;
    height: 15px;
    position: absolute;
    left: -20px;
}

.post-stats {
    position: relative;
    display: inline-block;
    left: 95px;
    margin-right: 30px;
}

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

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

.post-text {
    margin-left: 75px;
    width: 165px;
    padding: 10px 15px;
    border-bottom: 5px solid #bdc3c7;
    background: #ffffff;
    min-height: 95px;
}

Ineska · 29.Октябрь.2017 14:14:47

Такое не очень хорошо, а в целом код уже лучше смотрится.

vladbakumenko · 29.Октябрь.2017 14:26:45

да, в идеале сразу для post писать отступ, но как я и говорил, почему то интуитивнее пока так понятнее, поэтому хотелось сделать так, но спасибо огромное за ответы, это важно!

Alexander_Getstein · 29.Октябрь.2017 20:18:58

Лебединая песня халявного курса. Ппц просто. Убил на это дело час и понял почему программисты сами не любят вёрстку. А заодно и то, почему жанры пиксельхантинговых адвенчур и головоломок нынче в упадке, бгг

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 a {
  text-decoration: none;
  color: #2980b9;
}

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

.post-date,
.post-type{
  position: absolute;
  left: 0;
  width: 55px;
  height: 55px;
  border-bottom: 5px solid #bdc3c7;
}

.post-date{
    top: 0;
    font-size: 15px;
    font-weight: bold;
    text-align: center;
    line-height: 55px;
    background: #ffffff;
}

.post-type {
  top: 70px;
  background: #7f8c8d url("https://htmlacademy.ru/assets/course14/quotes.png") no-repeat 50% 50%;
}

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

.post-stats {
  position: relative;
  line-height: 2;
  padding-left: 20px;
  margin-right: 10px;
}

.post-stats .icon {
  position: absolute;
  top: 5px;
  left: 0;
  width: 15px;
  height: 15px;
}

.post-stats .icon-tags {
  background: url("https://htmlacademy.ru/assets/course14/post-challenge.png") no-repeat 0 0;
}

.post-stats .icon-comments {
  background: url("https://htmlacademy.ru/assets/course14/post-challenge.png") no-repeat -20px 0;
}

.post-text {
  margin-top: -5px;
  width: 165px;
  min-height: 95px;
  padding: 10px 15px;
  border-bottom: 5px solid #bdc3c7;
  background-color: #ffffff;
}

Freeze_G · 21.Ноябрь.2017 13:16:42

То-есть, вы вообще флоат не используете? По моему использование флоатирования будет более эффективно и код будет смотреться адекватнее или я ошибаюсь?