[18/18] Испытание: анонс поста - 100% и пошаговое решение

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

Итак. Первым делом всегда внимательно анализируем HTML код, в уме прикидываем все элементы - что есть что. Смотрим на макет. Для начала я решаю оформить два блока слева - календарик с датой, и значок цитаты. Эти элементы будут абсолютно-спозиционированными, поэтому выпадут из потока.

Значит, все остальные элементы макета - тайтл, автора, ссылки и основной текст необходимо отодвинуть вправо. Также, задаём всему посту относительное позиционирование.

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

Календарик. Задаём ему абсолютное позиционирование, координаты, задаём ширину, высоту, фон, нижнюю рамку, размер шрифта, его начертание, выравнивание по центру, и высоту строки, равную высоте самого блока.

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

Похожий блок цитаты. Также задаём абсолютное позиционирование, координаты, ширину, высоту, нижнюю рамку, фон, картинку и её расположение.

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

Теперь идём по-порядку. Начнём с тайтла. Зададим ему размер, цвет текста, и нижний маргин.

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

Убираем у ссылок подчёркивание и задаём другой цвет.

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

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

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

Дальше идут сами иконки. Им уже задана ширина и высота 15рх. Нам же нужно будет задать им абсолютное позиционирование, и координаты. При этом они выпадают из потока, и неприятный отступ пропадает, а ссылочки подтягиваются выше - на то место, где расположены иконки(их не видно, пока не прописан путь).

.post-stats .icon {
    position: absolute;
    top: 0;
    left: 0;
    width: 15px;
    height: 15px;
}

Прописываем адреса иконок.

.icon-tags {
    background: url("/assets/course14/post-challenge.png") no-repeat 0 0;
}

.icon-comments {
    background: url("/assets/course14/post-challenge.png") no-repeat -20px 0;
}

Последний шаг - оформить саму цитату, основной текст. Задаём ширину блока, цвет фона, паддинги, и нижнюю границу.

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

Поздравляю, задание выполнено на 100%.

Можно немного убрать дублирующий код, а именно вынести под общее правило ширину, высоту и нижнюю границу для двух левых блоков:

.post-date,
.post-type {
    width: 55px;
    height: 55px;
    border-bottom: 5px solid #bdc3c7;
}

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

26 лайков
2

Зашел на форум что-бы сравнить варианты как делают другие люди это задание))
почти один в один)))

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

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

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

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

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

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

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

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

.post-stats .icon-tags {
    top: 0;
    left: 0;
    background: url(/assets/course14/post-challenge.png) no-repeat 0 0;
}

.post-stats .icon-comments {
    top: 0;
    left: 0;
    background: url(/assets/course14/post-challenge.png) no-repeat -20px 0;
}

.post .post-text {
    padding: 10px 15px;
    width: 165px;
    background: #ffffff;
    border-bottom: 5px solid #bdc3c7;
}
3 лайка
3

Координаты не вынесли в правило для .icon.

1 лайк
4

немного исправил насчет .icon

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

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

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

Это хорошо, но координаты так и не вынесли.

1 лайк
6

понял, спасибо.

.post-stats .icon{
    position: absolute;
    width:15px;
    height: 15px;
    background: url(/assets/course14/post-challenge.png) no-repeat;
    top: 0;
    left: 0;
}

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

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

доброго времени суток
как отцентрировать дату в картинке(календарик) не прибегая к редактированию html
делаю вот так

