Помогите! Не могу понять где ошибка 94% (32/32)

Enotic · 06.Ноябрь.2017 13:50:10

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

body {
width: 450px;
height: 300px;
font-family: “Arial”, sans-serif;
font-size: 12px;
}

.gallery {
padding-top: 10px;
text-align: center;
}

.gallery .item {
width: 125px;
margin: 0 8px;
margin-bottom: 10px;
display: inline-block;
text-align: left;

}

.gallery .title {
margin-bottom: 5px;
line-height: 14px;

}

.gallery .frame {
background: #ecf0f1;
border: 1px solid black;
padding: 10px 0 0;
}

.gallery .image {
height: 70px;
background-position: 50% 50%;
background-repeat: no-repeat;
border-top: 1px solid black;
border-bottom: 1px solid black;
}

.gallery .image-1 {
background-color: #2ecc71;
background-image: url("/assets/course13/cat_box.png");
}

.gallery .image-2 {
background-color: #3498db;
background-image: url("/assets/course13/cat_fish.png");
}

.gallery .image-3 {
background-color: #f1c40f;
background-image: url("/assets/course13/cat_purr.png");
}

.gallery .image-4 {
background-color: #e67e22;
background-image: url("/assets/course13/cat_walk.png");
}

.gallery .image-5 {
background-color: #e74c3c;
background-image: url("/assets/course13/cat_drunk.png");
}

.gallery .date {
font-style: italic;
font-size: 11px;
color: #666666;
padding: 5px;
}
.gallery .item:nth-child(3n) {
margin-right: 8;
}

Ineska · 08.Ноябрь.2017 12:50:18

Это правило не работает. А еще вы не убрали пробелы у блочно-строчных элементов.

Enotic · 09.Ноябрь.2017 14:45:41

Спасибо, помогло
body {
width: 450px;
height: 300px;
font-family: “Arial”, sans-serif;
font-size:0;
}

.gallery {
padding-top: 10px;
text-align: center;

}

