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

FaTaL · 18.Октябрь.2017 15:49:52

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

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

Alex_Say · 26.Октябрь.2017 16:58:32

доброго времени суток
как отцентрировать дату в картинке(календарик) не прибегая к редактированию 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;}

Ineska · 26.Октябрь.2017 17:17:07

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

Jess13 · 04.Декабрь.2017 15:14:36

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

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

Kate744 · 18.Декабрь.2017 10:52:22

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

Ineska · 18.Декабрь.2017 11:14:16

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

Kate744 · 18.Декабрь.2017 14:42:41

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

}

Yan · 06.Февраль.2018 21:10:05

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

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

Ineska · 15.Февраль.2018 16:31:21

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

Gantz · 23.Апрель.2018 13:06:48

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

Alexey42 · 13.Май.2018 18:12:16

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

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

Ineska · 13.Май.2018 19:42:14

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

Alexey42 · 14.Май.2018 09:35:59

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

Agdagath · 16.Май.2018 16:06:59

OMG:

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

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

Coder80lvl · 10.Июнь.2018 17:04:27

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

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

Coder80lvl · 10.Июнь.2018 18:01:08

Ну и затем следом переделал код под другое решение…Если не сложно, скажите, какое решение все-таки является более верным, или они оба имеют право на существование? код ниже:

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

Ineska · 10.Июнь.2018 19:09:19

Второй вариант лучше конечно, код чище гораздо.

Coder80lvl · 11.Июнь.2018 05:36:40

Спасибо) НУ вот бывает у меня беда, как начну городить забор из кода, а решение под носом оказывается правильное)) Вопрос невнимательности наверно

Tchr · 19.Июнь.2018 22:14:07

Вот мои 100%, понятное дело что ошибок много, хотел бы узнать из-за чего конкретно пришлось использовать не кратные 5 и 10 единицы (подгонять по пикселям). Ткните носом в ошибку, пожалуйста.

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

body {
width: 280px;
min-height: 250px;
font-size: 12px;
font-family: “Arial”, sans-serif;
line-height: 1.2;
color: #7f8c8d;
background: #ffffff;
}
.post {
background: #ecf0f1;
margin:0px;
padding:0px;
width:300px;
height:300px;
}
.post-stats .icon {
width: 15px;
height: 15px;
background-image: url("/assets/course14/post-challenge.png");
background-repeat:no-repeat;
}
.post .post-title {
position:absolute;
top:50px;
left:85px;
font-size:20px;
color:#2980b9;
}
.post-author {
position:absolute;
top:79px;
left:85px;
}
.post-text {
position:absolute;
width:170px;
height:95px;
padding:10px 10px 13px 15px;
background: #ffffff;
top:112px;
left:85px;
border-bottom:5px solid #bdc3c7;
}
.post-stats{
position:absolute;
top:98px;
left:105px;
}
.icon-tags{
position:absolute;
top:0px;
left:-20px;
}
.icon-comments{
position: absolute;
top:0px;
left:132px;
background-position: -20px 0;
}
.tick {
position:absolute;
top:0px;
left:152px;
}
a {
color:#2980b9;
text-decoration:none;
}
.post-date {
display:block;
position:absolute;
top:50px;
left:10px;
background:#ffffff;
height:55px;
width:55px;
border-bottom:5px solid #bdc3c7;
line-height:55px;
text-align:center;
font-weight:bold;
font-size:15px;
}
.post-type {
position:absolute;
height:55px;
width:55px;
background-color:#7f8c8d;
top:120px;
left:10px;
border-bottom:5px solid #bdc3c7;
background-image: url("/assets/course14/quotes.png");
background-repeat:no-repeat;
background-position:50% 50%;
}

Dasha2 · 26.Апрель.2022 07:02:10

100% результат

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 {
margin: 20px;
width: 175px;
padding: 10px 15px;
border-bottom: 5px solid #bdc3c7;
background: #ffffff;
}