Испытание: анонс поста [18/18] 90%

5paun · 13.Август.2016 14:29:28

Помогите пожалуйста, уже мозг взрывается. Если можно, желательно с пояснениями.

`

Испытание: анонс поста

Интенсив: программа

13.09

Автор: HTML Academy

интенсив, программа

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{
position:relative;
}

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

.post .post-date{
font-size:15px;
font-weight:bold;
position:absolute;
margin-top:18px;
margin-left:9px;
z-index:2;
margin-bottom:
}

.post .post-type{
width:55px;
height:55px;
background-color:#fff;
border-bottom:5px solid #bdc3c7;
position:absolute;

}

.post .post-author{
padding-left:75px;
padding-top:30px;
margin-bottom:4px;

}

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

}

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

.post-stats{
margin-left:95px;
position:absolute;

}

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

margin-left:-20px;

}

.post-stats .icon{
position:absolute;
}

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

left:130px;

}

.post .post-text{
border-bottom:5px solid #bdc3c7;
width:170px;
margin-left:75px;
padding:10px;
background-color:#fff;
margin-top:20px;

}

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

Ineska · 13.Август.2016 18:47:46

Оу, что-то вы не очень постарались. Обычно трудности возникают с выравниванием ссылок в .post-stats.
.post-date и .post-type вполне можете осилить, если вспомните о координате top для абсолютного позиционирования и зададите фоновое изображение кавычек. Блок с текстом в принципе выровнять думаю тоже сможете.
А дальше будем разбираться вместе.

5paun · 14.Август.2016 15:27:54

Можете пожалуйста подсказать, где именно надо применить top ? И не намудрил ли я чего лишнего. Мне кажется, что я тут уже чего-то не того написал и чтобы всё решить, надо для начала удалить весь мусор)

5paun · 14.Август.2016 15:32:13

я даже z-index применил, т.к. у меня цифры прятались под фоном, хотя сомневаюсь, что он тут уместен. В заданиях же по этой теме он вообще не применялся. Хотя может это даже к лучшему, типа креативное мышление)) Главное решить задачу, путей-то может быть много:)

Ineska · 14.Август.2016 15:34:57

top для .post-type.

5paun · 14.Август.2016 16:25:38

немного не понимаю, для чего там координата top, если блог у меня находится на положенном месте итак

Ineska · 14.Август.2016 16:33:10

Может код поменялся? Можно ваш вариант еще раз текстом?

5paun · 14.Август.2016 16:34:40

Пожалуйста:) И что скажете про z-index ? Уместен он здесь или я только всё усложнил ?

`

Испытание: анонс поста

Интенсив: программа

13.09

Автор: HTML Academy

интенсив, программа

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{
position:relative;
}

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

.post .post-date{
font-size:15px;
font-weight:bold;
position:absolute;
margin-top:18px;
margin-left:9px;
z-index:2;
color:#7f8c8d;
margin-bottom:;
}

.post .post-type{
width:55px;
height:55px;
background-color:#fff;
border-bottom:5px solid #bdc3c7;
position:absolute;
top:0;

}

.post .post-author{
padding-left:75px;
padding-top:30px;
margin-bottom:4px;

}

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

}

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

}

.post-stats{
margin-left:95px;
position:absolute;

}

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

margin-left:-20px;

}

.post-stats .icon{
position:absolute;
}

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

left:130px;

}

.post .post-text{
border-bottom:5px solid #bdc3c7;
width:170px;
margin-left:75px;
padding:10px;
background-color:#fff;
margin-top:20px;

}

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

Ineska · 14.Август.2016 16:42:23

Вот так выглядит ваш вариант у меня:

5paun · 14.Август.2016 16:47:59

да, у меня тоже самое. Но ведь блок post-type, что вы написали, отвечает за белый квадрат, на котором расположены цифры и он как раз в порядке. Меня больше интересует, как переместить 5-ку(которая спряталась за словом “интенсив”) к картинке (спрайту). Потом, как сделать блок серый с картинкой кавычек. Ну и естественно всё выровнять.

5paun · 14.Август.2016 16:51:21

И кстати, ещё одна особенность, которую я не понимаю. Цифры 13.09 немного не совпадают с примером. У меня стоит margin-left:9px; Когда ставлю margin-left:8px, то становится тоже перебор. Ни туды, ни сюды. В идеале надо 8.5px. В чём подвох ?

Ineska · 14.Август.2016 16:52:32

Цифры по вертикали выравниваются с помощью line-height.

5paun · 14.Август.2016 16:59:32

Да, но у меня же всё отлично по вертикали при помощи маргинов. Разве ими нельзя выровнять ? И я имел ввиду про горизонталь. Там идёт несовпадение с примером в пол пикселя. Не понимаю, как это выровнять.

Ineska · 14.Август.2016 17:14:04

Текст по центру выравнивается с помощью text-align.
z-index вам понадобился, потому что два блока получились налеплены друг на друга и сверху оказался .post-type. Поэтому я повторяю в который раз, сдвиньте post-type с помощью координаты top вниз.

5paun · 14.Август.2016 17:39:23

Пока получилось только это)
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 .post-title{
font-size:20px;
color:#2980b9;
padding-left:75px;
position:absolute;
}

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

}

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

}

.post .post-author{
padding-left:75px;
padding-top:30px;
margin-bottom:5px;

}

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

}

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

}

.post-stats{
margin-left:95px;
position:absolute;

}

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

margin-left:-20px;

}

.post-stats .icon{
position:absolute;
}

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

left:130px;

}

.post .post-text{
border-bottom:5px solid #bdc3c7;
width:165px;
margin-left:75px;
padding:10px 15px;
background-color:#fff;
margin-top:20px;

}

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

Не получается отцентровать числа в квадрате через line-height. Всё-равно не хватает пикселей по вертикали. И я использовал line-height:4. А написано, что все размеры должны быть кратны 5-и. Но с 5 ещё хуже эффект. Также надпись Автор: HTML Academy выравнивается точно пор вертикали только со значением паддинга 29px. А это опять же не кратно 5-и.
Ну и самый главный вопрос с 5-ёркой. Как её сдвинуть ? У неё общий класс с другими словами. Перемещая её отступами сдвигаются также слова “интенсив” и “программа”. Я пробовал через last-child, вообще ничего не произошло. Что скажете ?)

Ineska · 14.Август.2016 17:49:02

Line-height может быть задано еще и в пикселях.
Post-title должно стоять на своем месте без абсолютного позиционирования.
Я помню ваши вопросы. но давайте будем последовательны.

5paun · 14.Август.2016 18:01:33

Я задал позиционирование post-title, т.к. все остальные элементы подтянулись к нему красиво. А теперь я не могу выставить на нужное место post-date. Получается только при помощи margin-top:-24px. Но это же неправильно

Ineska · 14.Август.2016 18:09:59

top: 0; для .post-date. Что там дальше?

5paun · 14.Август.2016 18:16:14

Видимо я сильно туплю, раз вы начали мне уже в открытую писать ответы))
Теперь обратно не попадает в пару пикселей текстовое поле. Ну и наша 5-ёрка. Кажется всё.

Ineska · 14.Август.2016 18:21:06

Давайте свой вариант текстом последний, а то я случайно уже до 100% дописала)