Испытание 18/18 100% Вопрос

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

Вобщем вот, что вышло, наконец-то могу выдохнуть. Спасибо всем за направления моих действий)
Инеска, прокомментируйте, пожалуйста этот вариант кода, в html коде добавил только 1 перенос строки после “подробнее”.
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 {
width: 15px;
height: 15px;
position: absolute;
}
.post .post-stats {
display: inline-block;
position: relative;
left: 65px;
padding-left: 30px;
top: 0px;

}
.post .post-stats a:first-child {
margin-left:40px;
}

.post .post-text {
width: 180px;
height: 93px;
background-color: #ffffff;
border-bottom: 5px solid #bdc3c7;
padding: 10px 0px 15px 15px;
margin-left: 75px;
}
.post .post-author {
margin-left: 75px;
margin-top: 5px;
margin-bottom: 5px;

}
.post a {
text-decoration: none;
color: #2980b9;
}
.post .post-title {
font-size: 20px;
margin-left: 75px;
white-space: nowrap;
color: #2980b9;
}
.post .post-date {
position: absolute;
top: 50px;
width: 55px;
height: 35px;
background: #ffffff;
border-bottom: 5px solid #bdc3c7;
color: #7f8c8d;
font-size: 15px;
font-weight: bold;
text-align: center;
padding-top: 20px;
line-height: 1.1;
}
.post .post-type {
position: absolute;
top: 120px;
width: 55px;
height: 55px;
background: url("/assets/course14/quotes.png") no-repeat 50% #7f8c8d;
border-bottom: 5px solid #bdc3c7;
}
.post .post-stats .icon-tags {
background: url("/assets/course14/post-challenge.png") no-repeat 0 0;
position: absolute;
left: 10px;
}
.post .post-stats .icon-comments {
background: url("/assets/course14/post-challenge.png") no-repeat 80% 0;
position: absolute;
left: 10px;
top: 0px;
}

22

Что сказать… Рано выдыхаете…) Столько всего полезного сказал @Alexey_Ivanov, и половину вы пропустили. Где padding-left: 75px; для .post? Почему для .post-text ограничена высота?
А здесь почему отступ разделили именно так, 65 и 30?

Это правило не знаю для чего нужно:

Про br лучше промолчу.
Человек так старался донести идею с отступом…
В общем, с учетом того, что вам и так помогали, это плохо. Надо переделать.

1 лайк
23

То правило с first-child не сработало, просто не удалил.
.post .post-text {
width: 180px;
background-color: #ffffff;
border-bottom: 5px solid #bdc3c7;
padding: 10px 0px 10px 15px;
margin-left: 75px;
Это исправил, спасибо!)
А там разделил, потому что паддинг 30 нужен для того чтоб “5” сдвинуть на нужное расстояние, а отступ внешний 65 сдвинул мне весь блок
Когда применил совет Алексея, то у меня просто все содержимое сдвинулось, а суть не поменялась.

24

Поменялась бы суть. Код стал бы короче и чище. И не было бы никаких 65 и 30.
Сделайте вариант по совету Алексея, потом сравним.

25

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-stats .icon {
width: 15px;
height: 15px;
position: absolute;
}
.post .post-stats {
display: inline-block;
position: relative;
padding-left: 30px;
top: 0px;
right: 10px;
}

.post .post-text {
width: 180px;
background-color: #ffffff;
border-bottom: 5px solid #bdc3c7;
padding: 10px 0px 10px 15px;
}
.post .post-author {
margin: 5px 0px 5px 0px;

}
.post a {
text-decoration: none;
color: #2980b9;
}
.post .post-title {
font-size: 20px;
white-space: nowrap;
color: #2980b9;
}
.post .post-date {
position: absolute;
top: 0px;
left: 0px;
width: 55px;
height: 35px;
background: #ffffff;
border-bottom: 5px solid #bdc3c7;
color: #7f8c8d;
font-size: 15px;
font-weight: bold;
text-align: center;
padding-top: 20px;
line-height: 1.1;
}
.post .post-type {
position: absolute;
left: 0px;
top: 70px;
width: 55px;
height: 55px;
background: url("/assets/course14/quotes.png") no-repeat 50% #7f8c8d;
border-bottom: 5px solid #bdc3c7;
}
.post .post-stats .icon-tags {
background: url("/assets/course14/post-challenge.png") no-repeat 0 0;
position: absolute;
left: 10px;
}
.post .post-stats .icon-comments {
background: url("/assets/course14/post-challenge.png") no-repeat 80% 0;
position: absolute;
left: 10px;
}
Вобщем вышло вот так, но я чувствую, что все-равно что-то не то)
А почему кстати
без коммента, какой есть способ без него обойтись, и чтобы это было правильнее?

26

А что не так по-вашему? (интересно мне)
На br внимания не обращайте, разница в переносе слов при проверке не отображается.

27

Ну вот вы написали, а паддинг 30 все-равно пришлось мне оставить, видимо я опять что-то не то сделал?

28

Обычно в этом задании писали padding-left: 20px; и margin-right: 10px;
У вас по-другому. Не совсем правильно, да. Получается, что двигаете то вправо на 10px, то потом влево (для иконок). Можете исправить.

29

Спасибо) теперь со спокойной душой можно продолжать дальше)

1 лайк
30

Привет! Бывают такие задания, которые, ну, никак не идут. У меня так было с селекторами в бесплатной части: я смог выполнить это задание только спустя значительное время! Поэтому могу посоветовать пока вообще оставить то, над чем Вы бьётесь: вот просто отложите и не думайте про него, забудьте. А затем, спустя время, а может быть, и несколько недель и даже месяцев, вернётесь. И сами удивитесь, как всё получится, и, главное, хорошо!

1 лайк
31

Кто-нибудь может объяснить, почему у меня текст у слов “интенсив, программа” и “5” съёживается?

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 {
width: 15px;
height: 15px;
}

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

.post {
position: relative;
}

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

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

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

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

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

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

.post .post-stats {
margin-left: 75px;
display: inline-block;
position: relative;
margin-top: 1px;
left: 2px;
}

.post .icon {
width: 15px;
height: 15px;
display: inline-block;
position: relative;
top: 4px;
left: -2px;
background: url(’/assets/course14/post-challenge.png’) no-repeat;
}

.post .icon-comments {
margin-left: 14px;
background-position: -20px 0;
display: inline-block;
}

.post .post-comments {
display: inline-block;
}

32

Не помню такого класса в коде. HTML меняли?

33

Да - не понял, каким образом можно два дива с одинаковыми классами позиционировать друг за другом.

34

Обоим задать inline-block.

35

В данном случае больше смущала необходимость задавать им отступы. Впрочем я уже понял, что там предполагалось задание общего отступа для .post.

Но я абсолютно не понимаю, как вообще это возможно, что изменился шрифт элемента.

36

Изменился? Можете продемонстрировать?

37

Просто вставьте тот код, что я скинул, и посмотрите в блоке где красным подсвечиваются отличия. Сейчас вот уже часа полтора пытаюсь успокоиться после того, как с 8 вечера пытался что-то с этим шрифтом сделать =)))

38

Такой же там шрифт. Отдохните. Перетрудились, наверное)

39

Если Вы про font-size, то да, такой же. Но сервер ругается на то, что буквы по-другому стоят. Такое ощущение, что они то ли заданы не целым числом (типа 12.2px), то ли межбуквенный интервал какой-то левый… В общем, у меня было 99% чисто из-за этих слов, пока не переделал все заново.

Ну да ладно, фиг с ним =) Сделал и ладушки. Просто хотел понять, из-за чего такой косяк со шрифтом может быть - я вообще всё, что можно, с ним делал, чтобы исправить - ноль реакции.

40

Не могу воссоздать проблему) У меня она не отображается.