Взломанный котопрофайл 18/18 97%

David_Shiko · 19.Январь.2017 15:10:17

Помогите пожалуйста, у меня 97% совпадения,очевидно,что не хватает голубого фона у строк “позывные-кто в тапки нассал” и “Политические
Продам все за еду”. Как вообще можно сделать тут отдельный фон,если у них все классы одинаковые,что сработает для 1,сработает и для другого…

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

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

.profile {
padding: 5px 10px;
}

.profile img {
display: block;
padding: 10px;
border: 2px solid #34495e;
border-radius: 8px;
}

.profile .photo{
float: left;
width: 152px;
}

.profile .info {
float: left;
width: 368px;
margin-left: 10px;
}

#info-title,
.info h2{
margin: 0 !important;
padding: 10px !important;
font-weight: normal;
font-size: 12px;
color: #ffffff;
background: #34495e;
border-radius: 4px;
}

.fact .title,
.fact .value{
padding: 10px;
background: white;
}

.fact:nth-child(odd) {
background: #ecf0f1;
}

.fact::after {
content: “”;
display: table;
clear: both;
}

.fact div.title {
float: left;
width: 120px;
text-align: right;
color: #7f8c8d;
}

.fact div.value {
margin-left: 140px;
color: #34495e;
}

.albums {
margin-top: 5px;
}

.albums img
,#miska {
float: left;
margin-right: 5px;
}

.albums img:last-child {
margin-right: 0;
}

.button.stroke,
.button.feed,
.button.startle{
display: block;
height: 30px;
margin: 5px 0;
line-height: 30px;
text-align: center;
color: #ffffff;
border-radius: 4px;
}

.button.stroke {
background: #3498db;
}

.button.feed {
background: #2ecc71;
}

.button.startle {
background: #e74c3c;
}

Ineska · 19.Январь.2017 15:12:45

А как же псевдоклассы, помните такие?

David_Shiko · 19.Январь.2017 18:17:00

Помню,только что с ним делать? Я прописывал этому свойству импортант,не помогло.

Ineska · 19.Январь.2017 18:37:22

Без !important обойтись можно.
Только еще в одном правиле селектор поменять придется:

.profile .info .fact {
padding: 10px;
background: white;
}

.profile .fact:nth-child(odd) {
background: #ecf0f1;
}

David_Shiko · 19.Январь.2017 19:37:20

Скопипастил этот код,тоже не работает почему то
я !important не применял,я с помощью него смотрел,как должно выглядеть в идеале)

David_Shiko · 21.Январь.2017 16:13:41

Так а что с этим кодом делать то надо?

Ineska · 21.Январь.2017 16:16:16

Покажите, как использовали подсказку, ваш последний вариант кода отправьте текстом.
Я ведь не вижу, что вы там накопировали.

David_Shiko · 21.Январь.2017 16:26:35

Ой,я вам наврал,сработало,видимо без проверки не прошли изменения.странно,что такой вариант не работал:

.profile:nth-child(odd) {
background: #ecf0f1 !important;
}

,ну да ладно ,спасибо вам!

Ineska · 21.Январь.2017 16:29:32

А причем здесь .profile, если каждая строка это .fact?
Повторите тему “Селекторы. Часть 1”, а то что-то совсем у вас понимания нет.

David_Shiko · 21.Январь.2017 18:27:27

Так он по умолчанию кажется стоял… я перебивал только свойства,указанные в html…

Ineska · 21.Январь.2017 18:29:18

Не было такого)

bangkok · 25.Январь.2017 20:07:50

Не пойму, как этих котов расставить. Марджином они не двигаются, через флоат +марджин тоже, возможно их можно в одно действие в ряд поставить?

Ineska · 25.Январь.2017 20:12:07

Вы должны изменять только селекторы, а не сами свойства в правилах.

Alexey_Ivanov · 26.Январь.2017 20:09:13

Смотрите, у Вас в HTML-разметке изменено только одно свойство второго кота с миской - #miska {margin-right: 50px; }. Вот только из-за этого одного свойства коты “не влазят” на одну строчку. Когда всё остальное исправите, в конце уже, просто пропишите в CSS такое же правило, только с правильным margin-right, как и между остальными котами.

