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

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

Прошу оценить код, какие будут замечания, как его можно еще оптимизировать?

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-title {
color: #2980b9;
font-size: 20px;
margin-left: 75px;
}

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

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

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

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

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

.post-stats {
display: inline-block;
position: relative;
left: 95px;
margin-right: 30px;
}

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

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

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

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

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

2

Подсмотрела и еще есть такой вариант:

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;
padding-left: 75px;
}

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

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

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

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

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

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

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

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

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

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

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

1 лайк
3

Второй вариант лучше.

4

Не могли бы пояснить зачем тут отступ 75px? Это же основное поле? мне кажется наоборот все отступы должны равняться нулю

5

Вы с помощью этого отступа отодвигаете всё содержимое блока вправо, чтобы освободить место для post-date и post-type, которые будут спозиционированы абсолютно.

6

Теперь понятно! Спасибо!

7

Объясните пожалуйсто, почему надо заного задавать относительное позиционирование, в начале ведь задано уже?

8

В задании два блока .post-stats и каждый из них нужно сделать точкой отсчета координат при позиционировании иконки.

9

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

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

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

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

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

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

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

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

.icon-tags{
background-position:0px 0px;
}

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

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

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

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

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

10

Фуууух сделал… Оцените пожалуйста… Надеюсь зря сдесь время не провел на сайте))

    .post {
    position: relative;
    width: 300px;
    margin: 0;
    padding: 0;
}

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

.post .post-date,
.post .post-type,
.post .post-text{
    position: absolute;
    top: 0;
    background: #ffffff;
    font-size: 15px;
    font-weight: bold;
    box-sizing: border-box;
    width: 55px;
    height: 60px;
    padding-top: 19px;
    text-align: center;
    border-bottom: 5px solid #bdc3c7;  
}

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

.post .post-author {
    padding-top: 5px;
    padding-left: 75px;
}

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

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

.post-stats .icon {
    position: relative;
    /*background: #ffffff;*/
    width: 15px;
    height: 15px;
    top: 15px;
    right: 20px;
}

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

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

.post .post-text {
    /*display:none;*/
    position: absolute;
    box-sizing: border-box;
    right: 30px;
    top: 62px;
    width: 195px;
    height: 123px;
    background: #ffffff;
    font-size: 12px;
    font-weight: normal;
    text-align: left;
    padding: 10px 15px;
    margin: 0;
    
}
11

.post-text лишнее в этом правиле.
padding-left: 75px; лучше написать для .post, один раз.
Расскажите, каким образом вы выбираете, что использовать: относительное или абсолютное позиционирование?
Текстовому блоку .post-text не нужно задавать фиксированную высоту.

12

На мой взгляд, вот это правило можно один раз в начале кода прописать и не добавлять потом лишние правила типа этого.

1 лайк