18/18 100%

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

Пользовался подсказками, 1 размер не кратен 5(10) но до 100% добил:
CSS:

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

2

.post-text{
position: relative;
top: 20px;
left: 0;
}

1 лайк
3

Можно и я здесь вопрос задам? Код получился похожим на код автора темы, но я не задала для date нулевые left и top, посему блок оказался сдвинут к правому краю. В контексте этого кода, почему так необходимы эти обнуления (у меня в моменты их использования какой-то когнитивный диссонанс происходит)?

4

Кстати, сейчас заново набила код, применив нулевые координаты, нет, не проходит. Проходит вот так
.post-date{ position: absolute; width: 55px; height: 55px; background:#ffffff; font-weight: bold; text-align: center; font-size: 15px; line-height: 55px; border-bottom: 5px solid #bdc3c7; **left: -75px;** **top: 0px;** }
А здесь можно и без позиционирования
.post-text {margin-top:20px; padding:10px 10px 10px 15px; border-bottom: 5px solid #bdc3c7; background:#ffffff;}

5

Покажите весь свой код, пожалуйста.

6

`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;
top:0;
left:75px;
}

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

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

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

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

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

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

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

.post-text
{background:#ffffff;
width:175px;
padding:10px 15px;
border-bottom:5px solid #bdc3c7;
margin-top:25px;`

7

Ой, прошу прощения, низ немного не дописала (заново на ноутбуке вбивала код, предыдущий сохранился на дом компьютере)
Вот
.post-text {background:#ffffff; width:180px; padding:10px 10px 10px 15px; border-bottom:5px solid #bdc3c7; margin-top:25px;}
Хотя, что интересно с padding:10px 15px; тоже на 100% засчитали, но текст в блоке был расположен иначе, чем в образце по понятным причинам.

8

Вам обнуление не понадобилось, потому что для .post в вашем коде кроме position: relative; задана координата left: 75px;
Для .post-date задали left: -75px;
-75px+75px=0

2 лайка
9

Все, я поняла. В моем коде просто left, а в коде автора темы padding-left. Но я часто ловлю себя на занятии ‘методом научного тыка’ в отношении нулевых отступов. Может есть какая-нибудь “инструкция по применению” этого приема? Хочется до конца все же разобраться!

10

Посмотрите эту статью например.

1 лайк
11

Спасибо большое, изучу!

12

Решается только позиционированием?