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


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

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


Мастерская: декоративные элементы / Испытание: анонс поста [18/18]
#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

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


#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

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


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

#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 в пикселях, величиной в высоту блока.


#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 ;

#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]