.post .post-date {
font-size: 15px;
font-weight: bold;
text-align: center;
position: absolute;
top: 50px;
left: 10px;
width: 55px;
height: 55px;
background: white;
vertical-align: middle;
border-bottom: 5px solid #bdc3c7;}
8

С помощью line-height в пикселях, величиной в высоту блока.

4 лайка
9

С точки зрения нагрузки на сеть вот этот блок “не очень” у Вас. Представьте ситуацию, что у Вас трафарет с сотней иконок и для каждой из иконок приходиться загружать весь рисунок. Лучше в родителе единожды загрузить трафарет, а в потомках его позиционировать:

.post-stats .icon {
    position: absolute;
    left: 0;
    top: 0;
    width: 15px;
    height: 15px;
    background: url(/assets/course14/post-challenge.png) no-repeat;
}

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

.post-stats .icon-comments {
    background-position: -20px 0 ;
2 лайка
10

У меня текст залез под спрайты , как их отодвинуть друг от друга?

11

Вы не первый день на форуме уже. Код текстом, пожалуйста.

12 
.post {
 position:relative;   
}
.post-stats .icon {
width: 15px;
height: 15px;
}
.post-title {
 color: #2980b9;   
 font-size: 20px;
 margin-left: 75px;
 margin-bottom: 5px;
}
.post-author {
 margin-left: 75px;
  margin-bottom: 5px;
}
.post-author a{
  text-decoration: none;
  color:#2980b9;
}
.post-stats a{
  text-decoration: none;
  color:#2980b9;   
}
.post-text {
 width: 170px;
 height: auto;
 background-color: #ffffff;
 border-bottom: 5px solid #bdc3c7;
 padding: 15px;
 margin-left: 75px; 

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


}
.post-type {
width: 55px;
height: 55px;
background: #7f8c8d url("/assets/course14/quotes.png") no-repeat 15px 15px;

border-bottom: 5px solid #bdc3c7;
}
.post-stats{
display: inline-block;
margin-left: 75px;   
 margin-right: -45px;
 position: relative;

}

.post-type{
position: absolute;
top: 70px;
left: 0px;
}
.icon-tags {
 position: absolute;
 background: url("/assets/course14/post-challenge.png") no-repeat;
}
.icon-comments {
position: absolute;
background: url("/assets/course14/post-challenge.png") no-repeat -20px 0px;

}
14 
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;
}

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

.post-date {
width:55px;
height: 55px;
border: none;
text-align: center;
vertical-align: middle;
line-height:55px;
font-size: 15px;
font-weight:bold;
background-color: #ffffff;
border-bottom:5px solid #bdc3c7;
position:absolute;
}
.post-type {
width:55px;
height: 55px;
border: none;
margin-top:10px;
background-color: #7f8c8d;
border-bottom:5px solid #bdc3c7;
background-image: url("/assets/course14/quotes.png");
background-position:50% 50%;
background-repeat:no-repeat;
position:absolute;
top:110px;
}
.post-author {
position:relative;
left:75px;
bottom:-29px;
color: #7f8c8d;
font-size: 12px;
}
.post-author a {
color:#2980b9;
text-decoration:none;
}

.post-stats {
position: relative;
top: 29px;
left:75px;
display: inline-block;
margin-top: 5px;
margin-right: 10px;
margin-left: 20px;

}
.post-stats .icon {
position: absolute;
left: -20px;
top: 0;
width: 15px;
height: 15px;
background: url(/assets/course14/post-challenge.png) no-repeat;
}

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

.post-stats .icon-comments {
background-position: -20px 0;
}
.post-stats a {
color:#2980b9;
text-decoration:none;

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

Прошу проверить, указать на ошибки, заранее спасибо.

15

Всё плохо, одно позиционирование повсюду.
Пример кода по ссылке: Мастерская: декоративные элементы / Испытание: анонс поста [18/18]

16

Спасибо! помогли!

17

Вот и мой код. Практически все одинаково. Единственно, я меньше использовал контекстных селекторов, т.к. у всех блоков уже уникальные для них классы, ну и вроде как соблюдается условия пространства имен. Сам код:
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;
}

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

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

.post-date,
.post-type {
    position: absolute;
    width: 55px;
    height: 55px;
    border-bottom: 5px solid #bdc3c7;
}

.post-date {
    top: 0;
    left: 0;
    line-height: 55px;
    text-align: center;
    font-size: 15px;
    font-weight: bold;
    background: #ffffff;
}

.post-type {
    top: 70px;
    left: 0;
    background: url("/assets/course14/quotes.png") #7f8c8d no-repeat 50% 50%;
}

.post-author {
    padding-bottom: 5px;
}

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

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

.post-stats .icon {
    position: absolute;
    top: 0;
    left: 0;
    background: url("/assets/course14/post-challenge.png") no-repeat;
}

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

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

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

Если что не правильно подскажите пожалуйста. Спасибо!!!

1 лайк
18

Всё правильно. Единственное, обратите внимание, что у вас получилось два правила для .icon.

19

Спасибо за Ваши ответы и советы. Просто правило уже было в условии, поэтому я его и не трогал, дописал свой код и все. Я еще не сильно во всем разбираюсь, полгода как начал изучать, поэтому очевидные вещи, которые профессионалам бросаются в глаза, я их не замечаю. Хорошо, что есть такие как Вы, которые нас направляют и указывают на наши ошибки. Еще раз спасибо!!!

20

вторая иконка отображается без смещения фона, почему-то, в таком исполнении. получаются дублированные dog-tags

21

Всем Доброго времени суток!
Прошел испытание, ниже прикладываю свое решение поставленной задачи, прошу посмотреть и оценить и указать на недостатки, они я думаю точно будут.

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;
    background:url("/assets/course14/post-challenge.png") no-repeat;
    position:absolute;
    left:-20px;
}
.post {
 position:relative;   
 padding:0px 10px 0 0;
 width:100%;
}
.post-title {
    display:inline;
    margin-left:20px;
    font-size:20px;
    color:#2980b9;
}
.post:after {
 display:table;
 content:"";
 clear:both;
}
.post-date {
 float:left;
 width:55px;
 height:55px;
 background:#ffffff;
 border-bottom:5px solid #bdc3c7;
 font-size:15px;
 font-weight:bolder;
 text-align:center;
 line-height:55px;
}
.post-author {
float:right;
margin-right:80px;
margin-top:5px;
margin-bottom:0px;
}
.post-author a {
 color:  #2980b9;
 text-decoration:none;
}
.post-author + .post-stats {
 margin-right:30px;
 margin-left:40px;
}
.post-stats {
 display:inline-block;
 margin-top:5px;
 position:relative;
}
.post-stats a {
 text-decoration:none;
 color:#2980b9;
}
.post-text {
 background:#ffffff;
 padding:10px 15px;
 text-align:left;
 width:165px;
 float:right;
 border-bottom:5px solid #bdc3c7;
 margin-right:10px;
}
.post-stats .icon-comments {
    background-position:-20px 0;
}
.post-type {
 width:55px;
 height:55px;
 background:url("/assets/course14/quotes.png") no-repeat center #7f8c8d;
 position:absolute;
 left:0px;
 top:70px;
 border-bottom:5px solid #bdc3c7;
}