lesya · 27.Январь.2017 11:45:06

Помогите добиться 100% что-то не пойму как отступ между надписью альбомы и самими фото сделать?
html,
body {
margin: 0;
padding: 0;
}

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

.profile {
padding: 5px 10px;
}

body .profile .photo img,
body .info .albums img{/done/
display: block;
padding: 10px;
border: 2px solid #34495e;/цвет мокрый асфальт/
border-radius: 8px;
}
body .profile .photo {
float: left;
width: 152px;
}

body .profile .info {
float: left;
width: 368px;
margin-left: 10px;
}

.info #info-title,
.info h2{ /done/

margin: 0!important;
padding: 10px!important;
font-weight: normal;
font-size: 12px;
color: #ffffff;
background: #34495e;/*цвет мокрый асфальт*/ 
border-radius: 4px;}

body .info .fact {/done/
padding: 10px;
background: white;
}

body .info .fact:nth-child(odd) {/done/
background: #ecf0f1;/цвет светло серый/
}

body .info .albums{
content: “”;
display: table;
clear: both;
}

body .fact .title {/done/
float: left;
width: 120px;
text-align: right;
color: #7f8c8d;/цвет серый/
}

body .fact .value {/done/
margin-left: 140px;
color: #34495e;/цвет мокрый асфальт/
}

body .info h2{/done/
margin-top:5px!important;
}

body .info .albums img,
#miska{
float: left;
margin-right: 5px;
}

body .info .albums img:last-child{
margin-right: 0;
}

body .button {/done/
display: block;
height: 30px;
margin: 5px 0;
line-height: 30px;
text-align: center;
color: #ffffff;
border-radius: 4px;
}

body .profile .stroke {/done/
background: #3498db; /цвет синий/
}

body .profile .feed {/done/
background: #2ecc71; /цвет зеленый/
}

body .profile .startle {/done/
background: #e74c3c; /цвет красный/
}

Ineska · 27.Январь.2017 12:15:06

В этом правиле отступы для альбомов, а у вас для заголовка.
И не используйте селектор body так часто. У каждого элемента есть свой ближайший непосредственный родитель.

lesya · 27.Январь.2017 12:42:49

Спасибо , поняла!!!

Iaroslav1 · 28.Январь.2017 10:16:03

Помогите и мне, пожалуйста. Коты никак не встают на место.
html,
body {
margin: 0;
padding: 0;
}

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

.profile {
padding: 5px 10px;
}

.profile img {
display: block;
padding: 10px;
border: 2px solid #34495e;
border-radius: 8px;
}

.profile .photo {
float: left;
width: 152px;
}

.profile .info {
float: left;
width: 368px;
margin-left: 10px;
}

.info h2#info-title {
margin: 0;
padding: 10px;
font-weight: normal;
font-size: 12px;
color: #ffffff;
background: #34495e;
border-radius: 4px;
}

.profile .info .fact {
padding: 10px;
background: white;
}

.profile .info .fact:nth-child(odd) {
background: #ecf0f1;
}

.fact::after {
content: “”;
display: table;
clear: both;
}

.profile .fact .title {
float: left;
width: 120px;
text-align: right;
color: #7f8c8d;
}

.profile .fact .value {
margin-left: 140px;
color: #34495e;
}

.albums {
margin-top: 5px;
}

.albums img, #miska {
float: left;
margin-right: 5px;
}

.albums img:last-child {
margin-right: 0;
}

.photo .button {
display: block;
height: 30px;
margin: 5px 0;
line-height: 30px;
text-align: center;
color: #ffffff;
border-radius: 4px;
}

.profile .photo .stroke {
background: #3498db;
}

.profile .photo .feed {
background: #2ecc71;
}

.profile .photo .startle {
background: #e74c3c;
}

Iaroslav1 · 28.Январь.2017 10:19:00

Я думаю, что причина в этом:
.albums img, #miska {
float: left;
margin-right: 5px;
}
Но где здесь ошибка?

Ineska · 28.Январь.2017 10:22:03

Нет, ошибки совсем в другом месте. У вас неправильно стилизованы заголовки h2.
Над этим правилом вам надо работать: