Испытание: анонс поста (Мастерская: декоративные элементы)

Добрый день.

Не могу на 100% пройти испытание: http://htmlacademy.ru/courses/55/run/18

Скиньте, пожалуйста, грамотный код, без вмешательства в html-код, без флоатов и прочих читов. Хочу увидеть правильный(!) код.

Или поправьте мой код, вот до чего дошел я: http://codepen.io/IgorG/pen/cfdvu

Проблема тут: http://screencast.com/t/vfonsQhjv3F - иконки и ссылки у меня не складываются нормально.

Немного модифицировал ваш код. Спозиционировал иконки абсюлютно, чтобы они не влияли на высоту строки.

Спасибо огромное!

ув. админы прокомментируйте насколько правильный код, и как можно сделать лучше\проще. Спасибо!
что-то мне подсказывает, что это не лучший вариант :slight_smile: (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 {
 position:relative;
}

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

.post-title {
position:relative;
 font-size:20px;
 color:#2980b9;
 left:75px;
 top:0px;
}

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

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

a {
    text-decoration:none;
}

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

.post-stats {
    display:inline-block;
    position:relative;
    left:75px;
    top:-5px;
    padding-right:30px;
    
} 

.post-stats  a {
position:relative;
left:20px;
text-decoration:none;
color:#2980b9;
}

.post-stats .icon{
    width:15px;
    height:15px;
}

.icon-tags{
background:url('http://htmlacademy.ru/assets/course14/post-challenge.png') no-repeat 0 0;
position:relative;
top:15px;
}

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

.post-text {
 position:relative;
    left:75px;
    top:15px;
    width:170px;
    background-color:white;
    padding:10px 20px 10px 15px;
border-bottom:5px solid #bdc3c7;
}

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

Недостаток вашего варианта — блоки накладываются друг на друга.
Попробуйте визуально выделить блоки на странице:

* {
    outline: 1px solid #000;
}

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

Более правильный вариант я приводил ранее в этой теме.

Даже и не думал, что мне придётся сюда писать. Но так сложились “карты”…
Однако вот КОД
Таки перфекционизма Я добился, однако использовал inline и внутренний левый отступ для иконок = ширине иконки + отступ до ссылки (15+5 = 20).

Если я правильно понял - необходимо использовать строчно-блочное элементы: для иконок перед ссылками, так и для самих ссылок. Но парадокс, я не могу поймать эти 1-2 пикселя, что добавляются по высоте. и в таком случае не получается сделать так, чтобы было все кратно 5. Отступы только в 7-9 встают нормально.

Буду благодарен тому, кто сможет пояснить как в таком случае бороться с этими пару пикселями в высоте, если используется display:inline-block :smile:

В оригинальном решении иконки просто спозиционированы абсолютно, чтобы не влиять на отступы. =)

фу-фу-фу) абсолют) не надо нам их)))

Это я к тому, что решения с инлайн-блоками и кратностью 5 может и не быть =)

1 лайк

Так и быть, (okeyface)

Спасибо за помощь, коллеги.

Всем привет. Подскажите кто может. Видимо глаз уже совсем замылился. Задание выполнено на 99%. Все корректно, но не отображается иконка для комментариев. Что за ошибка в использовании спрайта. Убился искать ошибку в коде. 3 часа, так и не нашел.
Вот код: https://jsfiddle.net/Lfh3gshm/

Вариант1: убери пробелы в указанных местах

Вариант 2: исправь указанные селекторы так:
неправильно: .post-stats .icon .icon-tags { }
правильно: .post-stats .icon-tags { }
неправльно: .post-stats .icon .icon-comments { }
правильно: .post-stats .icon .icon-comments { }

Все дело в том что ты написал неправильные селекторы.
Пробел между селекторами означает, что первый является родителем второму. Например когда так:
< div class=“icon” >
< div class=“icon-comments” >< /div >
< /div >

В твоем случае, даже если ты хочешь указать оба класса у одного и того же элемента, то указывай их без пробела, например такие варианты:

div.icon { }
div.icon-comments { }
.icon.icon-comments { }
div.icon.icon-comments { }

Именно тут такие селекторы писать необязательно. Я продемонстрировал правильные варианты.

И пользуйся файербагом. Тут видно что картинка твоя не та, что ты хочешь:

  1. я указал выбранный элемент
  2. там ты задал background-position:-20px 0;
  3. смотри, как браузер понимает твой код. Он понимает его как background-position: 0 0;
2 лайка

О, спасибо тебе Игорь!
И особая благодарность за оперативность и развернутость ответа.
Дай Бог тебе здоровья и неиссякаемого творческого вдохновения!

P.S.: видимо, у меня в голове начинается переизбыток информации, и, как следствие, её неусвояемость. :smile:

1 лайк

Я проходил все эти курсы по порядку 2 раза полностью и несколько отдельных разделов я проходил точечно, иногда по несколько раз. Я не самый способный студент, как и многие другие люди, но я упорствую и не мирюсь, когда не усвоил что-то.

За один-два прохождения часто не удается полностью усвоить материал. Бывает что понял, выучил, но не усвоил. Применить знания в таком случае тяжело.

Помогает как всегда: проходить снова и снова и конечно же практика снова и снова

Спасибо за пожелания.

Удачи!

2 лайка

Добрый день!
Прошу помощи, как обычно )))

    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-title{
    position:absolute;
    top:50px;
    left:85px;
    color:#2980b9;
    font-size:20px;
    margin-right:5px;
}

.post-date{
    background:#ffffff;
    width:40px;
    font-weight:bold;
    font-size:15px;
    padding:18px 5px 18px 10px;
    border-bottom: 5px solid #bdc3c7;
}
.post .post-type{
    position:absolute;
    top:70px;
    left:85px;
}

Почему не реагирует на селекторы див с классом post-type?

Где хтмл код?

А с чего взял, что не реагирует? Там же пустой div, фон и ширину не задавал, а позиционирование работает, инспектором можно проверить.

Так блок не подвинулся, на скрине видно.

Всё, понял. “Шарик, ты балбес” кот Матроскин Со.