Добрый день.
Не могу на 100% пройти испытание: http://htmlacademy.ru/courses/55/run/18
Скиньте, пожалуйста, грамотный код, без вмешательства в html-код, без флоатов и прочих читов. Хочу увидеть правильный(!) код.
Или поправьте мой код, вот до чего дошел я: http://codepen.io/IgorG/pen/cfdvu
Проблема тут: http://screencast.com/t/vfonsQhjv3F - иконки и ссылки у меня не складываются нормально.
Немного модифицировал ваш код. Спозиционировал иконки абсюлютно, чтобы они не влияли на высоту строки.
Спасибо огромное!
ув. админы прокомментируйте насколько правильный код, и как можно сделать лучше\проще. Спасибо!
что-то мне подсказывает, что это не лучший вариант 
(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 
В оригинальном решении иконки просто спозиционированы абсолютно, чтобы не влиять на отступы. =)
фу-фу-фу) абсолют) не надо нам их)))
Это я к тому, что решения с инлайн-блоками и кратностью 5 может и не быть =)
Так и быть, (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 { }
Именно тут такие селекторы писать необязательно. Я продемонстрировал правильные варианты.
И пользуйся файербагом. Тут видно что картинка твоя не та, что ты хочешь:
О, спасибо тебе Игорь!
И особая благодарность за оперативность и развернутость ответа.
Дай Бог тебе здоровья и неиссякаемого творческого вдохновения!
P.S.: видимо, у меня в голове начинается переизбыток информации, и, как следствие, её неусвояемость.
Я проходил все эти курсы по порядку 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, фон и ширину не задавал, а позиционирование работает, инспектором можно проверить.
Так блок не подвинулся, на скрине видно.
Всё, понял. “Шарик, ты балбес” кот Матроскин Со.