1 [18/18] Испытание: анонс поста - 94% Прошу помощи

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Испытание: анонс поста</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="post">
      <div class="post-title">Интенсив: программа</div>
      <div class="post-date">13.09</div>
      <div class="post-type"></div>
      <div class="post-author">
        Автор: <a href="#">HTML Academy</a>
      </div>
      <div class="post-stats">
        <div class="icon icon-tags"></div>
        <a href="#">интенсив</a>,
        <a href="#">программа</a>
      </div>
      <div class="post-stats">
        <div class="icon icon-comments"></div>
        <a href="#">5</a>
      </div>
      <div class="post-text">Работа над интенсивом идёт полным ходом. Мы нашли крутых людей в команду и решили ещё кучу задач. Но сегодня я подробнее расскажу о работе над программой интенсива.</div>
    </div>
  </body>
</html>

html,
body {
margin: 0;
padding: 0;
}

body {
width: 280px;
min-height: 250px;
padding-top: 50px;
padding-right: 10px;
padding-left: 10px;

font-size: 12px;
line-height: 1.2;
font-family: “Arial”, sans-serif;
color: #7f8c8d;

background-color: #ecf0f1;
}

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

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

.post {
position: relative;
padding-left: 75px;
}

.post-title {
display: inline-block;
font-size: 20px;
color: #2980b9;
}

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

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

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

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

.post-stats {
position: relative;
display: inline-block;
margin-top: 5px;
}

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

.icon {
display: inline-block;
vertical-align: middle;
}

.icon-tags {
background: url(“post-challenge.png”);
background-position: 0 0;
}

.icon-comments {
margin-left: 10px;
background: url(“post-challenge.png”);
background-position: 20px 0;
}

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

Иконки тоже сделайте позиционированными абсолютно.
.post-stats подравняйте отступами, иконки координатами.

Valery_S здравствуйте. Помогите пожалуйста. В чем ошибка? Третий день не могу решить. Спасибо.

html,

body {
margin: 0;
padding: 0;
}

body {
width: 280px;
min-height: 250px;
padding-top: 50px;
padding-right: 10px;
padding-left: 10px;

font-size: 12px;
line-height: 1.2;
font-family: “Arial”, sans-serif;
color: #7f8c8d;

background-color: #ecf0f1;
}

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

/*
Все размеры, отступы, координаты, размеры шрифтов (не заданные в body) кратны 5 или 10.
Адреса картинок:
quotes.png
post-challenge.png
Картинка «кавычки» выровнена по центру
*/
.post-title {
font-size:20px;
color:#2980b9;
margin-bottom:5px;
}
.post a {
color:#2980b9;
text-decoration:none;

}
.post-text {
background-color:#ffffff;
width:165px;
padding:10px 15px;
border-bottom:5px solid #bdc3c7;
}
.post-stats .icon-tags {
background-image:url(“post-challenge.png”)
}
.post-stats .icon-comments+a {
margin-left:10px;

}

.post-stats {
display:inline-block;
position:relative;
margin-top:5px;
vertical-align:bottom;
padding-left:20px;
}
.post-stats .icon-tags {
position:absolute;
left:0px;
}
.post-stats .icon-comments {
background-image:url(“post-challenge.png”);
position:absolute;
background-position:20px;
left:10px;
bottom:0px;
}
.post {
margin-left:75px;
position:relative;
}
.post-date {
text-align:center;
position:absolute;
top:0px;
left:-75px;
background-color:#ffffff;
width:55px;
height:25px;
border-bottom:5px solid #bdc3c7;
font-size:15px;
font-weight:bold;
padding:15px 0px;
}
.post .post-type {
position:absolute;
width:55px;
padding:20px 0px;
background-image:url(“quotes.png”);
background-repeat:no-repeat;
background-color:#7f8c8d;
border-bottom:5px solid #bdc3c7;
top:70px;
left:-75px;
background-position:50% 50%;
height:15px;
}

Исправить можно так:

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

.post-stats .icon-comments {
background-image:url(“post-challenge.png”);
position:absolute;
background-position:20px 0;
left:10px;
bottom:0px;
}

Но, лучше переписать заново.
Как-то, всё запутанно у Вас получилось…


Согласитесь, когда свойства сгруппированы – правило проще читать:

.post .post-type {
  position: absolute;
  width: 55px;
  height: 15px;
  top:70px;
  left:-75px;
  padding: 20px 0;
  background: #7f8c8d url("quotes.png") no-repeat 50% 50% ;
  border-bottom: 5px solid #bdc3c7;
}

…а, здесь приходится разбираться…

.post .post-type {
  position:absolute;
  width:55px;
  padding:20px 0px;
  background-image:url("quotes.png");
  background-repeat:no-repeat;
  background-color:#7f8c8d;
  border-bottom:5px solid #bdc3c7;
  top:70px;
  left:-75px;
  background-position:50% 50%;
  height:15px;
}

Один из вариантов
html,
body {
	margin: 0;
	padding: 0;
}

body {
	width: 280px;
	min-height: 250px;
	padding: 50px 10px;
	font-size: 12px;
	font-family: "Arial", sans-serif;
	line-height: 1.2;
	color: #7f8c8d;
	background: #ecf0f1;
}

.post {
	position: relative;
	padding-left: 75px;
}

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

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

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

.post .post-author{
    margin: 5px 0;
}

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

.post .post-stats{
	display: inline-block;
	position: relative;
	vertical-align: top;
	padding-left: 20px;
	margin-right: 10px;
}

.post-stats .icon {
	position: absolute;
	width: 15px;
	height: 15px;
	background: url("post-challenge.png") no-repeat;
}

.post-stats .icon-tags{
	left: 0;
	top: 0;
	background-position: 0 0;
}

.post-stats .icon-comments{
	left: 0;
	top: 0;
	background-position: -20px 0;
}

.post .post-text{
	width: 165px;
	padding: 10px 15px;
	background-color: #fff;
	border-bottom: 5px solid #bdc3c7;
}

Координаты общие для двух иконок.

Знаю.
Решил оставить пока так. Если бы иконок было больше, или больше свойств – общие свойства вынес бы.
А так кода больше не стало, зато нагляднее…

Но ведь правило для общих свойств уже есть - .post-stats .icon { … }

Да, действительно… в упор не заметил.
Тогда, можно пойти дальше, и вынести ещё больше:

для иконок
.post-stats .icon {
	position: absolute;
	width: 15px;
	height: 15px;
	left: 0;
	top: 0;
	background: url("post-challenge.png") no-repeat;
	background-position-y: 0;
}

.post-stats .icon-tags{
	background-position-x: 0;
}

.post-stats .icon-comments{
	background-position-x: -20px;
}
1 лайк

мне бы ваши знания. )