.gallery .item {
width: 125px;
margin: 0 10px;
margin-bottom: 10px;
display: inline-block;
text-align: left;
font-size: 12px;

Ineska · 09.Ноябрь.2017 15:18:08

Размер шрифта обнуляется у ближайшего родителя блочно-строчных элементов. В данном случае это не body.

Enotic · 09.Ноябрь.2017 15:23:17

body {
width: 450px;
height: 300px;
font-family: “Arial”, sans-serif;
font-size: 12px;
}

.gallery {
padding-top: 10px;
text-align: center;
font-size:0;

}

.gallery .item {
width: 125px;
margin: 0 10px;
margin-bottom: 10px;
display: inline-block;
text-align: left;
font-size: 12px;

KaiZerg · 16.Ноябрь.2017 03:56:02

Ребята, подскажите пожалуйста, не уловил суть решения, что касается .gallery .title.
Как вы вытащили название картинок за пределы таблицы с картинкой?

Ineska · 16.Ноябрь.2017 05:57:14

Покажите свой код.

KaiZerg · 16.Ноябрь.2017 08:50:31

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

Ineska · 16.Ноябрь.2017 11:54:40

Без кода наглядно объяснить не получится. Возможно, мы прописали рамку не тому элементу.

Xapek · 16.Ноябрь.2017 14:02:48

.gallery .frame {
background: #ecf0f1;
border: 1px solid black;
padding-top: 10px;
}

KaiINBishkek · 24.Ноябрь.2017 09:08:34

На 100%
html,
body {
margin: 0;
padding: 0;
}

body {
width: 450px;
height: 300px;
font-family: “Arial”, sans-serif;
font-size: 12px;
}

.gallery {
padding-top: 10px;
}

.gallery .item {
width: 125px;
margin-bottom: 10px;
margin-left: 18px;
display:inline-block;
}
.item:nth-child(2n){
margin-left: 17px;
}
.item:nth-child(3n){
margin-left: 16px;
}
.item:nth-child(4n){
margin-left: 90px;
}
.item:nth-child(5n){
margin-left: 17px;
}

.gallery .title {
margin-bottom: 5px;
line-height: 14px;
}

.gallery .frame {
background: #ecf0f1;
border: 1px solid black;
}

.gallery .image {
height: 70px;
background-position: 50% 50%;
background-repeat: no-repeat;
}

.gallery .image-1 {
background-color: #2ecc71;
background-image: url("/assets/course13/cat_box.png");
margin-top: 10px;
border-top: 1px solid black;
}

.gallery .image-2 {
background-color: #3498db;
background-image: url("/assets/course13/cat_fish.png");
margin-top: 10px;
border-top: 1px solid black;
}

.gallery .image-3 {
background-color: #f1c40f;
background-image: url("/assets/course13/cat_purr.png");
margin-top: 10px;
border-top: 1px solid black;
}

.gallery .image-4 {
background-color: #e67e22;
background-image: url("/assets/course13/cat_walk.png");
margin-top: 10px;
border-top: 1px solid black;
}

.gallery .image-5 {
background-color: #e74c3c;
background-image: url("/assets/course13/cat_drunk.png");
margin-top: 10px;
border-top: 1px solid black;
}

.gallery .date {
font-style: italic;
font-size: 11px;
color: #666666;
padding:5px;
border-top: 1px solid black;
}

Ineska · 24.Ноябрь.2017 10:11:51

Это очень плохо. У вас всего пять элементов, а вы используете пять формул nth-child.
Элементы в этом задании должны выравниваться с помощью text-align.

Kate744 · 11.Декабрь.2017 15:40:12

Какая команда конкретно убирает текст сверху из рамки и ставит его на рамку?
И зачем обнулять шрифт?

Ineska · 11.Декабрь.2017 18:33:42

Покажите код. Шрифт обнуляется у блочно-строчных элементов, чтобы убрать “пробелы” между ними.

Kate744 · 11.Декабрь.2017 19:07:46

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

body {
width: 450px;
height: 300px;
font-family: "Arial", sans-serif;
font-size: 12px;
}


.gallery {
padding-top: 10px;
 font-size: 0;
 text-align: center;
}

.gallery .item {
width: 125px;
margin: 0 10px;
margin-bottom: 10px;
 display: inline-block;
 font-size: 12px;
 text-align: left;

}


.gallery .title {
margin-bottom: 5px;
line-height: 14px;

}

.gallery .frame {
background: #ecf0f1;
border: 1px solid black;
padding-top: 10px;
}

.gallery .image {
height: 70px;
background-position: 50% 50%;
background-repeat: no-repeat;
border-top: 1px solid black;
border-bottom: 1px solid black;
}

.gallery .image-1 {
background-color: #2ecc71;
background-image: url("/assets/course13/cat_box.png");
}

.gallery .image-2 {
background-color: #3498db;
background-image: url("/assets/course13/cat_fish.png");

}

.gallery .image-3 {
background-color: #f1c40f;
background-image: url("/assets/course13/cat_purr.png");
}

.gallery .image-4 {
background-color: #e67e22;
background-image: url("/assets/course13/cat_walk.png");

}

.gallery .image-5 {
background-color: #e74c3c;
background-image: url("/assets/course13/cat_drunk.png");
}

.gallery .date {
font-style: italic;
font-size: 11px;
color: #666666;
padding:5px;
}

Ineska · 12.Декабрь.2017 07:15:19

В этом правиле ответ на ваш вопрос.

shidoari · 16.Декабрь.2017 19:02:46

Помогите найти ошибку.

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

body {
width: 450px;
height: 300px;
font-family: “Arial”, sans-serif;
font-size: 12px;
}

.gallery {
padding-top: 10px;
text-align: center;
padding: 10px;
font-size: 0px;
}

.gallery .item {
width: 125px;
margin: 0 10px;
margin-bottom: 10px;
display: inline-block;
font-size: 12px;

}

.gallery .title {
margin-bottom: 5px;
line-height: 14px;
text-align: left;
}

.gallery .frame {
background: #ecf0f1;
border: 1px solid;
}

.gallery .image {
height: 70px;
background-position: 50% 50%;
background-repeat: no-repeat;
margin-top: 10px;
border-top: 1px solid;
}

.gallery .image-1 {
background-color: #2ecc71;
background-image: url("/assets/course13/cat_box.png");
}

.gallery .image-2 {
background-color: #3498db;
background-image: url("/assets/course13/cat_fish.png");
}

.gallery .image-3 {
background-color: #f1c40f;
background-image: url("/assets/course13/cat_purr.png");
}

.gallery .image-4 {
background-color: #e67e22;
background-image: url("/assets/course13/cat_walk.png");
}

.gallery .image-5 {
background-color: #e74c3c;
background-image: url("/assets/course13/cat_drunk.png");
}

.gallery .date {
font-style: italic;
font-size: 11px;
color: #666666;
text-align: left;
border-top: 1px solid black;
padding: 5px;
}

Ineska · 16.Декабрь.2017 19:08:36

А что на вкладке “Различия”?

shidoari · 16.Декабрь.2017 19:23:36

dif_951adc897ac9fa9505e73dca840b6ff5

коты по 2 в ряд вместо 3.

Ineska · 16.Декабрь.2017 20:37:37

Выделенная строка лишняя.