18/18 Непокоренный .post-stats.

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

Здравствуйте. Помогите пожалуйста поставить элементы с классом post-stats на свое место. .post-title,
.post-author, .post-text сдвинул, чтобы не мешали.

`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-title {
font-size: 20px;
color: #2980b9;
}

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

.post-type {
background: url("/assets/course14/quotes.png") no-repeat 15px 15px;
width: 55px;
height: 55px;
line-height: 55px;
background-color: #7f8c8d;
border-bottom: 5px solid #bdc3c7;
margin-top: 10px;
}

.post-author{
top: 80px;
}

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

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

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

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

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

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

.post-title,
.post-author,
.post-text {
position: absolute;
left: 285px; /left: 85px;/
}
`

2

Посмотрите эту тему.

3

Спасибо большое. Подправил до 99%. Наложение почему-то ругается на запятую между словами интенсив и программа. У меня несколько вопросов:

  1. У Вас в коде из последнего сообщения в теме перед свойством .icon не указано свойство .post. Соблюдается ли в этом случае принцип задания “пространства имен” для селекторов, о котором говорилось в интерактивном курсе ? Насколько важно соблюдать это принцип ?
  2. Нужно ли ставить пробел перед фигурной скобкой в CSS или это дело личного стиля/почерка при написании кода ?
  3. Если родитель имеет относительное позиционирование, то точка отчета у дочернего относительного и абсолютного элемента одинаковая и начинается относительно родителя ? Абсолютное позиционирование в этом случае отличается только тем, что при нем дочерний блок как-бы выпадает из стека и на него наезжают остальные блоки ?
4

99% потому что позиционировали ссылки в блоках post-stats, а надо сами блоки.

  1. В данном случае, можно и просто .icon, потому что в задании такой класс больше нигде не используется. При создании целой страницы лучше соблюдать принцип, т. е. дописывать родитель, потому что иконка на странице может быть не только в посте, а еще где-то.
  2. Личное дело каждого. Но лучше писать со всеми пробелами и переносами, чтобы потом не переучиваться, если идеальное форматирование будет обязательным условием.
  3. Немного не так. Если у дочернего элемента относительное позиционирование, то точкой отсчета у него получается место, определенное потоком документа. И родительский position: relative; на него никак не влияет.
5

Благодарю Вас за подробнейший ответ. Ссылки не позиционировал. Но все равно набрал 100%. Оказалось что на макете эталона запятая другого цвета. По поводу оформления кода нашел правила оформления CSS и HTML кода. Я думаю было бы правильно включить что-нибудь подобное в самое начало курса. По поводу отличия absolute от relative на пальцах нашел хорошую статью, может кому-то пригодится: http://totsamiyshigaev.livejournal.com/100545.html. Ну и понял что в общем для наработки навыка верстки, когда кончатся интерактивные курсы, полезно будет порешать чужие ошибки. Спасибо форуму и его создателям.

6

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